- 인라인 vs 블록 레벨

<style> <!-- 인라인,블렉레벨 사용자 정의--> h1,a{ border: 1px solid red; display: inline; } a{display: block;} </style>

- 박스 모델(box model)
<style> p{ border:10px solid red; padding:20px; margin:40px; width:120px; height:20px; } </style>

- box-sizing


<style> *{ <!-- 모든 태그들에게 적용--> box-sizing: border-box; <!-- 기본 값은 content-box--> } div{ margin:10px; width: 150px; } #bigsize{ border:30px solid black; } #smallsize{ border:10px solid black; }
- 마진 겹침

부모 엘리먼트의 마진 값과 자식 엘리먼트의 마진 값 중에서 더 큰 값의 마진 값을 사용하게 된다.

위의 margin 50px 아래의 100px 가운데 더 큰 값인 100px을 marginr값으로 같게 된다.
- 포지션(position)
<style> #me{ /* position: relative; 상대적임 */ /* position: static; 정적임 */ /* position: absolute; top:100px; left:100px } </style>
- bottom이 top보다 우선순위가 높다.
- left가 right보다 우선순위가 높다.
- position type이 relative일 때 offset을 사용할 수 있다.
- absolute의 위치는 부모 엘리먼트의 기준으로 위치가 left, top값으로 지정된다.
- absolute는 static이 아닌 부모가 나타날 때까지 무시하고, static이 아닌 부모가 나타나면 해당 위치에 맞는 offset값을 설정함.
- fixed는 특정한 엘리먼트를 화면에 위치를 고정시켜 스크롤로부터 완전히 독립시킬 수 있음.
'개발' 카테고리의 다른 글
CSS 공부 - 5 (0) | 2020.12.10 |
---|---|
CSS 공부 - 4 (0) | 2020.12.09 |
CSS 공부 - 2 (0) | 2020.12.07 |
CSS 공부 -1 (0) | 2020.12.03 |
[WEB] HTML 학습 -1 (0) | 2020.12.02 |