속성 - 크기, 여백, 색상

<크기>

 

1. width(가로너비)

요소의 가로 너비를 지정한다. 단위는 px을 사용한다.

 

 

2. height(세로너비)

요소의 세로 너비를 지정한다. 단위는 px을 사용한다.

 

 

3. font-size(글자크기)

요소 내용(Text)의 글자 크기를 지정한다. 만약에 글자 크기를 지정하지 않았다면, 대부분 기본값이 16px로 되어있다.

.box{
    width : 300px;
    height : 200px;
    background : red;
    font-size : 30px;
}

 

<여백>

 

1. margin(요소의 바깥 여백)

요소의 바깐 여백을 지정한다. 바깥 여백은 요소와 요소 사이의 여백(거리, 공간)을 생성할 때 사용한다.

div{
  margin : 10px;
}

위 코드는 margin은 요소의 위, 아래, 좌, 우 모두 10px의 여백을 지정하겠다는 의미이다. 세분화 하기 위해서 아래와 같이 한 방향씩 지정할 수도 있다. 

위의 코드와 아래 코드는 같은 의미이다.

div{
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
}

top, left, bottom, right은 "개별 속성"이라고 하며, margin은 "단축 속성"이라고 부른다.

 

 

 

 

2. padding(요소의 내부 여백)

요소의 내부 여백을 지정한다. 내부 여백은 자식 요소를 감싸는 여백을 의미한다.

margin과 마찬가지로 한꺼번에 지정및 한방향씩 지정할 수 있다. 또한 개별속성만 이용해서 사용가능하기도 하다.

패딩을 사용하게 된다면 내부 여백이 생기기 때문에 magin과 다르게 크기도 더 커진다.

div{
  padding : 10px;
}

 

div{
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
}

cf. 팁을 주자면 한번에 클래스 이름 2개를 줄 수 있다

<div class = box box1>안녕하시오</div>

이렇게 주게 된다면 div태그는 box와 box1이라는 클래스 이름을 2개를 가지고 있게 되는것이다.

 

 

<색상>

 

1. color(글자 색상)

요소 내용(Text)의 글자 색상을 지정한다. 정말 많은 입문자가 font-color, text-color로 실수를 한다. 그런 속성은 없다.

div{
  color : red;
}

 

 

2. background(요소 색상)

요소의 배경색상을 지정헌다. color는 글자의 색만 지정할 수 있으며, 요소의 (배경)색을 바꾸려면 background-color가 필요하다.

.box1{
    width : 100px;
    height : 100px;
    background-color: red;
    font-size: 16px;
}

.box2{
    width: 100px;
    height:100px;
    background-color: blue;
    color : white;
    font-size: 16px;
}