CSS박스모델
블럭 레벨 요소
한줄을 통째로 차지하는 요소
div, p, hm, ul, ol, from, table, fieldset, address
인라인 레벨 요소
표시되는 컨텐츠만큼만 차지하는 요소
img, strong, br, sub, span, input
display속성
필요에 따라 인라인 레벨과 블록 레벨을 설정 할 수 있음
- display : block (해당요소를 블록레벨로 지정)
- display : inline
- display : inline-block
- display : none (안보임, 공간차지x) **visibility : hidden; (안보임, 공간차지)
박스위 테두리 스타일 지정
none : 기본 값.
hidden : 나타나지 않음.
dashed : 짧은 선으로 효시
dotted : 점선으로 표시
double : 이중선으로 표시. 두 선 사이의 간격은 border-width로 지정
solid : 실선으로 표시
border-width : 테두리 두께 지정
border-color : 박스의 테두리 색상을 지정
border-radius : 박스 모서리 둥굴게 처리
border : 테두리스타일, 두께, 색상 등 여러 속성 동시 표시
margin : 현재 요소 주변의 여백
padding : 콘텐츠 영역과 테두리 상이의 여백
box-sizing
요소 배치를 위해 요소의 너비 계산에 이용
컨텐츠 영역의 너비에 패딩과 테두리 크기까지 하벼서 width 속성 지정이 가능하다
flot : 웹 요소를 문서위에 떠 있는 상태로 만듬, 요소의 왼쪽 구석 혹은, 오른쪽 구석에 요소가 배치된다는 것
clear : flot이 끝났다는 걸 알려줌
position
fiexd : like 고정배너
z-index
한 요소 위에 다른 요소를 쌓기 위해 순서를 지정한다
값이 작을 수록
시맨틱 테그
<header>
특정부분의 머릿말 <body>문 안에 위치
**<head> 랑 햇갈리지 말자. head 문서설명
<nav>
링크연결, <header>, <footer>, <aside> 어디든지 포함가능
<ifame>
웹페이지 속 웹페이지
** 해킹위험이 있어서 youtube 빼고는 잘 사용 하지 않는다.
<section>
콘텐츠를 주제별로 묶을 때 사용
웹상에 실제 내용을 넣음
<article>
콘텐츠
like 블로그 포스트, 웹사이트의 내용