[CSS] CSS 정리 (1)
HTML (Hyper Text Markup Language)는 웹 사이트의 내용을 담당하고, CSS (Cascading Style Sheets)는 웹 사이트의 디자인을 담당한다. CSS는 웹 문서의 스타일이다. (Cascading : 위에서 아래의. 계단식의 정도로 해석하면 된다.)
웹 페이지를 항상 컴퓨터에서만 열람할 수는 없다. 모바일, 태블릿 등 여러 가지 환경에서 웹 페이지를 열어볼 수 있는데 여기서 HTML만을 사용해서 웹 페이지를 구성하게 되면 다양한 환경에 대한 화면을 따로따로 만들어야 하지만, CSS를 도입하면 하나의 웹 페이지의 뼈대에 CSS만 다르게 적용하는 것으로 효율적으로 다양한 환경의 화면을 구상할 수 있다.
(이를 반응형 웹 디자인 이라고 한다)
위를 통해 알 수 있듯 CSS는 매우 매우 중요한 역할을 한다. -_-
CSS의 다양한 속성을 알아보고 각 속성마다 어떤 값을 사용하는지 알아보자.
지금까지는 CSS없이 웹 페이지를 만들었다고 생각할 수 있지만, h1태그를 붙이면 큰 글씨가 되고 p태그를 붙이면 작은 글씨가 되는 등의 효과를 얻기 위해 브라우저 기본 스타일을 사용하고 있었다.
스타일 시트는 브라우저 기본 스타일과 사용자 스타일로 나뉜다.
브라우저 기본 스타일은 위에서 언급한 바와 같고 사용자 스타일은 또 세 가지로 나뉜다.
1. 인라인 스타일
간단한 스타일 정보는 스타일 시트를 사용하지 않고 바로 적용시킬 수 있다.
HTML 소스코드에 바로 style 속성과 속성값을 추가해 스타일을 설정할 수 있다.
2. 내부 스타일 시트
스타일을 여러 곳에 적용할 때는 내부 스타일 시트를 사용한다.
웹 문서를 화면에 표시하기 전에 스타일 정보가 결정되어야 하니 내부 스타일 시트는 <head> 태그 안에서 정의된다.
h1태그를 오버라이딩해서 적용시켰다.
이 때 여러 태그가 같은 속성을 가지고 있으면 , 로 구분해서 한 번에 작성할 수 있다.
3. 외부 스타일 시트
스타일을 별도의 파일로 따로 저장해 두고 필요할 때 import 해서 사용하는 방식이다.
따로 저장한 스타일 정보를 외부 스타일 시트라고 하고 .css 확장자를 사용한다.
<link rel="stylesheet" href="css/style.css">
외부 스타일 시트를 가져올 때는 위와 같이 link 태그를 사용한다.
스타일 시트를 사용할 때는 어떤 요소에 스타일을 적용할 지 결정해 줘야 하고 이 역할을 선택자가 해 준다.
스타일 태그명을 직접 지정해 줄 수도 있고,
* 을 사용해 모든 요소에 스타일을 적용하게 작성할 수도 있다.
여기서 사용하는 태그명을 타입 선택자라고 부른다.
스타일을 지정할 때 클래스로 묶어서 클래스 단위로 스타일을 지정해 줄 수도 있다.
클래스를 지정할 때는 < .클래스명 > 으로 지정한다.
지정한 클래스를 본문에 적용시킬 때는 class속성을 사용하고, 두 개 이상의 클래스를 적용시킬 때는 공백으로 구분해서 적용시킬 수 있다.
클래스와 비슷하지만 일회성으로 사용할 수 있는 스타일로 ID가 있다.
아이디를 지정할 때는 < #아이디명 > 으로 지정하고, 한 번만 사용할 수 있다는 점과 class속성 대신 id속성을 사용하는 부분 외에는 클래스와 같다.
그런데, 많은 양의 스타일을 다루고 태그를 다루다 보면 본문에 적용할 때 겹치는 상황이 분명 발생할 텐데.. 이럴 때는 어떻게 처리할까?
CSS에서 C는 Cascading의 약자로 계단식이라는 의미를 지닌다.
즉, 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정된다.
스타일 간의 우선순위에 대해 살펴보자.
1. 사용자 스타일 (컴퓨터의 사용자. 본인이라고 생각하자)
2. 제작자 스타일 (웹 문서의 제작자)
3. 브라우저 기본 스타일
순으로 우선 순위를 매길 수 있다.
만약 중요도가 같은 스타일이라면 적용 범위에 따라 우선순위를 다시 매긴다.
1. !important
2. 인라인 스타일
3. id 스타일
4. 클래스 스타일
5. 타입 스타일
적용 범위를 기준으로 설정하면 위와 같이 우선 순위를 매길 수 있다.
여기서 !important는 스타일 규칙에 선언할 수 있다, 중요도와 적용 범위가 같다면 스타일을 정의한 소스 순서로 우선 순위를 정한다. (나중에 작성한 스타일이 앞선 스타일을 덮어쓴다)
예제를 통해 배운 내용을 확인하자.
CSS를 통해 텍스트를 꾸며보자.
<body>태그에 스타일을 지정하면 본문의 모든 내용에 대해 스타일이 지정된다. 상속 관계를 생각하면 이해하기 쉽다.
font-family로 글꼴을 / font-size로 글자 크기를 / font-weight로 글자 굵기를 / font-style로 글자 스타일을 지정했다.
글꼴을 설정할 때 사용자 시스템에 글꼴이 없는 경우를 대비해 몇 가지 후보 글꼴을 함께 지정해 줄 수 있다.
폰트를 설정할 때 웹 폰트를 사용할 수도 있다.
웹 폰트를 사용하면 사용자 시스템에 없는 글꼴도 함께 사용할 수 있고, 웹 페이지를 만들 때 글꼴에 대한 정보도 함께 업로드하는 방식으로 구현된다.
font-face 속성을 사용해 웹 폰트를 사용한다.
폰트 이름을 정해주고, local() 함수로 사용자 시스템에 해당 글꼴이 없는지 확인한 후 폰트의 위치를 설정한다.
폰트 파일의 확장자로는 ttf woff eot가 있는데 ttf파일은 용량이 크기 때문에 woff파일을 우선으로 적용시킨다.
@import를 사용해 웹 폰트를 가져오고 바로 사용하는 방법도 있다.
텍스트의 색상을 설정하는 방법에 대해 알아보자.
여러 가지 방법이 있다.
1. #RRGGBB 16진수로 RGB값을 표현
2. 직관적으로
3. hsl ( hue / saturation / lightness )
색상 채도 명도를 설정해서 표현
4. RGB를 직관적으로
5. 4번 + 투명도
워드나 한글에서 텍스트를 정렬하는 것 처럼 CSS를 통해 텍스트를 정렬시킬 수 있다.
text-align 속성을 사용해서 다양한 정렬을 구현할 수 있다.
match-parent 속성값을 사용하면 부모 요소를 따라 문단을 정렬한다.
이 외에도 여러 가지 속성들을 간단하게 알아보자.
1. line-height 속성 : 텍스트가 두 줄이 넘어갈 때 줄 간격을 설정한다
2. text-decoration 속성 : 밑줄, 윗줄. 취소선을 긋거나 긋지 않을 수 있다. (하이퍼링크 효과를 없앨 수 있다)
3. text-shadow 속성 : 그림자 효과를 줄 수 있다. 적절하게 사용할 시 입체감을 살릴 수 있다.
4. text-transform 속성 : 대소문자를 조작할 수 있다.
5. letter-spacing 속성 : 글자와 글자 사이의 간격을 조절한다.
6. word-spacing 속성 : 단어와 단어 사이의 간격을 조절한다.
7. list-style-type 속성 : 리스트를 표현할 때 불릿 부분을 조작한다.
8. list-style-image 속성 : 리스트의 불릿 부분을 이미지로 설정한다.
9. list-style-position 속성 : 리스트가 시작될 때 들여쓰기를 설정한다.
10. list-style 속성 : 사실 7~9는 이걸로 써도 된다.
11. caption-side 속성 : 표를 만들 때 캡션의 위치를 설정한다.
12. border-spacing 속성 : 셀과 셀 사이의 여백을 조절한다.
13. border-collapse 속성 : 표와 셀의 테두리를 합쳐준다.
일단은 이런 속성이 있구나 정도만 기억해두고 필요할 때 키워드를 바탕으로 찾아서 활용하자.
'Web > HTML && CSS' 카테고리의 다른 글
| [CSS] CSS 정리 (4) (2) | 2022.02.06 |
|---|---|
| [CSS] CSS 정리 (3) (0) | 2022.01.21 |
| [CSS] CSS 정리 (2) (0) | 2022.01.20 |
| [HTML] HTML 정리 (2) (0) | 2022.01.19 |
| [HTML] HTML 정리 (1) (0) | 2022.01.18 |