티스토리 뷰
어떤 CSS속성들을 배워야 할까요? 모든 속성을 다 배울 필요는 없습니다. 자주 쓰이는 것들은 알아두고 혹시 필요한 기능이 있으면 그때 그때 배워나가면 됩니다.
어떤 속성들을 자주 쓰는 지 알아볼까요?
위의 링크로 들어가면 MS에서 자주 사용하는 CSS 속성들을 조사한 그래프를 볼 수 있습니다.
일단은 여기서 나오는 상위의 속성들을 우선 알아두시면 충분합니다. 오늘의 수업도 여기에 기반해 시작하도록 하겠습니다.
font-size는 글씨의 크기를 조절하는 속성이고, text-align은 글씨를 정렬할 때 사용하는 속성입니다.
<head> <style> #one{ font-size: 16px; } #two{ font-size: 32px; text-align: center; } </style> </head> <body> <div id="one">font 16</div> <div id="two">font 32</div> </body>
위의 소스코드를 복사해서 실행해 주세요.
두 개의 <div>태그가 있고, 각각에 one과 two라는 아이디를 주었습니다. #one에는 폰트 사이즈를 16px로 했고, #two에는 32px로 2배 차이나게 주었습니다. 글자 크기는 px로만 지정할 수 있을까요? px은 고정된 크기입니다. 지금은 괜찮지만 나중에 반응형 웹을 만들 땐 글자크기를 고정시켜 버리면 화면은 크기에 맞게 작아지는데 글자크기는 계속 똑같은 형태가 될 것입니다. 그래서 만들어 진 것이 em과 rem이라는 크기 단위입니다. em과 rem에 대해서는 나중에 반응형 웹을 만들면서 더 자세히 배워보도록 하겠습니다.
font-size 속성은 글자크기를 조절하며 px, em, rem 같은 단위가 올 수 있습니다.
두 번째 <div>태그에 text-align 속성을 주어서 가운데 정렬 시켰습니다. text-align에는 left, center, right의 값이 있고 아무것도 지정하지 않았다면 기본값으로 left를 사용합니다. center가 아니라 다른 값으로 바꿔서 연습해 보세요!
text-align은 글자를 정렬시키며 left, right, center 값이 올 수 있습니다.
그리고 width와 height는 뜻 그대로 너비와 높이를 나타냅니다.
각 엘리먼트들은 경계선이나 색을 지정하지 않으면 볼 수 없지만 위와 같은 사각형의 형태를 가지고 있습니다. 그리고 width와 height 속성은 엘리먼트의 크기를 지정할 때 사용합니다. 단위는 px, em, rem을 사용하지만 반응형에서는 똑같은 크기를 유지해야 하기 때문에 %(퍼센트) 단위를 사용하기도 합니다.
기억하세요. width는 너비, height는 높이를 지정하는 속성이고 px, em, rem, %를 단위로 사용합니다.
다음 시간에는 margin과 border 그리고 padding에 대해서 배워보도록 하겠습니다.
이해가 안되시는 부분은 댓글에 남겨주세요
공감은 제작자에게 큰 힘이 됩니다. ^__^
'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글
| display 속성과 flexbox (1) | 2017.12.28 |
|---|---|
| 마진(margin) - 테두리(border) - 패딩(padding) 이란? (0) | 2017.12.27 |
| 캐스캐이딩의 개념과 css 사용하기 (0) | 2017.12.24 |
| CSS 소개와 CSS 선택자 (6) | 2017.12.18 |
| <div>태그와 <span>태그에 id와 class 속성 주기 (0) | 2017.12.14 |