CSS 문법을 최근에 열심히 배우고 있습니다. 오늘 배운 내용도 잊어버리기 전에 얼른 기록해놓고 반복해보아야겠습니다. 기록은 기억의 어머니이까요!
CSS는 html로 제작한 웹페이지를 화려하게 꾸며줄 수 있는 언어입니다. 화려하게 꾸미기 위해서는 style시트에 많은 줄의 코딩을 해주어야 하는데요. 몇 줄 안되는 코딩이라면 쉽게 수정할 수 있겠지만, 줄수가 늘어나면 늘어날 수록 작업하고 수정하는 것이 쉽지 않게 될 것입니다.
특히, font-size나 width와 같이 폰트크기나 문단 너비, 높이 등을 지정할 때는 줄 수가 많을 수록 헷갈릴 수 있습니다.
그래서 특히나 처음 CSS 스타일을 짤 때 단위부터 확실하게 체계를 잡아놓고 시작해야겠네요.
CSS에서 사용되는 단위에는 px, %, em, rem 단위가 있습니다.
이 단위들은 모두 상대값으로 나타나지는 단위입니다.(모니터 해상도에 따라 같은 수치라도 다르게 보임)
가령, 아래의 간단한 html, css코드를 살펴보면,
<html>
<head>
<style>
h1{
font-size:20px
}
h2{
font-size:18px
}
p {
font-size:16px
width:400px;
}
</style>
</head>
<body>
<h1>CSS의 단위 알아보기</h1>
<h2>px, %, em, rem</h2>
<p>html을 화려하게 꾸며주는 CSS의 단위를 알아봅시다.</p>
</body>
</html>px
px은 우리가 알고 있는 픽셀값입니다. 우리가 해상도를 지정할 때 1920x1080 로 지정한다면, width(너비)는 1920px이고, height(높이)는 1080px이라는 것입니다. 위의 예시에서 p태그 속성값에 400px을 주었다면 p태그로 묶인 문장들은 너비가 400px로 고정됩니다. 창이 400px보다 줄어들면 스크롤이 생기게 됩니다. font-size의 기본값은 16px입니다. 즉, 아무런 지정을 하지 않는다면 font-size는 16px이 기본값입니다.
%
%는 사용자가 보이는 화면에서 차지하는 비중입니다. 가령 위의 예시에서 p의 속성값이 400px가 아닌 70%라면 창이 줄어들든 늘어나든 사용자 입장에서 보이는 화면의 70%만 <p>태그가 사용하게 됩니다. 즉, 부모가 만들어준 공간안에서의 너비 비율로 볼 수 있습니다. 가령, 위 예시에서 p의 속성값이 70%라면, p의 부모는 body이므로, body(부모)가 만들어준 공간 안에서의 70%로 볼 수 있습니다. body자체에 margin값(여백)이 살짝 존재하므로 화면에 살짝 여백이 존재합니다. margin=0을 주어서 없앨 수도 있습니다.
em
em단위는 em단위가 있는 곳의 폰트사이즈의 배수입니다. 가령 위의 예시에서 h1의 폰트 속성값이 1.5em, h2의 폰트 속성값이 1.2em, p의 폰트 속성값이 1em이라면, h1의 폰트사이즈는 1.5*16px=24px이고, h2의 폰트사이즈는 1.2*16px=19.2px이며, p의 폰트사이즈는 16px이 되는 것입니다. p의 width가 가령 20em이라면, 20*16px=320px이 됩니다. em은 기준이 되는 값만 수정을 하면 나머지는 비율대로 조정을 해줄 수 있기 때문에 가장 유용한 단위라고 생각합니다. 앞으로 저도 작업을 할 때, 가급적 em단위를 쓰는 습관을 기르려고 합니다.
rem
rem단위는 문서의 기본값의 배수입니다. em과 비슷하지만 em단위는 em단위가 쓰여진 곳(부모 태그)의 기준값에 따라 달라지지만, rem단위는 문서 전체의 기본값의 배수이므로, 문서 전체의 기준값에 따라 달라집니다. 만약, 문서 전체의 기준값을 바꿔야 한다면, style에 :root{font-size:16px} 의 코드를 달아주시면 됩니다. root는 뿌리, 근간이기 때문에 저런 표현을 쓰나봅니다. rem의 r도 root의 약자입니다. 사이트 전체적으로 font-size를 조정해야 한다면 root의 속성값을 변경해주면 됩니다.
*** 또 다른 사항 기록 ***
background-color : 배경 색상
color : 폰트 색상
font-size : 폰트 사이즈
<p>태그 : block요소
<span>태그 : inline요소
px과 em단위를 상호 변환하여 계산해주는 사이트 : http://pxtoem.com
코드 연습 사이트 : http://codepen.io
html의 주석처리는 아래와 같은 표시로 하면 됩니다.
<!-- 주석 처리 내용 -->
css의 주석처리는 아래와 같은 표시로 하면 됩니다.
/* 주석 처리 내용*/
'Etc2' 카테고리의 다른 글
| [CSS] 선택자(Selector) 우선순위 (0) | 2020.02.24 |
|---|---|
| [CSS] 선택자(Selector) - 의사요소선택자, 구조선택자, 부정선택자 (0) | 2020.02.24 |
| [CSS] 선택자(Selector) - 속성선택자, 가상선택자 (0) | 2020.02.23 |
| [CSS] 선택자(Selector) - 자손, 자식, 인접형제선택자 / 그룹화 (0) | 2020.02.23 |
| [CSS] 선택자(Selector) - 태그, 전체, class, id선택자 (0) | 2020.02.23 |
| [CSS] 단위 - vm, vh, vmin, vmax (0) | 2020.02.23 |
| 티스토리 마우스 드래그 금지, 마우스 우클릭 금지 소스 (4) | 2019.10.12 |
| 마우스 드래그 색상 변경. 마우스 드래그한 부분 색상 바꾸는 방법 (0) | 2019.09.29 |