코딩공부)HTML_웹표준 11일차_요소레벨,레이아웃 기본구조
*요소레벨(element level)*
태그가 어떻게 보여지는가에 대한 구분
줄이 바뀌는 태그&줄이 안바뀌는 태그
1.블록 레벨(Block Level)
- 독립된 행을 갖는 요소 집합
- 크기 지정,위치 조정 가능(*)
- p,h1~h6,ul,ol,li,div,table...
- 다른 블록 레벨 요소와 인라인 요소 포함 가능
- p,h,dt,address같은 일부 요소는 다른 블록 포함 불가
p,h,dt,address 같은 일부 요소는 다른 블록 포함 불가 - 인라인만 포함 할 수 있다.
1)독립된 행을 갖는 요소 집합
*Block Level Element
- default width : 100%(auto)
- default height : 0(auto)
너비는 100% 높이는 0 이지만 높이는 안에 콘텐트를 입려가면 자동으로 늘어남
규칙 : height라는 속성을 쓰면 안됨(쓰면 높이가 고정됨 박스 넘어감)
Overflow : 박스영역을 초과하는 콘텐츠를 처리하는 것 ex)overflow:hidden(중요)
*화면이 크던작던 넓이를 더씀 width:100% / 실제로는 auto라는 값
줄이 바뀌는 이유는 행전체를 사용하는 태그이기 때문
여백 space
(중요)
Overflow:hidden
Scroll : 스크롤생성됨
Auto : 넘치는방향으로만 스크롤 생성
2)크기 지정,위치 조정 가능(*)
3)p,h1~h6,ul,ol,li,div,table
문장 중간에 위의 태그 넣어보기
ex)요소 레벨은 태그가 <p class="brd">어떻게 보이는가에 </p>따른 구분입니다.
3)다른 블록 레벨 요소와 인라인 요소 포함 가능
인라인에서는 위치바꿈 안됨
<b><b1></b1><i></i></b>
css인라인과 html인라인은 다른점이 있다.
css적용방법
<head><style>~<style></head>(내부스타일internal style) - 자주쓰임
<element style="prop:value"> - 인라인방식의 스타일
NAME.css
<head><link href="NAME.css"></head>(외부스타일 liink style) - 자주쓰임
<style>
@import"NAME.css"(import style)
</style>
2.인라인 레벨(Inline Level)
- 범위 표시 요소의 집합
- 크기,위치 조정 불가(예외:img)
- a,em,strong,img,span(기능,뜻이없고 묶어주기만 - 내가 만든 별도의 효과를 적용 할 수 있게 해준다)
- 높이 속성 사용 불가
css속성중 일부는 요소레벨을 바꾸기도 한다.
a태그에 positon요소레벨 추가 inline-> blcok
임시로 바꿀 때 사용하는 속성 -> display
Flex,grid(최근에 나옴)
보통 display:none 사용 display는 -> 어떻게 보여라 라는 뜻 가진 속성/요소 레벨을 바꾸는 속성 많이쓰는 요소
- block
- inline
- inline - block(한줄에(inline처럼) 크기지정(block처럼)하고싶을 때 사용)
Element(tag) Level - Block Level
- Inline Level
Span -> (block) div
<- (inline)
5)p,h,dt,address 같은 일부 요소는 다른 블록 포함 불가
p,h,dt,address 같은 일부 요소는 다른 블록 포함 불가 - 인라인만 포함할 수 있다.
(x)
<p>
<div>블록 요소는 블럭요소와 인라인요소를 포함할 수 있습니다.
</div>
</p>
**레이아웃**
각각의 요소들을 필요한 자리에 위치하기
header
content(main)
Footer
**레이아웃 기본 구조**
1.header
- 상단 로고,GNB,topmenu 등
- 주로 페이지 안내(이동)에 관한 요소 포함
- 홈페이지 모든 페이지에 노출
- GNB : Global Navigation Bar - 메뉴바
2.content(main)
- 페이지별 내용,LNB,배너,게시판,퀵메뉴 등
- 해당 페이지에서 나타내고자 하는 내용 작성
- LNB : Local Navigation Bar - 사이드 메뉴
메인메뉴(대메뉴)에 포함된 하위메뉴(소메뉴)의 집합
3.footer
- 회사나 사이트에 대한 정보
- 각종 연락처,관리자 정보,카피라이트 등
4.기타 요소(sns 검색,관련 사이트 등)는 필요한 위치에 추가
id - 요소의 구분
Name - 폼태그
Class- css
- next
Float,position
레이아웃에 관련된 css속성
element.html