사실 시작할까 말까 고민했던 포스팅, 속성/속성값이 너무나 다양하고 외워서 사용하는 것이 아니기 때문에 그랬으나, 자주 사용하는 것은 외워/익혀두면 좋고 소수의 검색자 분들과 CSS속성에 대한 재정리를 위해 이어나갑니다.
텍스트나 폼, 배치마다 수 많은 속성들과 속성 값들이 있기에 제가 공부하면서 주로 사용하고 알고 넘어가야 할 것 같다는 속성/속성값들만 몇 가지 추려서 정리하겠습니다.
시작하기전에 공부하며 주로 사용하게 되는 속성 위주로 정리하므로 실제로 중요한 속성이 등장하지 못 할 수도 있고 잘 안쓰이는 속성이 등장할 수도 있습니다.
그렇기에 자세한 것은
www.w3schools.com/cssref/default.asp
CSS Reference
grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
www.w3schools.com
CSS Properties 탭에 주르륵 나와있으니 여기 소개된 속성들 이외에도 참고할 속성은 위 사이트에서 찾아보는 것도 추천드립니다.
color : <색상>;
color 속성은 글자의 색을 지정합니다.
색상은 16진수표기, rgb표기, 이름표기, hsl표기를 허용합니다.
색상 표기에 대한 것은 아래 링크에서 확인해 주시고 여기서는 넘어가겠습니다.
[HTML/CSS] 색상 표기
이번 포스트에서는 짤막하게 쉬어가는 코너겸 앞으로 주구장창 나오게될 색상 표기에 대해 다루겠습니다. 여태까지 예제를 들면서 background-color, bgcolor, color...등등 수많은 색상 효과를 썼습니다
bamtory29.tistory.com
text-decoration : 속성 값;
text-decoration속성은 글자에 줄 긋기 효과를 더해줍니다.
| 속성값 | 효과 |
| none | 효과 없음 |
| overline | 글자 위에 줄을 그음 |
| underline | 밑줄 표시 |
| line-through | 취소선 표시 |
text-shadow: [가로 거리 길이] [세로 거리 길이] [번짐도] [색상]
text-shadow는 텍스트에 그림자를 더해줍니다.
각 값에 대한 설명은 아래와 같습니다.
| 속성 값 | 효과 |
| 가로 거리 길이 | 텍스트와 그림자의 가로 거리를 지정합니다. 양수값은 오른쪽 방향, 음수값은 왼쪽 방향의 거리를 지정합니다. |
| 세로 거리 길이 | 텍스트와 그림자의 세로 거리를 지정합니다. 양수값은 아래쪽 방향, 음수값은 위쪽 방향의 거리를 지정합니다. |
| 번짐도 | 그림자의 번짐 정도를 지정합니다. 양수값은 퍼짐, 음수값은 축소정도를 지정합니다. |
| 색상 | 그림자의 색상 지정 |
또한 text-shadow: 속성값들, 속성값들; 같은 형식을 통해 하나의 텍스트에 그림자 여러개를 겹치게 할 수도 있습니다.
font-family: 글꼴명 (, 글꼴명, 글꼴명....);
font-family속성은 텍스트의 글꼴을 지정합니다.
글꼴을 여러가지로 표시하는 이유는 사용환경에 따라서 글꼴이 설치되어 있을 수도있고, 없을 수도 있기 때문입니다.
만약 첫번째 지정 글꼴이 설치되어있지 않으면 두 번째 글꼴을, 두 번째 글꼴도 없다면 세 번째 글꼴을 적용하게 됩니다.
"지렁이글씨"라는 폰트는 설치되어있지 않으므로 두번째 font-family값인 맑은 고딕이 적용됨을 보여줍니다.
이런식으로 다양한 실행환경을 위해 글꼴을 여러개를 지정하거나, 웹 폰트를 사용하는것이 좋습니다.
"웹 폰트"라는 단어가 생소하실 텐데요. 이 개념은 바로 다음포스트에서 정리하고 넘어갈테니 지금은 그런게 있구나 정도만 알아두시고 넘어가시면 됩니다.
font-size: 속성값(=크기);
font-size는 글자의 크기를 조정하는 속성입니다.
아래 표에 사용되는 속성값의 표기를 정리했습니다. 네가지중 [크기]표기법을 주로 사용합니다.
| 속성 값 | 효과 |
| 절대 크기 | 브라우저에서 지정되는 크기 값 xx-small, x-small, small, large, x-large, xx-large가 사용됩니다. |
| 상대 크기 | 부모 요소에 따른 상대적인 글씨 크기 지정 smaller, larger 두 가지가 사용됩니다. |
| 크기 | 단위와 값을 이용해 크기를 직접 지정 em, ex, px, pt가 사용됩니다. |
| 백분율 | 부모 요소에 따른 %단위 글씨 크기 지정 ex) 30%, 200% 등 |
크기 표기법이 주로 사용된다고 크기에는 4가지 단위가 있음을 알 수 있습니다. 간략히 살펴보면,
em: 현재 사용되고 있는 글꼴의 대문자 M의 너비를 기준으로 잡아 크기를 조정합니다.
ex: 현재 사용되고 있는 글꼴의 소문자 x의 높이를 기준으로 잡아 크기를 조정합니다.
px: 픽셀 단위. 모니터의 해상도에 따라서 크기가 달라질 수도 있습니다.
pt: 포인트 단위. 워드/한글 등 문서에서 사용되는 포인트 단위의 글자 크기로 조정합니다.
다 같은 10으로 지정해줬지만 단위에 따라 글자 사이즈에 차이를 보입니다.
px는 해상도에 따라 달라지는 픽셀값이므로 사용환경에 따라 크기차이가 나게 됩니다.
그래서 어떤 단위를 주로 사용하냐면 웹만을 고려했을 때는 px단위를 주로 사용했었는데 모바일 환경으로 웹사이트에 빈번하게 접속하는 요즘에는 em단위를 주로 사용하므로 em단위 사용이 권장됩니다.
font-style: 속성 값
font-style속성은 글자의 형태를 지정하는데요, 글자의 형태란 일반적인 정자체, 기울임꼴(이탤릭체)를 말합니다.
| 속성값 | 효과 |
| normal | 일반 글자의 형태 |
| italic | 이탤릭체로 표시 |
| oblique | 이탤릭체로 표시 |
| inherit | 부모요소의 값으로부터 상속 |
italic과 oblique는 둘 다 똑같은 이택릭체 표기입니다. 두 가지 값의 차이점은 무엇일까요.
italic은 기울임 글꼴이 따로 존재하여 그 글꼴을 표시해주지만, oblique는 현재 글꼴에서 기울이기만 하는 역할을 합니다. 대부분의 글꼴이 italic과 oblique가 똑같습니다. 사용할 때는 주로 italic값을 사용한다고 합니다.
font-weight: 속성값
font-weight는 글자의 굵기를 지정하는 속성입니다.
| 속성값 | 효과 |
| normal | 일반적인 굵기 (기본값) |
| bold | 굵게 표시 |
| bolder / lighter | 부모요소보다 굵게/가늘게 표시 |
| 100~900 | normal값 400을 기준으로 900으로 갈수록 굵게 100으로 갈수록 가늘게 수치를 조정하여 표시 |
제일 우선적으로 사용되는 텍스트, 폰트별 속성과 값들을 알아봤습니다. 다음 포스트에서 웹 폰트를 짧게 다루고 텍스트 속성을 몇가지 더 다루겠습니다.
'Programming > HTML, CSS' 카테고리의 다른 글
| [CSS] 텍스트 스타일 속성 2 (0) | 2021.01.21 |
|---|---|
| [CSS] 웹 폰트 (0) | 2021.01.19 |
| [CSS] 가상 클래스, 가상 요소 (0) | 2020.09.28 |
| [HTML/CSS] 색상 표기 (0) | 2020.09.27 |
| [CSS] 셀렉터 3 - 속성 셀렉터 (0) | 2020.09.27 |
댓글