웹 UI개발 정리[ css(5)box-model]

background 관련 속성

background-color, background-repeat, background-attachment, background-position 

 

속성의 기본값들(순서대로) : transparent, repeat, scroll, 0% 0%

 

 

• background-color

      기본 값 : transparent

배경의 색상을 지정하는 속성입니다.
앞선 색상 강의에서 배운 색상 값 적용 방식과 같습니다.

 

 

• background-position 기본 값 : 0%  0% 요소에서 배경 이미지의 위치를 지정하는 속성입니다.  x축, y축으로부터의 위치를 지정할 수 있으며, 값의 선언 순서는 x축, y축으로부터의 간격입니다. 만일 한쪽만 지정된다면 나머지는 중앙 값(center)으로 적용됩니다.

background-position는 div안에서 해야함

 

< 속성 값 >

%	기준으로부터 % 만큼 떨어진 지점과 이미지의 % 지점이 일치하는 곳에 위치시킵니다.
px	기준으로부터 px 만큼 떨어진 지점과 이미지의 (0,0) 지점이 일치하는 곳에 위치시킵니다.
키워드	top, left, right, bottom, center 키워드를 사용할 수 있습니다. 키워드는 선언 순서와 관계없이 top, bottom은 y축 기준으로 하며 left, right는 x축을 기준으로 합니다.

  

• background-attachment 기본 값 : scroll 화면 스크롤에 따른 배경 이미지의 움직임 여부를 지정하는 속성입니다.

---

margin 속성 , padding 속성

       기본 값 : 0

 

< 속성 값 >

length	고정값으로 지정합니다. (ex. px, em ....)
percent	요소의 width에 상대적인 크기를 지정합니다.
auto	브라우저에 의해 계산된 값이 적용 됩니다.

 

auto 활용방식과 주사용 용도

$$ auto는 가로값(width)에 의해 값이 정해진다.(고급기능에서는 세로로도 정해질 수도 있다)

(auto와 음수는 padding에서는 사용불가)

 

 

margin collapse(마진 병합)

마진 병합은 인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것을 의미합니다.

---

Q. 아래 코드를 보고 <h1>과 <p> 사이의 간격으로 알맞은 것을 고르시오.

 

<h1>Margin Collapse</h1>
<div><p>What do you think?</p></div>

h1 { margin: 0 0 20px 0; }
div { margin-top: 40px; } 
p { margin-top: 30px ;}

 

• 40px
• 50px
• 70px
• 60px

 

 

정답: 40px 

내 답: 70px p는 div에 종속되어 있어, p와 div의 marigin 경계 출발점은 p의 contents 임. 

h1과 div의 margin의 싸움(마진 병합)에서는 더 긴 div가 승리.

<p>의 margin값은 30임

<div>의 영역. <p>와 contents의 영역이 동일함. margin의 길이는 더 길다.

 

---

• 음수값 사용 가능 여부! 왜 margin은 음수 값 적용이 가능하고, padding은 적용되지 않을까요? 예를 들어 생각해보자면, padding은 뼈와 우리 피부 사이의 지방이라고 생각하고, margin은 사람과 사람 사이의 간격이라고 생각하면 쉽습니다. 지방은 아무리 뺀다고 해서 피부가 뼈보다 밑으로 갈 수 없을 뿐만 아니라, 0 이하가 될 수 없으므로 양수만 된다고 생각하면 됩니다. 그러나 사람과 사람 사이는 멀리 떨어질 수도 있지만, 서로 겹쳐서 서 있을 수도 있으므로 음수 값이 가능하다고 생각하면 됩니다.

 

