5/6 생활코딩

오늘의 진도:

 WEB2 - CSS

  박스모델

 

1. CSS box model 소개

박스모델: HTML 태그 하나하나를 일종의 네모난 박스로 취급해서

 그것의 부피감을 결정하는 것

 즉, 디자인에서 핵심적인 요소

 

h1 태그는 자동 줄바꿈이 되지만
a 태그는 그렇지 않다.
그것이 더 편하기 때문.

각각의 태그가 차지하고 있는 공간이 얼마인지 알 수 있게 선을 그려보자.
h1{
 border-width:5px;
 border-color: red;
 border-style: solid;
   }
a{
 border-width:5px;
 border-color: red;
 border-style: solid;
   }

※ 주석 만들기 /* (내용) */

h1은 화면 전체를 사용하고
 - 이런 태그를 block level element라고 한다.
    (element=tag)
a는 자기 크기만큼만을 사용한다.
 - 이런 태그를 inline element라고 한다.

이것을 display 속성으로 바꿀 수 있다.
 display: inline or display: block
즉 block level element와 inline element는
display 속성의 기본값일 뿐,
그 기본값은 CSS를 통해서 언제든지 바꿀 수 있다.

※ display:none을 하면 화면에서 안보인다.

선택자는 콤마를 사용해서 여러개 가능
border 뒤에는 콤마 없음!!

    h1, a{
      border: 5px red solid
    }

    h1, a{
      border: 5px red solid;
      padding:20px;
      margin:20px;
      display:block;
      width: 100px
     }

 

웹페이지에서 오른쪽 클릭 - 검사

 특정 태그를 선택하고 오른쪽의 styles를 보면

 이 태그가 어떤 CSS 스타일의 영향을 받고 있는가를

 일목요연하게 보여주는 굉장히 중요한 기능이다.

 

 특히 CSS와 HTML이 복잡해졌을 때
 어떤 하나의 태그가 어떤 CSS의 영향을 받는지 찾기가 굉장히 곤란해질 것이다.

 

 또한 밑에 보면 margin, border, padding 값도 나온다.

 각 부분에 마우스를 갖다 대면

 웹페이지에 해당 부분 색깔이 바뀐다.

 

2. 박스 모델을 써먹기

 1) 가로로 줄 쫙 그으려면?

 h1 태그에게 테두리를 주면 된다.

   h1{
     border: 1px solid gray
   }

우리가 필요한 것은 아래쪽의 테두리 뿐

   h1{
     border-bottom: 1px solid gray
   }

 

위는 넓고 아래는 좁다.

padding 값을 조절하고 해야겠지만,

가장 먼저 해야할 것은 문제에 가까이 가는 것이다.

 

검사 버튼을 눌러서 개발자 도구를 켠다.

h1 태그를 선택했을 때 색상을 본다.

살구색은 누구 때문? margin 때문

   margin:0;

을 추가한다. 그러면 margin이 없어진다.

→ 위쪽이 너무 넓은 것이 해결됐다.

 

 

그렇게 했더니 테두리가 너무 달라붙어있다.

테두리와 적당히 떨어뜨리기 위해서 

     padding:20px;  

를 추가한다.

 

 

 2) 세로로 줄을 쫙 그으려면?

ol 태그 오른쪽에 줄을 그으면 될 것이다.

그런데 이렇게 하면 화면 제일 오른쪽에 줄이 그어진다.

   ol{
     border-right:1px solid gray;
   }

∵ ol 태그는 화면 전체를 쓰는

 block level element이기 때문

 

     width:150px;
를 추가해주면 화면 가운데로 온다.

그럼 마우스 포인터가 있는 곳의 여백

그리고 WEB 밑의 가로줄 양옆의 여백은 왜 생기는지 살펴보자.

검사(개발자 도구)로 들어가면

 

① 마우스 포인터 쪽의 여백은 margin값 때문임을 알 수 있다.

     margin:0;

을 추가하면 여백이 없어진다.

이번에는 1. HTML이 너무 위에 붙어있다.

이번에는 padding을 추가해준다.

     padding: 20px;

② WEB 밑의 가로줄 양옆의 여백을 개발자 도구로 보면

body 태그가 margin값이 있기(존재하기) 때문에 생긴 것을 알 수 있다.

  body{
    margin:0;
  }