#1 block, inline요소
1) block 요소
block 요소는
div, h1, hr, p
태그 등으로 구성되며, 화면을 가로 12분할로 봤을때, 12분할 전체를 차지하는 태그다.
따라서, 가로 중에서도 "부분"영역이 아니라, "전체"영역을 담당한다는 점을 유념하자.
2)inline
inline요소는
span, input, img, a
태그 등으로 구성되며, block과는 다르게, 가로를 12분할로 보더라도, 1칸 부터 12칸까지 조정이 가능하다.
#2 종속태그
종속태그의 중요성은 "상호작용"해야지만 "작동한다"라는 점 때문이다.
이를테면
부모태그 + 자식태그 = 작동 되지만
태그 단독 - 작동 되지 않는다.
여기에는 select, ol, ul, table등이 있다.
종속태그의 일종으로는 "목록"태그가 있다.
li 태그를 ol로 감싸면, 넘버링이 생긴다.
목록태그에는
ol, ul,dl등이 있다.
ol - ordered list (순서가 있는 리스트)
- ol 리스트1
- ol 리스트2
ol > li 형식으로 구성된다.
ul - unordered list (순서가 없는 리스트)
- ul리스트1
- ul리스트2
ul > li 형식으로 구성된다.
dl - definition list (정의 목록 리스트)
여기에는 함께 사용 되는 태그가 독특하다.
dl > dt > dd로 구성된다.
1) dl로 감싸야 정의 태그가 나타난다
2) dt는 definition title을 의미한다.
3) dd는 definition description을 의미한다.
- dt영역
- dd영역
#3 body 태그 내의 활용 부분
위에서부터 순서대로
(추정)
header - block
nav - block
section - inline
article - inline
aside - inline
footer - block
위의 태그들은 div로 대체가 가능하나, 프로젝트 규모가 커질 수록, 협업을 할 수록, 무엇을 위한 것인지 구분해주기 위해서 이런 태그 이름이 필요하다.
'개발일지 > 임시카테고리' 카테고리의 다른 글
css flex (1) | 2025.01.20 |
---|---|
css 기초 (0) | 2025.01.16 |
Javascript 비교 구문 - ==, === 설명, a와 A의 차이 (0) | 2025.01.11 |
javascript의 defer vs async 개념 정리 (0) | 2025.01.10 |
javascript의 연산자 기초 (0) | 2025.01.10 |