CSS 문법

# CSS (Cascading Style Sheets) 문법

CSS : HTML(마크업 언어)을 꾸며주는 표현용 언어

HTML이 문서의 정보, 구조를 설계한다면 CSS는 문서를 보기 좋게 디자인 !

■ CSS 구문

h1 { color: yellow; font-size:2em; }

선택자(selector) - "h1"
속성(property) - "color"값(value) - "yellow"
선언(declaration) - "color: yellow", "font-size: 2em"
선언부(declaration block) - "{ color: yellow; font-size:2em; }
규칙(rule set) - "h1 { color: yellow; font-size:2em; }"

■ 주석

■ 적용(html과 연결)

1. inline

태그 하나하나에 선언하는 방법

<p style="color:yellow;"> 내용 </p>

2. internal

문서 내에 묶어서 선언하는 방법

<style> p {color:yellow;} </style>

3. external

외부 스타일 시트를 이용한 방법

<link rel="stylesheet" href="css/sheet.css">

■ 선택자

요소선택자(=태그선택자)

h1 { color: yellow; }

그룹화

h1, h2, h3, h4, h5, h6 { color: yellow; }

* { color: yellow; }

h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; }

class 선택자

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>css</title>
	<style media="screen">
    .html { color: purple; }
    .css { text-decoration: underline; }
	</style>
</head>
<body>
  <dl>
    <dt class="html">HTML</dt>
    <dd><span class="html">HTML</span>은 문서의 구조를 나타냅니다.</dd>
    <dt class="css">CSS</dt>
    <dd><span class="css">CSS</span>는 문서의 표현을 나타냅니다.</dd>
</dl>
</body>
</html>

다중 클래스

앞에 . 있음

id 선택자

#bar { background-color: yellow; }

※ class 선택자와의 차이점

.기호가 아닌 #기호 사용
태그의 class 속성이 아닌 id 속성을 참조
문서 내에 유일한 요소에 사용
구체성

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>css</title>
	<style>
		.item { background: gray; }
		.a { color: yellow; }
		.b { color: blue; }
		#special { color: red; }
	</style>
</head>
<body>
	<ul>
		<li class="item a">first</a>
		<li class="item b">second</a>
		<li class="item" id="special">third</a>
	</ul>
</body>
</html>

■ 선택자의 조합

/* 요소와 class의 조합 */
p.bar { ... }

/* 다중 class */
.foo.bar { ... }

/* id와 class의 조합 */
#foo.bar { ... }

■ 속성선택자

p[class] { color: silver; }
p[class][id] { text-decoration: underline; }

첫 번째는 <p>이면서 class 속성이 있는 요소이면 color: silver 규칙이 적용

두 번째는 <p>이면서 class 속성과 id 속성이 함께 있어야 text-decoration: underline 규칙이 적용

■ 정확한 속성값으로 선택

p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }

p[class="foo"]는 <p>이면서 class 속성의 값이 foo이면 적용되고, p[id="title"]는 <p> 이면서 id 속성의 값이 title이면 적용

■ 부분 속성값으로 선택

