8 - CSS START!!

12454 단어 멋쟁이사자처럼프론트엔드스쿨2기TILTIL

Selector, Property, Value

Selector

HTML의 <p>태그를 가리키고 있는 p를 CSS에서는 선택자(selector)라고 부름

Property

font-size color에 해당하는 부분을 CSS에서는 속성(property)라고 부름

Value

14px yellow 에 해당하는 부분을 CSS에서는 값(value)라고 부름
값은 프로퍼티와 짝을 이루어 사용됨. 보통 각 프로퍼티에 허용되는 값의 종류가 정해져있음

Box모델

block box vs inline-block

block

  • 사용 가능한 공간을 양 옆으로 100% 사용하며, 사용하지 못하는 공간은 마진 영역으로 채움
  • width, height 속성을 사용하여 스타일을 컨트롤 할 수 있음
  • 패딩과 마진, 보더 속성을 사용하여 스타일을 컨트롤 할 수 있으며 해당 속성들이 다른 요소들을 밀어냄
  • 대표적인 Block element : <header>, <footer>, <p>, <li>, <table>, <div>, <h1>

inline-block

  • 컨텐츠 박스만큼의 크기를 갖는다. 때문에 새 줄로 행을 바꾸지 않음
  • width, height 속성을 사용 불가!
  • 패딩과 , 보더 속성을 사용할 수 있지만 마진 속성은 좌우만 조절할 수 있다.
    해당 속성들의 상하 값(top, bottom)들은 다른 요소들을 밀어내지 않는다.
  • 대표적 inline 요소 : span, <a>, <img>

<style>
      h1 {
        /* box-sizing: border-box; */
        width: 300px;
        height: 200px;
        padding: 30px 30px 30px 30px;
        border: 3px solid black;
        margin: 50px 50px 50px 50px;
      }
      strong {
        border: 10px solid black;
        padding: 100px;
      }
    </style>

<body>
    <h1>안녕하세요 여러분!!</h1>
    <strong>여러분은 강합니다!!</strong>
    <strong>만나서 반가워요!!</strong>
    <strong>배고파요 ㅠㅠ</strong> 
</body>

  • <strong>태그는 인라인 요소이기에 패딩이 다른요소를 밀어내지않고 겹쳐서 보이게 함!

외부 디스플레이 타입

inline

div{ display:inline }

block

div{ display:block }

inline-block

div{ display:inline-block }
  • inline 처럼 한 줄에 여러 요소가 존재할수 있다.
  • block 처럼 width, height, margin, padding 등 모든 값을 지정할 수 있다.
  • inline 속성의 특징과 block 속성의 특징이 함께 존재하는 박스

마진겹침

1. 서로상반된 요소

  • 인접해있는 block요소 끼리만 일어난다. 상하단만 해당사항이있다.
  • 요소와 요소의 사이에 마진 탑(margin-top) 혹은 마진 바텀(margin-bottom)의 공간이 있을 경우 더 높은 값의 마진 값이 적용되는 현상
<div class="first"></div>
<div class="second"></div>

div{
  width:100px;
  height:100px;
  border:1px solid black;
}

.first{
   margin-bottom:30px; 
}

.second{
  margin-top:60px;
}

/* 마진 값이 높은 쪽의 마진만 적용됩니다. */

2. 부모 자식요소

  • 부모 요소와 자식 요소가 존재할 때, 자식 요소의 마진 탑 혹은 마진 바텀 값이 부모의 높이에 영향을 미치지 않는 현상
<div class="parent">
  <div class="child"></div>
</div>

.parent{
  background-color:yellow;
}
.child{
  width:100px;
  height:100px;
  margin-top:50px;
  background-color:red;
}

/* 부모의 높이를 따로 지정하지 않으면 자식의 높이만큼 부모의 높이가 지정됩니다.
하지만 위와 같은 경우 자식의 마진 탑, 바텀 값이 부모의 높이에 영향을 미치지 않게 됩니다. */

  • parent의 margin-top이 적용안됨을 볼 수 있음
  • 위 그림처럼 .child 요소의 마진 값이 부모 영역을 넘어서고 있는 모습을 확인할 수 있다.
  • 이런 현상을 해결하지 않는다면 여러분의 생각과 다른 UI가 구성될 가능성이 있다.
  • 예를 들어 부모와 자식요소 모두에게 마진탑을 주고 싶은 경우 낮은 값의 마진 탑 값이 상쇄되어 버림.

해결방법!!

  1. 부모 요소에 overflow 속성 값을 적용 (overflow: hidden)
  2. 부모 요소에 display: inline-block 값을 적용
  3. 부모 요소에 border 값을 적용 (border: 1px solid transparent)

이 세 가지 방법 중에 상황에 가장 알맞는 방법을 이용하기!

기타

맨날 헷갈렸던 margin, padding, border 한줄에 쓰기!

/*[1]*/
border-color: red;

/*[2]*/
border-color: red green;

/*[3]*/
border-color : red green blue;

/*[4]*/
border-color : red green blue yellow;

[1] : 네 면에 동일하게 적용

[2] : (top bottom), (left right)

[3] : (top), (left right), (bottom)

[4] : top, right, bottom, left

border-box

 <style>
      * {
        margin: 0;
      }
      h1 {
        width: 200px;
        height: 130px;
        border: 3px solid #228b22;
        padding: 10px;
       /* box-sizing: border-box; */
      }
    </style>
  </head>
  <body>
    <h1>hello</h1>
  </body>

Q. h1 box의 크기는?
A. 226이다.
why? width 200 + padding (102) + border (32)

Q. 박스의 크기를 200으로 맞추고 싶으면 ?
A. <style>에 box-sizing: border-box; 해주면 content크기에 맞춰짐!

덩어리 콘텐츠 빨리 그리기
Day 08. Margin Collapsing

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage