CSS - 박스모델 (1)

-> 모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 엘리먼트(요소)들이 하나의 박스가 됩니다.

<h1>Basic document flow</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not</p>

h1 {
  background: gray;
  width: 30%;
}

p {
  background: rgba(255,84,104,0.3);
  width: 80%;
  height: 200px;
}

span {
  background: yellow;
  width: 10px;
  height: 10px;
}

• (1) 줄바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)

  • Q)위 HTML에서 줄바꿈이 적용되는 태그는 무엇인가요? 줄바꿈이 적용되지 않은 태그는 무엇인가요? h1 p
    줄바꿈이 되는 태그: <h1> <p>
    줄바꿈이 되지 않는 태그: <span>
    ->Block 요소의 대표적인 예는 <div>, <p> 입니다.
    ->Inline 요소의 대표적인 예는 <span>입니다.

  • Q)위 CSS 코드에서 실제로 작동하지 않는 것이 존재합니다. 무엇일까요? span (width height)
    <span> 태그의 경우는 width, height 속성이 적용되지 않습니다.
    block 박스와는 다르게 inline 박스는 width, height 속성이 적용되지 않습니다.

span {
background: yellow;
width: 10px;
height: 10px;
}

span {
background: yellow;
display: inline-block; // <- 이렇게 변경해본다. 
width: 100px;
height: 100px;
}
//inline-block 박스는 inline 박스처럼 다른 요소의 옆으로 붙으면서, 자체적으로 고유의 크기를 가집니다. 

• 정리
  

• (2) 박스를 구성하는 요소
  

• border (테두리)
  테두리는 심미적인 용도 외에도, 개발 과정에서도 매우 의미있게 사용합니다. 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만듭니다. 다음의 코드를 통해 테두리를 실선으로 확인할 수 있습니다.

p {
  border: 1px solid red;
}

• margin (바깥 여백)

p {
  margin: 10px 20px 30px 40px;
} //p태그의 상하좌우에 여백을 추가합니다

p {
  margin: 10px 20px;
} //p태그의 위아래와 좌우에 각각 여백을 추가합니다.

p {
  margin: 10px;
} //  p태그의 모든 방향에 여백을 추가합니다.

p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
} // margin의 위치를 특정해 여백을 추가할 수 있습니다.

p {
  margin-top: -2rem;
}// p태그의 margin-top 속성에 음수 값을 지정합니다. 

-> 여백에 음수 값을 지정하면 다른 엘리먼트와의 간격이 줄어듭니다. 극단적으로 적용하면, 화면(viewport)에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게 만들 수도 있습니다

• padding (안쪽 여백)

p {
  padding: 10px 20px 30px 40px;
}//  p태그의 padding 속성에 여백을 추가합니다.

p {
  padding: 10px 20px 30px 40px;
  border: 1px solid red;
  background-color: lightyellow; //
} p태그에 border, background-color 속성을 추가합니다.

출처: 코드스테이츠