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>
<link href="styles/paragraph_style.css" rel="stylesheet" type="text/css">
</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) 클래스 선택자가 있습니다.
'Web > HTML & CSS' 카테고리의 다른 글
HTML 이란? 기초 정리편 (0) | 2020.05.16 |
---|