[css] 박스모델 자세하게 알아보자 (margin, padding, border, background..)

박스 모델은 말 그대로 박스를 만드는 것 

 

css의 처음이자 마지막이다 

 

알아보자

 

 

 

---

마진과 패딩

 

 

컨텐트를 감싸고 있는 친구가 box 그  실선이 border다

 

패딩(padding)은 박스 모델의 내부와 외부 공간을 구성하는 속성이다 

 

콘텐츠를 기본으로 보더(border)까지 공간을 패딩이라 하며 보더부터 점선까지 마진(margin)이라고 한다

 

.box1{
  margin: 30px;            //바깥으로 30px씩
  padding: 30px;           //안쪽으로 30px씩
  border: 5px solid red;   //테두리 5픽셀로 빨간색
  width: 500px;            // box너비 500px
}

하나의 값을 적용하면 네 가지 방향(상,하,좌,우)으로 공간이 생겨 밀려난다

 

 

 

하나씩 해줄 수도 있다 

.box1{
  margin-top: 30px;
  margin-bottom: 30px;
  margin-right: 30px;
  margin-left: 30px;
}

 

 

 

한번에 할 수는 없을까

.box1{
  margin: 30px 10px 39px 12px
}

차례대로 상, 우, 하, 좌 시계방향이다 개꿀이다 

 

 

 

.box{
  margin: 20px 10px;
}

요롷게 해주면 상하, 좌우

 

 

.box{
  margin: 15px 10px 30px;
}

요로면 상, 하, 좌우

 

 

 

 

속성값을 마이너스(-) 로 주게되면 그 반대로 이동해 겹치게 만들 수도 있다

 

원래 위아래로 쌓여 있던 블록이

.box2{  //파란블록
    width: 200px;
    height: 200px;
    background-color: blue;

    margin-top: -50px;    //위로 50px 밀렸다
    margin-left: 50px;    //좌측에 50px 공간생겨서 밀렸다
}

 

 

 

 

 

 

 

요래 해주면

.box1{
  margin: 10px auto;
}

상하로 마진 10px , 좌우로는 auto로 레이아웃의 중앙에 배치 된다

 

 

---

 

 

max와 min

 

.box{
  max-width: 속성값;
  min-height: 속성값;
  max-height: 속성값;
  min-height: 속성값;
}

 

 

말그대로 최대or 최소 너비 , 높이다 

 

max를 지정해 두면 윈도우를 늘려도 일정 px 이상 늘어나지 않는다

 

min을 지정해 두면 윈도우를 줄여도 일정 px 이상 줄어들지 않는다

 

.box1{
 
    height: 200px;

    max-width: 1000px;       //최대 너비 1000px

    background-color: red;
}

 

 

반응형 웹은 윈도우 크기에 따라 가변적이다

 

이럴 때 잘 사용된다

 

 

 

 

---

 

근데 코딩하다보면 (css가 코딩인가) 맘데로 안될 때가 있다

 

width와 height값이랑 padding값이랑 더해져서 box가 보여진다

 

패딩이 10px이고 width가 100px 이면 더해져서 110px로 보여진다 버그다 

 

box-sizing: border-box;

속성을 정해주면 박스 모델의 border기준으로 box 사이즈를 정한다 

 

padding-box도 있는데 이건 default니까 무시하자

 

 

---

 

보더

 

보더는 박스 모델과 테이블 등의 테두리를 담당한다

 

.box1{
  
    border-width: 속성값;  //두께
    border-style: 속성값;  //dashed, dotted, groove, inset, outset, ridge, solid, none
    border-color: 속성값;  //색상

    border: 두께 스타일 컬러;
}

 

style에는 눈에띄는게 solid와 dotted가 있는데 solid는 실선 dotted를 적용하게 되면 점선으로 표시된다

 

근데 브라우저에 따라 안되는게 많고 신경쓸게 많다 난 더 안 알아 볼거다

 

 

 

---

 

border-radius

 

개꿀 기능이다. 박스의 둥근 모서리를 책임진다

 

.box{
   border-radius: 속성값;   // 모든모서리 한번에 한다 
   
   border-top-left-radius: 10px;      //상단 왼쪽
   border-top-right-radius: 10%;      //상단 오른쪽
   border-bottom-left-radius: 20px;   //하단 왼쪽
   border-bottom-right-radius: 50px;  //하단 오른쪽
   
}

결과: 

IE 버전에 따라 되고 안되고 한다

 

 

---

 

box-shadow 

 

그림자 효과를 줄 수있다

 

.box{
   box-shadow: 10px 10px 2px blue; // x방향값 y방향값 블러값 색상
}

네가지 요소를 적어 줄 수 있다 

 

차례대로 x방향으로 얼만큼 y방향으로 얼만큼 연해지는 부분(blur) 얼만큼 색깔은 뭘로? 선택 해 준다

 

 

결과: 

 

 

 

---

 

 

백그라운드 이미지

 

  background-color:       //배경 색상
  background-image:       //배경 이미지 url 지정해 준다
  background-repeat:      //배경이미지 반복 여부 repeat, no-repeat, repeat-x, repeat-y
  background-attachment:  // 배경이미지 고정(fixed) or 스크롤(scroll)
  background-position:    // 배경이미지 x y 축 기준으로 top, center, bottom, left, right

 

뭔소리 일까 , 알아보자 

 

.box{
  background: url(images/sajin.jpg) repeat-y center red;
}

그림이 저장 돼있는 url을 명시 해준다

 

y축방향으로 그림을 반복한다 그림을 중앙에 위치시키고 그 외 배경색상은 red

 

 

 

 

 

background-attachment는 scroll과 fixed가 있다

 

  background-attachment: fixed;

 

스크롤 아무리 해도 그림이 안움직인다

 

 

     background-attachment: scroll;

 

스크롤 함에따라 그림 같이 따라온다

 

사진으로 잘 못 보여주는거 같다 fixed는 하여튼 고정되서 안움직인다 

 

 

 

 

---

브라우저에서 사용 가능한 기능인지 체크 해야한다

 

우리모두

 

익스플로어 사용 지양 캠페인을 열자