DOM (html의 구조)
Document Object Model(관계 개념)
* 트리형 차트
트리의 구성원을 node라고 부름.
돔트리
대충 이렇게 생긴 페이지가 있다고 치겠삼.
<html>
<head>
<meta>
<tiltle></title>
<body>
<div><p></p></div>
<div>
<div></div>
<div></div>
</div>
<div>
<p><a><img></a></p>
</div>
</body>
</html>
그러면 그림으로 표현했을 때 이렇다고 볼 수 있는데
(선생님이 대충 이렇게 그렸던 거 같음)
* 태그들 간의 관계 용어
상위요소
하위요소
(부모요소) parent
(자식요소) children
(조상요소) ancestor
(후손요소) decendent
(형제관계) siblings
- div a {}
조상과 후손일 경우에도 효과 적용 가능
- div > a {}
자식요소일 때만 선택 가능하기 때문에 선택되지 않는다.
* 요소 레벨(Element Level)
태그가 어떻게 보여지는가(=줄이 바뀌나 안 바뀌나)에 대한 구분
- em 기울기는 15도 기울어짐. 모든 환경에서 동일
- 문장 중간에 줄이 바뀌나 안 바뀌나
h2, p, div / span, strong, em
1. 블록 레벨 (Block Level 줄이 바뀌는 태그)
- 독립된 행을 갖는 요소 집합
- 크기 지정, 위치, 조정 가능(*)
- p, h1~h6, ul, ol, li, div, table ...
- 다른 블록 레벨 요소와 인라인 요소 포함 가능
- p, h, dt, address 같은 일부 요소는 다른 블록 포함 불가
- default width: 100%, height: 0 (우리는 이해하기 쉽게)
- 콘텐츠의 크기 만큼의 높이가 생김
- W3C는 default weight, height를 auto라고 함
- height가 고정되버린다. (넘치는 부분 발생)
- 넘치는 부분 overflow
1) visible
2) hidden (안 보이게)
3) scroll(스크롤 모두 생기지만 넘치는 부위만 활성화),
4) auto(안 넘치면 그냥 두고 넘치면 스크롤바)
팁: 이용약관 옛날엔 textarea(form)를 했지만
사용자가 입력이 아니라 정보를 얻어야 되니까
div 만들어서 한쪽으로만 스크롤 생기게 하는 것이 더 정확하다.
<블록 레벨 안에 인라인 레벨 들어온 경우>
<블록 레벨은 독립된 행을 가진다>
<넘치는 부분은 overflow를 준다>
<블록 레벨은 다른 블록 레벨 요소와 인라인 요소 포함 가능 &
인라인 요소에 스타일을 줘서 블록처럼 사용할 수 있음>
<다른 블럭 요소를 포함할 수 없는 블럭 요소도 있음>
ex) p태그 안에는 div 태그 못 들어옴.
★하면서 별 거 아닌 거 같지만 굉장히 중요했던 거★
{border : 2px solid #f00}
★border 줄 때는 : 뒤에 나란히 나란히 쓰면 된다★
괜히 solid 뒤에 : 쓰고 ; 쓰고 이러면 적용이 안 되고
도대체 뭐가 문제지 왜 안 되지 왜 안 돼 으엉어엉엉
하면서 선생님이 해놓은 것 복사해와서 비교하다가 : 표시 중간에
하나 더 있는 거 발견하고 셀프 싸다구 때리게 됨.
2. 인라인 레벨(Inline Level)
- 범위 표시 요소의 집합
- 크기, 위치 조정 불가(예외: img)
- a, em, strong, img, span...
- 블록 레벨 요소는 포함할 수 없고 인라인 요소만 포함 가능
- 높이 속성 사용 불가
- 요소의 레벨을 바꾸는 속성도 있구나 position:absolute(절대값, 무조건)
- display(어떻게 보여라) 속성 display:none
라벨 줘놓고 감추는 법 요소 레벨을 바꿔주는 속성!!!
나 이거 정리해놓고 이해 안 됨.. ㅋㅋㅋㅋㅋ
오늘 포지션 배우면 이해될 듯! ^.^!
* 웹표준검사
valid 유효성 검사
* 레이아웃 기본 구조
1. header
- 상단 로고, GNB, topmenu 등
- 주로 페이지 안내(이동)에 관한 요소 포함
- 홈페이지 모든 페이지에 노출
- GNB : Global Navigation Bar - 메뉴바
2. content(main)
- 페이지별 내용, LNB, 배너, 게시판, 퀵메뉴 등
- 해당 페이지에서 나타내고자 하는 내용 작성
- LNB : Local Navigation Bar - 사이드 메뉴
메인메뉴(대메뉴)에 포함된 하위메뉴(소메뉴)의 집합
3. footer
- 회사나 사이트에 대한 정보
- 각종 연락처, 관리자 정보, 약관 및 정책, 카피라이트 등
4. 기타 요소(SNS, 검색, 관련 사이트 등)는 필요한 위치에 추가
'프론트엔드 개발자 양성과정 수업 정리 > CSS' 카테고리의 다른 글
| CSS 레이아웃 box-sizing 브라우저 크기 계산 안 해도 되는 법 (1) | 2020.10.22 |
|---|---|
| 1020 레이아웃을 위한 css의 margin, padding, float 속성 (3) | 2020.10.21 |
| 1019 html 마크업(markup) 및 콘텐츠 블럭, CSS 초기 (2) | 2020.10.19 |