• %값의 사용과 기준점 css 속성을 사용하면서 어떤 값을 적용할 때 이 단위를 적용 할 수 있을까? 라는 생각을 가지고 코딩하는 자세는 매우 중요합니다. margin과 padding은 px과 같은 고정적인 단위 외에도 %라는 상대적인 단위를 사용 할 수 있습니다. %는 요소의 크기를 기준으로 상대적인 값을 결정짓게 됩니다. 얼핏 생각하면, 상하는 height 값에 대해 좌우는 width 값에 대해 크기가 계산될 거 같지만 그렇지 않습니다. %는 상하좌우의 방향에 관계없이 모두 요소의 width 값을 기준으로 값이 결정 됩니다.

 

 

---

width 속성 : contents 영역의 길이를 변환.

      기본 값 : 0

 

< 속성 값 >

auto	브라우저에 의해 자동으로 계산하여 적용합니다. * 요소의 레벨 기본 특성에 따라 다르게 동작합니다.
length	고정값으로 지정합니다. (ex. px, em ....)
percent	부모 요소의 contents를 기준으로  width에 상대적인 크기를 지정합니다.

width는 content 영역의 너비를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면,

그 크기는 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받습니다. (content, padding, border) 

예를 들어,

<div class="box"> box </div>
 
.box {
  width: 100px;
  padding: 20px;
  border: 10px solid black;
}

위와 같이 선언되어있다면 요소의 총 가로 크기는 160px가 됩니다.

분명 width: 100px를 적용했는데 어떻게 160px가 된 걸까요?

앞선 설명에서 언급한 바와 같이 width는 padding, border 영역에 대해서 영향을 받기 때문입니다.

 

 

식으로 나타내면,

100px content + ( 20px * 2) padding + ( 10px * 2 ) border = 160px(box-sizing 가로길이) 가 된 것입니다.   

또한, width는 %를 이용해서도 크기를 지정할 수 있습니다.

---

 

Q. inner의 전체 가로 길이로 알맞은 것을 고르시오.

 

<div class="wrap">

<div class="box">  

<div class="inner">inner</div>

</div>

</div>

.wrap { width: 500px; margin: 0 5px; padding: 10px; border: 15px solid red; }
.box { width: 60%; padding: 20px; border: 10px solid black; }
.inner { width: 30%; padding: 5px; background: pink; }

 

 

• 75px
• 85px
• 90px
• 100px

 

 

 

정답: 4번 

오답원인: inner의 전체 가로길이 : width(contents 길이) : 90 + (padding + margin + border) : 10 . width가 가로길이인줄..

---

height 속성

      기본 값 : 0

 

< 속성 값 > 

auto	브라우저 자동으로 계산하여 적용합니다. * 기본적으로 컨텐츠 영역의 내용만큼 높이를 가집니다.
length	고정값으로 지정합니다. (ex. px, em ....)
percent	부모 요소의 height에 상대적인 크기를 지정. * 단, 부모 요소가 명시적(정확한 값)으로 height 값이 있어야 합니다.

height는 content 영역의 높이를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면,

width 속성과 마찬가지로 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받습니다.

예를 들어,

<div class="box"> box </div>
 
.box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 15px solid black;
}

위와 같이 선언되어있다면 요소의 총 세로 크기(box-sizing 세로크기)는 150px이 됩니다.

앞선 설명에서 언급한 바와 같이 height도 padding, border 영역에 대해서 추가로 영향을 받기 때문입니다.

 

Q. .child 요소의 전체 높이 값으로 알맞은 것을 고르시오.

<div class="parent">

<div class="child"></div>

</div>

 .parent { width: 300px; padding: 10px; border: 10px solid black; }
.child { height: 30%; padding: 15px; border: 5px solid black; }

 

• 40px
• 12px
• 52px
• 0

 

 

답: 1번

나의 오답 이유: 

margin의 %는 가로든, 세로든 width의 영향을 받지만.  height의 %는 딱 정해진 부모의 값을 기준으로 값이 정해짐.
height의 기본값은 0 이기 때문에 height 30%도 0이 되는것.

 

전체 높이 값을 구하라 했으니. contents는 0 이고, border 와 padding 값의 합은 40임.