CSS 이란? + 요소 선택자

CSS 이란? + 요소 선택자

2020. 5. 17. 00:19ㆍWeb/HTML & CSS

CSS 언어는 HTML 마크업 언어와 달리 Style sheet 언어입니다.

HTML 문서에 있는 각 요소들을 스타일링 할 수 있는 언어라고 생각하시면 됩니다.

모든 문단(paragraph tags) 요소들을 선택하고 그 문단 요소들 안에 있는 텍스트를 빨갛게 바꾸어 보겠습니다.

html이 존재하는 디렉토리에 styles 폴더를 만듭니다.

styles 디렉토리에 paragraph_style.css 라는 파일을 생성합니다.

paragraph_style.css

@charset "utf-8";

p {
color: red;
}

위와 같이 저장한 후 적용하고자하는 html 파일의 head 부분에 삽입해주면 되겠습니다.

<head>

</head>

html에 css를 적용하면 위와같은 효과를 얻으실 수 있으십니다.

다시 css를 살펴보도록 합시다.

p {
color: red;
}

이 전체적인 구조를 rule set이라고 표현합니다.

p -> 선택자(selector)를 입력하며 paragraph를 꾸미기 위해 p를 명시하였습니다.

color -> 속성(property), color는 p 요소의 속성입니다.)

red -> 속성값(property value), 빨간색으로 나타내기 위해 red를 사용하였습니다.

p {
color: red;
width: 500px;
border: 1px solid black;
}

width, border 속성을 추가하고 속성값을 할당하니 위와 같이 바뀌었습니다.

p,li,h1{
color: red;
width: 500px;
border: 1px solid black;
}

선택자에 li, h1을 추가적으로 지정하였습니다.

위와 같이 선택자를 요소(p,li,h1)로 활용하는 방법(요소 선택자)에 대해 알아보았습니다.

이외에도 아이디 선택자, 클래스 선택자, 속성 선택자, 수도(Pseudo) 클래스 선택자가 있습니다.

HTML 이란? 기초 정리편 (0)	2020.05.16

The Kan