CSS 공부 - 3

개발 · 2020. 12. 8.
  • 인라인 vs 블록 레벨

스크린샷 2020-12-08 오전 12.49.44.png
블럭, 인라인

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

스크린샷 2020-12-08 오전 12.53.01.png
블럭,인라인 사용자 정의

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

스크린샷 2020-12-08 오전 1.02.39.png
box model

  • box-sizing

스크린샷 2020-12-08 오후 2.13.40.png
box
스크린샷 2020-12-08 오후 2.15.28.png
box-sizing:border-box

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

 

  • 마진 겹침

스크린샷 2020-12-08 오후 2.19.25.png
마진 겹침

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

스크린샷 2020-12-08 오후 2.40.17.png
마진 겹침

위의 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