CSS 기본 : CSS 구조 (폰트, 폰트크기, 폰트가중치, 텍스트정렬, 색지정, 명암조절, !important)

이제는 어느정도 CSS의 기본 개념이 잡혔을 거라고 생각됩니다. 기본 개념하에 CSS구조(폰트, 폰트크기, 폰트가중치, 텍스트정렬, 색지정, 명암조절, !important)에 대해 확인하고 가겠습니다. 

 

---

 

▒ CSS 구조

 

예를 들어 HTML 내 작성되어 있는 <h1> 태그글 스타일링 하기 위해서 다음과 같이 CSS 문번으로 작성했다고 가정해 보죠.

 

 

상기 예에서 h1은 선택하여 지정한 요소입니다.

또한 color: blue ; 는 CSS를 선언했다라고 하는데 CSS의 선언은 속성 (color) 과 속성값 (blue)으로 구분이 되며 둘 사이에는 콜론(:)으로 연결을 합니다. 그리고 CSS 선언의 마지막은 세미콜론(;)으로 맺음을 하는 원리가 바로 CSS의 구조입니다. 

 

---

 

▒ 폰트 (Font Family)

 

글꼴의 서체를 변경하기 위해서 속성이름으로 font-family를 다움과 같이 사용할 수 있습니다. 

 

글꼴을 지정하기 위하여 유의할 점은 다음과 같습니다. 

 

▶ 사용자의 컴퓨터에 사용하고자 하는 글꼴이 설치되어 있어야 바로 표시될 수 있습니다. 

▶ 모든 HTML 요소의 기본글꼴은 Times New Roman 입니다. 

▶ 페이지가 원활히 로딩되기 위해서는 웹페이지에 사용되는 글꼴의 수는 2개 또는 3개로 제한하는것이 좋습니다. 

▶ 글씨체 이름이 두개이상의 단어로 되어 있는 경우 다음과 같이 큰따옴표로 묶어줍니다.

 

---

 

▒ 폰트크기 (Font Size)

 

글꼴의 크기 조정으로 브라우저에 다양하게 나타낼 수 있습니다. 다음 예에서는 글꼴크기의 속성은 font-size 입니다. 

 

 

위의 예에서 <p>태그의 모든 글씨크기는 18px (픽셀)로 선언한 경우입니다. 

 

 

☞ 단위별 폰트크기 

 

참고로 HTML 기본시간에 말씀 드렸는데 브라우저별로 크기를 나타내는 단위가 다른데 다음 3개정도는 다시한번 이해하고 가도록 할게요

 

H1	24pt	2em	32px
H2	18pt	1.5em	24px
H3	13.55pt	1.17em	18px

 

---

 

▒ 폰트 가중치 (Font Weight)

 

글꼴인 폰트 강조를 위해 굵게 또는 얇게 표현할 수 있습니다. 속성은 font-weight 입니다. 다음 예는 문장 Paragraph로 지정된 모든 글을 두껍게 강조표시하는 예입니다. 

 

 

 

---

 

▒ 텍스트 정렬 (Text Align)

 

다음은 텍스트 정렬하는 방법입니다. 속성으로는 tex-align을 시용합니다. 속성값으로는 왼쪽, 오른쪽, 중앙정렬을 영어로 표시해 주면 됩니다. 다음 예는 오른쪽 정렬의 예입니다. 

 

 

---

 

▒ 색지정 (Color)

 

색을 지정하는 방식은 두가지로 나뉩니다. 우리가 보통 웹페이지의 배경색이 흰색이라서 무심코 넘어가는 경우가 있는데 다음처럼 개념을 확실히 해 놓고 가면 편합니다. 

 

하나의 배경위에 글씨가 써 있다고 가정할 때, 배경색을 파란색으로 하고 글씨색을 빨간색으로 지정해봅시다. 

배경색의 속성은 backround-color이며 글씨색의 속성은 그냥 color로 사용하면 됩니다. 

 

 

 

---

 

▒ 명암 조절 (Opacity)

 

속성이름 opacity를 사용하면 요소의 불투명도를 조절할 수 있습니다. 속성값으로 1을 사용하면 완전 불투명이며 0을 사용하면 완전 투명이 됩니다. 다음 예처럼 사용할 수 있습니다. 

 

 

 

---

 

▒ !important

 

!important 구문을 사용하면 어떤 스타일보다 우선하게 됩니다. !important를 사용하게 되면 해당 요소의 절대적 명령이 되기때문에 향후 재정의 하는 것이 어렵습니다. 

 

다음 예는 모든 main이라는 클래스명이 <p>태그의 색이 빨간색으로 지정을 했어도 !important에서 <p>태그를 파란색으로 지정을 했기때문에 모든 <p>태그는 파란색으로 표시됩니다. 

 

 

 

---

 

지금까지 CSS가 가지고 있는 기본구조에 대해 보았습니다. 이 구조를 이해하시고 다음시간부터는 본격적으로 박스(Box)에 대한 개념을 다뤄보도록 하겠습니다.