HTML & CSS
Doctype / 경로 / 빈태그 / Inline요소와 Block요소 / 전역 속성
yunieyunie
2022. 10. 12. 18:46
❗ <!DOCTYPE>
- 문서의 html 버전을 지정하는 것으로 DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하고 웹 브라우저가 어떤 html버전으로 페이지를 이해하면 되는지 알려주는 역할을 한다.
- html5가 표준이며 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ... 등으로 시작한다면 HTML5의 이전 버전인 XHTML이다.
⚾ 상대경로
- ./ 는 현재 파일 위치 주변에서 찾는 것을 의미하며 생략 가능
- ../는 현재 파일의 상위 폴더에서 찾는 것을 의미
🥎 절대경로
- http or https로 시작하면 절대 경로로 원격의 다른 사이트를 의미
- /는 최상위 경로(루트 경로)를 의미
🛒 빈 태그 (empty tag)
- 종료(닫힌)태그가 없는 태그를 빈 태그라고 부른다.
- <태그>는 html1,2,3,4,5에서 사용된 방식이고 <태그/>는 xhtml, html5에서 사용하는 방식이다.
- 뒤에 슬래시를 붙인 <태그/>가 좀 더 안전하게 사용될 수 있기 때문에 되도록 슬래시를 붙이는 것이 권장된다.
- 빈태그들은 거의 대부분 속성과 값으로 기능을 확장해서 사용한다.
⚽ Inline(글자)요소
- 인라인요소는 글자를 만들기 위한 요소
- 인라인요소에서의 줄바꿈은 띄어쓰기로 들어가게 된다.
- 인라인요소는 가로 세로 사이즈가 포함하고 있는 글자 크기 만큼 자동으로 줄어든다.
- 인라인요소는 글자이기 때문에 가로 세로 사이즈를 지정할 수 없다.
- 인라인요소는 위 아래 여백을 사용할 수 없다.
- 인라인요소는 자식요소로 인라인은 가능하지만 블록 요소는 사용할 수 없다.
- 인라인요소는 요소들이 수평으로 쌓인다.
핵심 요소
- img : 이미지를 삽입하는 요소 (image)
- a : 어떤 페이지로 이동하는 하이퍼링크를 지정하는 요소 (anchor), target="_blank" 는 새로운 탭
- span : 특별한 의미가 없는 영역 구분을 위한 요소
- br : 강제 줄바꿈 요소 (break)
- input : 데이터를 입력받는 요소로 인라인이면서 동시에 블록 요소
- label : 라벨 가능 요소(input)의 제목
🏀 Block(상자)요소
- 블록요소는 상자(레이아웃)을 만들기 위한 요소
- 블록요소는 부모 요소의 크기만큼 가로너비는 자동으로 늘어나고 세로너비는 줄어든다.
- 블록요소는 박스이기 때문에 가로 세로 사이즈와 내부 외부 여백을 모두 지정할 수 있다.
- 블록요소는 자식요소로 인라인과 블록 요소 모두 사용가능하다.
- 블록요소는 요소가 수직으로 쌓인다.
핵심 요소
- div : 특별한 의미가 없이 영역 구분을 위한 요소 (division)
- h1 ~ h6 : 제목을 의미하는 요소 (heading), 숫자가 작을수록더 중요한 제목을 의미
- p : 문장을 의미하는 요소 (paragraph)
- ul : 순서가 필요없는 목록의 집합 (unordered list), ul 안에는 반드시 li이 존재
- li : 목록 내 각 항목 (list item)
- input : 데이터를 입력받는 요소로 인라인이면서 동시에 블록 요소
- table : 행(tr) 열(td)로 이루어져 표를 만들때 사용하는 요소
📢 전역 속성
- 전역 속성이란 html 태그에서 모두 사용할 수 있는 속성
- title : 요소의 정보나 설명을 지정
- style : 요소의 스타일(css)를 지정
- class : 요소를 지칭하는 중복이 가능한 이름
- id : 요소를 지칭하는 고유한 이름
- data-이름="데이터" : 요소에 특정한 데이터를 지정