본문 바로가기
개발일지/임시카테고리

html 기본 요소 **매우중요

by 다니엘의 개발 이야기 2025. 1. 16.
320x100

#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 (순서가 있는 리스트)

  1. ol 리스트1
  2. 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로 대체가 가능하나, 프로젝트 규모가 커질 수록, 협업을 할 수록, 무엇을 위한 것인지 구분해주기 위해서 이런 태그 이름이 필요하다.

 

300x250

'개발일지 > 임시카테고리' 카테고리의 다른 글

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