-
CSS(Cascading Style Sheets)HTML, CSS 2023. 12. 19. 23:50
1. CSS 란?
CSS는 (Cascading Style Sheets)의 약자로 HTML로 만든 콘텐츠에 레이아웃과 디자인 요소를 추가하는 것을 의미한다. 간단히 말해서 사람이 입는 옷을 의미한다고 말할 수 있다.
- CSS를 잘 정리해둘 경우 다른 페이지에 적용할 수 있다. (재사용성)
- 주로 요소의 너비, 색상, 위치 등에 사용되며 애니메이션 효과를 넣을 수 도 있다.
- Cascading Style Sheets로 위에서 아래로 흐르는 스타일 시트를 의미한다.
Cascading 구조를 가지기 때문에 h1에 더 아래 적용된 yellow 색이 지정됨
2. 작성 방법
- 주로 선택자를 선택하여 무슨 속성에 어떤 값을 부여하는지의 방식으로 사용된다.
- 한개의 선택자에 여러 속성 부여 가능
- 선택자는 보통 id, class, tag 를 선택자로 선택할 수 있으며 각각 선택하는 방식이 다르게 적용된다.
- class => .classname
- id => #idname
- tag => tag
선택자(A) { 프로퍼티(B): 값(C); } h1 { font-size: 10px; // 글자 크기 font-weight: bold; // 글자 굵기 }CSS를 작성하는 방식에는 3가지 방법이 존재하며 각각 어떤 특징을 가지고 있는지에 대해서 살펴보자
- 인라인에 작성
<h1 style="color: green;">안녕</h1>- 작성 방법은 매우 간단하게 HTML에 직접적으로 스타일을 넣어주기 때문에 빠르고 편리하다.
- 단점으로는 속성이 많아질 경우 유지보수가 힘들고 재사용성이 낮다.
- Style 태그 사이에 CSS 작성 방법
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> h1 { font-size: 14px; font-weight: bold; } </style> <title>Document</title> </head>- 위와 같이 HTML head 부분에 style 태그를 작성하여 css를 적용하는 방식
- 편리하기는 하지만 스타일 속성이 많아질 경우 유지보수가 힘들다.
- CSS 파일을 별도로 분리하여 CSS 작성
/* test.css */ h1 { font-size: 14px; } h2 { font-sizer: 15px; }- 가장 많이 사용되는 방법으로 유지보수가 매우 용이한 방법
- 대신 html 파일과 별도로 분리되어 있기 때문에 html과 따로 연결을 진행해 줘야한다.
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="test.css" rel="stylesheet" type="text/style" /> <title>Document</title> </head>3. 우선순위
CSS 작성 방법에 대해서 간단하게 설명을 진행하였고, css 작성 방법은 사람마다 다양하게 쓰이므로 만약 작성함에 있어서 어떤 CSS의 적용 순서가 우선순위로 적용되는지 간단하게 살펴보자
!important >>> inline >>> id선택자 >>> class명 >>> HTML 태그명 >>> DOM구조의 상위- Important
- 가장 높은 우선 순위를 가짐
- 사용 방식은 ; 전에 !important 적용
- 기존의 Cascading 구조가 망가지기 때문에 왠만해서 사용을 안하는 것이 좋다.
h1 { color: blue !important; } h1 { color: yellow; }
- Inline Style
- 앞서 간단히 설명했듯이 tag 안에 바로 style을 적용하는 방식
- 2번째로 우선순위가 높기 때문에 바로 위에 선언된 style을 무시함
- id 선택자
- HTML tag에 들어있는 id 값을 선택하여 스타일을 부여하는 것
- class 선택자
- HTML tag에 들어있는 class 값을 선택하여 스타일 부여
- tag 선택자
- HTML tag 자체를 선택하여 스타일을 부여
- tag선택자 사용시 모든 요소에 적용될 수 있으므로 사용하는데 주의
4. 기타
간단하게 CSS에 대한 설명과 CSS 작성 방법 및 우선 순위등에 대해서 정리를 해보았고, 실제 사용하는 경우는 CSS 파일을 별도로 분리하여 class 선택자를 주로 사용하여 적용하는 방식을 사용중이다. (본인은) CSS 파일을 분리하여 사용하다보니 실제 여러 곳에 적용할때 간단히 class 명을 붙여주는 방식으로 같은 스타일을 재적용할 수 있어서 편리했던 것같다.
CSS에 관한 간단한 설명은 끝내고 자주 사용되는 CSS 요소들을 그림등을 통해서 정리해볼 예정이고, 몇몇 효과들을 만든 결과물도 따로 게시판을 생성하여 결과물을 만들어볼 예정이다.
'HTML, CSS' 카테고리의 다른 글
HTML 시맨틱(Semantic) (1) 2023.11.28 HTML 요소 (0) 2023.04.05 HTML(Hyper Text Markup Language) (0) 2023.04.05