[CSS] CSS의 핵심 2편 - 속성(Attribute)값 알아보기

이 글은 연재물입니다.

2013/11/21 - [Web/Programming/Design] - [CSS] 웹디자인, 페이지 구성, CSS 처음 배워도 할 수 있다. CSS의 핵심 1편

CSS는 다룰 수 있게 되는 순간 웹 개발의 강력한 툴이다.

  CSS는 저번 편에서도 이야기 했었지만, 페이지를 일괄적으로 처리하는 것에 엄청난 도움을 준다. 저번 시간에는 Selector까지 이야기를 해 보았는데, 이번에는 중요한 Attribute(속성)을 알아보도록 하자. 내가 개발자의 입장에 있기 때문에 중요하다고 생각되는 부분들을 다룰 것이고 여러가지 깊게는 다루지 않을 것이다. 어디까지나 빠르게 CSS를 훑고 싶은 분들에게 권하는 글이다.

1. Margin, Padding

  Margin과 Padding.. 무슨 의미일까? 둘 다 여백이다. 실제로 다음과 같이 사용한다.

	
#ttCanvas h3.title {
	padding-top: 3px;
	padding-left: 10px;
	margin-bottom: 5px;
	margin-top: 5px;
} 
	

위의 예제에서 볼 수 있는 것처럼, padding과 margin은 동시에 사용할 수 있으며 -top, -bottom과 같은 인자들을 붙여서 사용할 수 있다. 그런데 둘 다 여백이라면, 차이점은 무엇일까? 크롬 개발자도구(F12)를 사용하면 그 차이점을 적나라하게 알 수 있다.

제일 안쪽에 요소 자체의 크기(Element Size)가 들어가고, 그 바깥에 테두리(Border)가 있다. 그 테두리와 요소 사이에 있는 여백이 Padding이고, 테두리 바깥으로 형성되는 여백이 Margin이 된다. 그렇다면, Border가 없는 상황에서는 둘 다 그냥 여백역할을 할 수도 있다는 것이다. 또한 HTML의 Mark-up 특성상 트리구조이기 때문에 부모의 Padding은 자식의 Margin이 된다. 같은 부분에 들어가는 여백을 정의할 때 부모의 요소를 기준으로 하면 Padding이 되고 자식을 기준으로 하면 Margin이 된다는 것이다. 신기하지 않은가?

또한 Margin을 px로 정확한 수치를 지정하지 않고 auto와 같은 속성값도 사용할 수 있는데, 이렇게 되면 브라우저가 요소를 중앙에 배치하는 효과가 있다.

2. font-size와 font-weight

  

#ttCanvas h3.title {
	font-size: 20px;
	font-weight: bold;
} 
	

font-size는 보자마자 감이 올 것이다. 글꼴의 크기를 나타낸다. 흥미로운 점은 em단위가 사용가능하다는 것인데, 예를들어 2em으로 설정하면 기준이 되는 폰트크기에서 2배가 적용된다. font-weight은 굵기를 조절하는 옵션인데 사실상 bold와 normal 두 종류 밖에는 사용이 힘들다고 보면 된다. 많이 사용하는 속성이니 꼭 알아두도록 하자.

3. text-align 속성

	
.tt-wrap-post-thumb{
  text-align: center;
} 
	

요소를 중앙으로 보내고 싶을 때에는 margin의 좌우 값을 auto로 두는 방법도 있겠지만, 간단하게 하려면 text-align을 center로 조정하면 더 쉽다. 또한 오른쪽으로 정렬하려면 응용판으로 right을 쓰면 될 것이다. 속성값 자체는 text라는 글자가 들어가 있는데, image에도 적용된다. 응용하면 좋을 것이다.

4. float 속성

	
#sidebar .prev-month {
	float: left;
} 
	

사실 권하고 싶지는 않은 속성값이다. 하지만 필요하니까.. CSS를 통해 배치되는 Tag들은 일정한 순서대로 배치되는데(위->아래), float 속성을 사용하면 그 규칙이 깨진다. float:left를 적용하는 순간, 요소는 말 그대로 떠있는 상태가 되며, Parent의 가장 좌측에 붙게 된다. 또 다른 float:left 속성이 오는 개체들은 계속해서 왼쪽으로 붙게 된다. 이 흐름을 종료시키려면, clear:left 속성을 사용해야한다. float 속성은 요소 배치상 어쩔 수 없을 때 사용해야한다. 나는 bootstrap을 사용하고 있는데 이것을 사용하면 굳이 float 속성을 쓸 일이 잘 없는 것 같다. 애초에 grid를 사용하니까..

다음 CSS 시간에는 bootstrap과의 연동을 한번 살펴보도록 하자. 사실 CSS를 이정도만 배워가지고 웹사이트를 제작하기는 무리지만, bootstrap을 연동하는 순간 이 얕은 정도의 CSS지식 가지고도 무궁무진한 일을 할 수 있다.