UIUX 디자이너, 프론트엔드 학습_HTML

이번 장에서는 HTML과 관련해 학습한 내용을 정리해보려 한다.

---

기본 문법

<태그>내용</태그>는 하나의 요소(Element)

<태그> : 시작 태그

</태그> : 종료 태그

 

 

부모와 자식 관계의 이해

 

 

글자와 상자

• 인라인 요소 : 글자를 만들기 위한 요소들
  • <span></span> : 대표적인 인라인 요소, 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도
  • 요소가 수평으로 쌓인다.
  • 포함한 콘텐츠 크기만큼 가로와 세로 값이 자동으로 줄어든다.
  • 글자 요소는 가로 세로 사이즈를 조정할 수 없다.
  • 인라인 요소 안에는 블록 요소를 넣을 수 없다.
    • <span><div></div></span>
    • <span><span></span></span>
• 블록 요소 : 상자(레이아웃)를 만들기 위한 요소들
  • <div></div> : 대표적인 블록 요소, 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도
  • 요소가 수직으로 쌓인다.
  • 부모 요소의 크기만큼 자동으로 늘어난다.
  • 포함한 콘텐츠 크기만큼 자동으로 줄어든다.
  • 가로 세로 사이즈를 조정할 수 있다.
  • 마진, 패딩 값도 조절 가능
  • 인라인 요소 안에는 블록 요소를 넣을 수 있다
    • <div><div></div></div>
    • <div><span></span></div>

 

 

HTML 핵심 요소 정리

• div
  • 블록 요소
  • 레이아웃 작업할 때 많이 사용
  • 특별한 의미가 없는 구분을 위한 요소
• h1
  • 블록 요소
  • 제목을 의미하는 요소
  • 1~6번까지 있으며, 숫자가 작을수록 더 중요한 제목을 정의
• p
  • 블록 요소
  • 문장을 의미하는 요소
  • div 태그도 가능
• img
  • 인라인 요소
  • 이미지를 삽입하는 요소
  • <img src="img/~~.jpg" alt="12호 태풍" />
• ul(Unorderde List)
  • 블록 요소
  • 순서가 필요 없는 목록의 집합을 의미
  • 무조건 li 태그가 있어야 함
  • ul과 li는 하나의 세트
• li
  • 블록 요소
  • 목록 내 각 항목
• a
  • 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소
  • <a href="https://www.naver.com">NAVER</a>
  • target="_blank">를 적으면 새 탭에 열린다.
• span
  • 인라인 요소
  • 특별한 의미가 없는 구분을 위한 요소
  • 하나의 글자로 취급
• br
  • 인라인 요소
  • 줄 바꿈 요소
• input
  • 인라인+블록 요소
  • 사용자가 테이터를 입력하는 요소
  • <input type="text" />
  • <input type="text" placeholder="이메일을 입력하세요" />
    • 우리가 보편적으로 보는 플레이스 홀더를 만드는 법
  • <input type="text" disabled />
    • 입력 요소를 비활성화하는 법

 

 

전역 속성

• <태그 title="설명"></태그> : 요소의 정보나 설명을 지정
• <태그 style="스타일"></태그> : 요소에 적용할 스타일(CSS)을 지정
• <태그 class="이름"></태그> : 요소를 지칭하는 중복 가능한 이름
• <태그 id="이름"></태그> : 요소를 지칭하는 고유한 이름
  • 요소에 이름을 지정해 주나 이것은 중복하면 안 된다.
  • 중복이 되면 안 되는 요소에 사용한다.
• <태그 data-이름="epdlxj"></태그> : 요소에 데이터를 지정