코딩세상
CSS 기초 - CSS 101 본문
CSS(Cascading Style Sheets)
- HTML과 함께 웹 페이지의 디자인을 구성하는 언어
CSS의 기본구조
-선택자(selector)와 선언부(declaration block)로 이루어져 있다. 선택자는 스타일을 적용할 HTML요소를 지정하고, 선언부는 선택한 요소에 적용할 스타일 속성과 값을 지정한다.
selector{ property: value; property: value; } |
선택자
CSS에서 사용되는 선택자는 여러가지가 있으며, 기본적인 선택자로는 전체 선택자, 태그 선택자, 클래스 선택자, ID 선택자 등이 있다.
1) 전체 선택자
전체 선택자는 모든 HTML요소에 스타일을 적용. 선택자로 (*)을 사용한다.
* { property: value; } |
2) 태그 선택자
태그 선택자는 특정 HTML 요소들에 스타일을 적용. 선택자로 (태그 이름)을 사용한다.
p { property: value; } |
3) 클래스 선택자
클래스 선택자는 HTML 요소에 대해 class 속성을 지정하여 스타일을 적용. 선택자로 (.)을 사용한다
.class-name { property: value; } |
4) ID 선택자
ID 선택자는 HTML 요소에 대해 id 속성을 지정하여 스타일을 적용. 선택자로 (#)을 사용한다.
#id-name { property: value; } |
5) 그룹 선택자
그룹 선택자는 다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용. 쉼표(,)를 이용하여 여러 선택자를 그룹화 할 수 있다.
h1, p, .btn { color : blue; } h2 { colo r: black; } #self-introduction { color : red; } |
선택자 우선순위
나중에 작성된 스타일이 적용되는게 일반적이나 같은 요소에 서로 다른 선택자로 CSS가 적용된 경우, 선택자 우선순위에 의해 스타일이 적용된다.
아이디 선택자 (#id_name) > 클래스 선택자 (.class_name) > 태그 선택자(h1, p, button, etc...)
스타일 속성과 값
CSS에서는 다양한 스타일 속성과 값이 제공된다. 기본적으로는 색상, 글꼴, 배경, 크기 등이 있다.
1) 색상
색상은 (color) 속성을 사용하여 지정. 색상은 이름, RGB, HEX 값을 사용하여 지정할 수 있다.
selector { color : red; color : rgb(255, 0 ,0); color : #FF0000; } |
2) 글꼴
글꼴은 (font-family) 속성을 사용하여 지정. 여러개의 글꼴을 지정할 수 있으며, 운영체제에 설치된 글꼴도 사용할 수 있다.
selector { font-family : Arial, sans-serif; } |
3) 배경
배경은 (background) 속성을 사용하여 지정. 색상, 이미지, 반복 등을 설정할 수 있다.
selector { background-color : yellow; background-image : url("image.png") background-repeat : no-repeat; } |
4) 크기
크기는 (width, height) 속성을 사용하여 지정한다.
selector { width : 200px height : 100px; } |
CSS 적용방법
1) 인라인(in-line) CSS
HTML 문서에서 태그요소 내부의 style 속성으로 CSS를 정의할 수 있다.
<body> <p style="color : #000000>Hellow World!</p> </body> |
2) Style 태그 CSS
HTML 문서 내부에 style 태그를 사용하여 적용할 수 있다.
<head> <style type = "text/css"> p { color : #000000; } </style> </head> |
CSS 파일 적용하기
CSS는 인라인 또는 style 태그를 이용해 적용할 수 있다. 하지만 일반적으로는 CSS파일을 따로 만들어 HTML 문서에서 불러와 사용한다.
<head> <link rel = "stylesheet" href = "style.css"> </head> |
Semantic Web
HTML5에서는 이전보다 더 나은 시맨틱 요소가 추가되었다.
Semantic이라는 말은 ‘의미론적인’이라는 뜻을 가지고 있다. HTML의 태그나 id, class 등이 그 역할에 알맞은 이름을 가지고 있는 경우 시맨틱하다고 표현한다. 예를 들어 다음과 같이 div 요소로 나타낼 수 있는 헤더가 있다.
<div id = "header">제목</div> |
이 요소를 다음과 같이 나타내면 보다 더 의미론적인 상태가 된다.
<header>제목</header> |
컴퓨터가 의미정보를 해석할 때에 div와 id=”header”라는 내용을 모두 읽었던 이전에 비해 header만 읽으면 되므로 훨씬 효율적이라고 볼 수 있다. 이외에도 article, section, nav 등의 태그를 이용해 보다 의미가 명확한 태그를 사용하는 것이 시맨틱 웹을 작성하는 기초가 된다.
#출처 엘리스 AI 트랙 CSS 기초 강의 - CSS 101 (박규하 코치)
'HTML.CSS' 카테고리의 다른 글
CSS 기초 강의 - 애니메이션, 트랜지션, 반응형 웹 (0) | 2023.03.02 |
---|---|
CSS 기초 강의 - 블록과 박스모델 (0) | 2023.03.02 |
HTML 기초 (0) | 2023.03.01 |
웹 표준, 웹 접근성, 크로스 브라우징 (0) | 2023.03.01 |