CSS 속성
공간
제일 먼저 html태그와 body태그의 기본적인 공간부터 margin, width, hieght, padding, border속성에 대해 알아보자
왜 html태그와 body태그의 기본적인 공간을 알아야 하느냐
html태그는 전체의 공간을 차지하고 있다.
body태그는 그 중 내용이 담길 공간을 차지하고 있는데 html과 body 사이에 조금의 margin값이 반영되어있다.
그렇다면 margin값은 무엇인가?
margin
'바깥 쪽 여백'을 의미하는 margin값은 숫자 뒤에 단위를 넣어 사용할 수 있다.
단위는 (px, %, em 등 크기 단위를 말한다.)
공간이 있다면 방향도 존재한다.
margin값은 top, right, bottom, left의 방향 값을 가진다.
top부터 시계방향순으로 한꺼번에 적을 수 있다.
/*예시*/
div {
/*각각*/
margin-top:50px;
margin-right:0;
margin-bottom:0;
margin-left:50px;
/*한꺼번에*/
margin:50px 0 0 50px;
}
margin은 기본 여백을 설정하는 속성이라면 태그들의 기본 공간을 설정하는 속성은?
바로 width(와이드: 넓이)와 height(하이트: 높이)이다.
width, height
margin과 마찬가지로 숫자 뒤에 단위를 사용하여 나타낼 수 있다.
width는 가로의 길이
height는 세로의 길이
이미 방향이 정해져 있으므로 둘은 따로 방향값을 가지지는 않는다.
/*예시*/
div{
width:50px;
height:50px;
}
이렇게 공간을 설정하고 마음이 바뀌면 width와 height를 계속해서 바꿔줘야 할까?
만약 그렇지 못한 상황이 있을 수 있다.
그렇다면 공간을 추가할 수 있는 속성은 무엇일까?
바로 padding속성이다.
padding
'안 쪽 여백'을 의미하는 padding도 마찬가지로 숫자 뒤에 단위를 사용하여 나타낸다.
어느 방향으로 공간을 추가할지 정해야 하기 때문에 방향 값이 필요하다.
padding값도 top, right, bottom, left의 방향 값을 가진다.
top부터 시계방향 순으로 한꺼번에 적을 수 있다.
/*예시*/
div {
/*각각*/
padding-top:50px;
padding-right:0;
padding-bottom:0;
padding-left:50px;
/*한꺼번에*/
padding:50px 0 0 50px;
}
width와 height, padding으로 이루어진 공간들을 구분하기 위한 속성
바로 border이다.
border
'테두리'속성인 border값도 마찬가지로 숫자 뒤에 단위를 사용한다.
공간 관련 속성에 테두리를 왜 뜬금없이 넣었는지 궁금할 수 있다.
이 테두리의 px값도 공간을 차지하기 때문이다!!(ㄷㄷㄷㅈ)
border도 어느 쪽에 테두리를 넣을지 선택하기 위해 방향 값을 가진다.
margin이나 padding처럼 방향 모두를 한꺼번에 쓸 수 없다.
하지만 border는 기본적으로 테두리의 굵기, 형태, 색 순으로 써준다.(이렇게 써주면 사각형으로 테두리가 나타난다.)
/*예시*/
div{
/*기본 공간 설정을 해 주지 않으면 태그가 가진 공간으로 테두리를 형성*/
width: 40px;
height: 50px;
border: 10px solid #000;/*굵기 형태 색*/
}
확인
각각의 값들은 페이지에서 마우스 우클릭 후 검사를 클릭하면 이렇게 나타난다.(크롬 기준)
제일 안 쪽의 파란색 부분이 각각 width와 height부분이다.
적혀 있듯이 다음 바깥의 초록 부분은 padding, 구분해주는 border(테두리), 주황색인 margin속성이다.
position은 다음 장인 위치에서 다루도록 하겠다.
※여기서 꿀팁
margin과 padding 둘 다 여백이라서 헷갈릴 여지가 있다.
하지만 직접 써보면 알 수 있듯, margin은 width, height의 바깥쪽 부분을 padding은 안쪽 부분에 관여한다.
공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요)
그럼~ 앙 제바
'IT아카데미 > CSS' 카테고리의 다른 글
| 홈페이지 만들기 - CSS[6] (0) | 2020.05.13 |
|---|---|
| 홈페이지 만들기 - CSS[5] (0) | 2020.05.12 |
| 홈페이지 만들기 - CSS[3] (0) | 2020.05.09 |
| 홈페이지 만들기 - CSS[2] (0) | 2020.05.07 |
| 홈페이지 만들기 - CSS[1] (0) | 2020.05.06 |