[class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
[class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
[class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
[class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택

<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>

p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */

■ 문서 구조 관련 선택자

<html>
<body>
    <div>
        <h1><span>HTML</span>: Hyper Text Markup Language</h1>
    </div>
    <p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>

1. 자손선택자

div span { color: red; }

2. 자식선택자

div > h1 { color: red; }

3. 인접선택자

div + p { color: red; }

* 요소들이 많이 나열되어 있더라도 제일 우측에 있는 요소가 실제 선택되는 요소

/* body 요소의 자식인 div 요소의 자손인 table 요소 바로 뒤에 인접한 ul 요소 선택! */

body > div table + ul { ... }

■ 가상선택자

□ 가상클래스

약속된 상황이 되면 브라우저 스스로 클래스를 적용

:(콜론) 기호를 써서 나타냄

1. 문서요소와 관련된 가상클래스

:first-child : 첫 번째 자식 요소 선택
:last-child : 마지막 자식 요소 선택

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>css</title>
	<style media="screen">
    li:first-child { color: red; }
    li:last-child { color: blue; }
	</style>
</head>
<body>
	<ul>
    <li class="first-child">HTML</li>
    <li>CSS</li>
    <li class="last-child">JS</li>
	</ul>
</body>
</html>

2. 앵커 요소와 관련된 가상클래스

:link : 하이퍼 링크이면서 아직 방문하지 않은 앵커

:visited : 이미 방문한 하이퍼링크를 의미

* 하이퍼 링크는 앵커 요소에 href 속성이 있는 것

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>css</title>
	<style media="screen">
    a:link { color: blue; }
    a:visited { color: gray; }
	</style>
</head>
<body>
	<ul>
    <a href="http://naver.com/">네이버</a>
    <a href="http://google.com/">구글</a>
    <a href="http://daum.net/">다음</a>
	</ul>
</body>
</html>

3. 사용자 동작과 관련된 가상클래스

:focus: 현재 입력 초점을 가진 요소에 적용
:hover: 마우스 포인터가 있는 요소에 적용
:active: 사용자 입력으로 활성화된 요소에 적용

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>css</title>
	<style>
		a:focus { background-color: yellow }
		a:hover { font-weight: bold }
		a:active { color: red }
	</style>
</head>
<body>
	<a href="http://www.naver.com">네이버</a>
	<a href="http://www.google.com">구글</a>
	<a href="http://www.daum.net">다음</a>
</body>
</html>

□ 가상요소

가상 클래스처럼 문서 내에 보이지 않지만, 미리 정의한 위치에 삽입되도록 함

::(더블 콜론) 기호를 사용

:before : 가장 앞에 요소를 삽입
:after : 가장 뒤에 요소를 삽입
:first-line : 요소의 첫 번째 줄에 있는 텍스트
:first-letter : 블록 레벨 요소의 첫 번째 문자

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>css</title>
	<style media="screen">
    p::before { content: "###" }
    p::after { content: "!!!" }
    p::first-line { color:green; }
    p::first-letter{
      font-size: 3em;
    }
	</style>
</head>
<body>
    <p>
    <first-letter>L</first-letter>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
    <before>###</before>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <after>!!!</after>
    <p>
    <!-- 모니터 가로 해상도에 따라 요소가 포함하는 내용이 변동됩니다. -->
    <first-line>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiu ..(..어딘가쯤..) </first-line>... unt ut labore et dolore magna aliqua.
</p>
</body>
</html>

■ 구체성

선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로, 구체성의 값이 클수록 우선으로 적용

★ !important > inline > id > class > 선택자 > 전체선택자, 조합자(+, >) 영향 x 순으로 구체성 가짐

0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
전체 선택자는 0, 0, 0, 0을 가진다.
조합자는 구체성에 영향을 주지 않는다. (>, + 등)

h1 { ... }  /* 0,0,0,1 */
body h1 { ... }  /* 0,0,0,2 */
.grape { ... }  /* 0,0,1,0 */
*.bright { ... }  /* 0,0,1,0 */
p.bright em.dark { ... }  /* 0,0,2,2 */
#page { ... }  /* 0,1,0,0 */
div#page { ... }  /* 0,1,0,1 */

■ 상속

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>css</title>
	<style media="screen">
    h1 { color: gray; }
	</style>
</head>
<body>
    <h1>Hello, <em>CSS</em></h1>
</body>
</html>

※ 상속되는 속성의 구체성

☆ 상속된 CSS는 구체성을 가지지 못하기 때문에 구체성을 가진 전체 선택자의 스타일이 적용됨

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>css</title>
	<style media="screen">
    * { color: red; }
    h1#page { color: gray; }
	</style>
</head>
<body>
    <h1 id="page">Hello, <em>CSS</em></h1>
</body>
</html>

■ cascading

스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류합니다.
스타일 규칙들을 출처에 따라 분류합니다.
스타일 규칙들을 구체성에 따라 분류합니다.
스타일 규칙들을 선언 순서에 따라 분류합니다.

<p id="bright">Hello, CSS</p>

p#bright { color: silver; } 
p { color: red; }

위의 경우에는 구체성에 따라 color: silver가 적용

p { color: silver; }
p { color: red; }

위의 경우에는 선언 순서에 따라 color: red가 적용

*참고 문제

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>css</title>
	<style media="screen">
    .box { color: red !important; }
    .index > .in_item { color: pink; }
    div ul .in_item { color: orange; }
    .in_item.in1 { color: black; }
    p + ul.index { color: yellow; }
	</style>
</head>
<body>
  <div class="box" style="color: yellow">

    <h1 class="title">title</h1>
    <p class="desc">description</p>

    <ul class="index" style="color: blue;">  

    <li class="in_item in1">index 1</li>
    <li class="in_item ">index 2</li>
    </ul>
  </div>
</body>
</html>

'온라인 강의 > HTML&CSS(네이버 부스트코스)' 카테고리의 다른 글

CSS 문법3 (0)	2022.07.21
CSS 문법2 (0)	2022.07.21
HTML 문법3 (0)	2022.07.19
HTML 문법2 (0)	2022.07.18
HTML 문법 (0)	2022.07.18

코린이 삐약이의 성장일기

CSS 문법

# CSS (Cascading Style Sheets) 문법

'온라인 강의 > HTML&CSS(네이버 부스트코스)' 카테고리의 다른 글

티스토리툴바

CSS 문법

# CSS (Cascading Style Sheets) 문법

'온라인 강의 > HTML&CSS(네이버 부스트코스)' 카테고리의 다른 글

'온라인 강의/HTML&CSS(네이버 부스트코스)' Related Articles

티스토리툴바