CSS Basics

Tomato·2019년 10월 3일

CSS

Projects

목록 보기

3/5

이곳의 내용을 참조하여 작성되었습니다.

CSS를 HTML에 적용시키는 방법

Inline Style Sheet 사용

해당 태그가 선택자가 되고, CSS 코드에는 속성(property)과 값(value)만 들어간다. 꾸미는 데에 한계가 있고 재사용이 불가능하다.

<p style="color: blue"> wow wow wow. </p>

Internal Style Sheet 사용

HTML 문서 안에 스타일 코드를 넣는다.
보통 <head>와 </head> 사이에 <style> 태그를 넣으나 어디 넣든 상관없다.
HTML 문서 안의 여러 요소를 한 번에 꾸밀 수 있지만 다른 HTML 문서에는 적용할 수 없다.

<style>
  h1 {
   color: blue;
  }
</style>

Linking Style Sheet

별도의 CSS 파일을 만들고 HTML 문서와 연결한다.
경로에 유의한다.
여러 HTML 문서에 사용할 수 있다.

h1 {
 color: red;
}

<link rel="stylesheet" href="style.css">

CSS 기초 문법

h1 { color: red}

h1, color, red 각각을 선택자, 속성, 값이라고 한다.

선택자(selector): 무엇을 꾸밀지 정한다
속성(property): 어떤 모양을 꾸밀지 정한다.
값(value): 어떻게 꾸밀지 정한다.

selector { property: value }

property와 value를 합쳐서 선언(declaration)이라고 한다.

;(세미콜론)으로 구분해서 선언을 여러 개 넣을 수 있다.

h1 {
  color: red;
  font-size: 20px;
}

값에 공백이 있는 경우 작음 따옴표나 큰 따옴표로 감싼다.

p {
  font-family: 'Times New Roman';
}

여러 개의 연속한 공백이나 줄바꿈은 하나의 공백으로 인식된다.

주석은 /*와 */ 사이에 쓴다. 사이에 줄바꿈이 있어도 모두 주석으로 인식한다.

/*
 *	comment1
 *	comment2
 *    comment3
 */

선택자(Selector): 전체 선택자, 타입 선택자, 속성 선택자

전체 선택자(Universal Selector)는 모든 HTML요소를 선택한다. *로 나타낸다. 다른 선택자와 같이 사용할 때는 생략할 수 있다.

* {
  color: blue;
}

/* Produce same result */
*.abc { color: blue; }
.abc { color: blue; }

타입 선택자(Type Selector)는 h1, p, div 등 HTML 요소를 선택한다.

p {
  color: blue;
}

위처럼 쓰면 HTML 문서 안의 모든 p 요소의 내용을 파란색으로 만든다.

속성 선택자(Attribute Selector)는 특정 속성(attribute)을 갖고 있거나 특정 속성이 특정 값 등을 갖고 있는 요소를 선택한다.
다음과 같은 형태가 있다.

[attribute]

attributename 속성을 가진 요소를 선택한다.

h1[title]

[attribute="value"]

attributename 속성의 값이 value인 요소를 선택한다.

h1[title="abc"]

[attribute~="value"]

attributename 속성의 값이 value를 포함한 요소를 선택한다.

h1[title~="abc"]

[attribute|="value"]

attributename 속성의 값이 value거나 value-로 시작하는 요소를 선택한다.

h1[title|="abc"]

[attribute^="value"]

attributename 속성의 값이 value로 시작하는 요소를 선택한다.

h1[title^="abc"]

[attribute$="value"]

attributename 속성의 값이 value로 끝나는 요소를 선택한다.

h1[title$="abc"]

[attribute*="value"]

attributename 속성의 값이 value를 포함한 요소를 선택한다.

h1[title*="abc"]

아이디 선택자, 클래스 선택자

아이디 선택자(ID Selector)는 특정 값을 id 속성의 값으로 갖는 요소를 선택한다. 속성값 앞에 #를 붙여 아이디임을 나타낸다.

#abc {
  color: red;
}

클래스 선택자(Class Selector)는 특정 값을 클래스 속성의 값으로 갖는 요소를 선택한다. 속성값 앞에 .를 붙여 클래스임을 나타낸다.

.abc

클래스 선택자 앞에 아무것도 없으면 그 값을 갖는 모든 요소를 선택한다.

/* 둘 모두를 선택 */
<h1 class="abc"> Hi </h1>
<p class="abc"> Hello </p>

선택자 앞에 무언가 있으면 모두 만족하는 요소를 선택한다.

/* <p class="abc> ~ </p>만 선택 */
p.abc

클래스 속성은 여러 개의 값을 가질 수 있는데, 여러 개의 앖을 가진 경우 CSS에 정의된 순서대로 적용된다. 아래의 경우 두 문단 모두 빨간색으로 나온다.

<p class="abc xyz">Lorem</p>

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
      .abc {color: blue;}
      .xyz {color: red;} 
    </style>
  </head>
  <body>
    <p class="abc xyz">Lorem Ipsum Dolor.</p>
    <p class="xyz abc">Lorem Ipsum Dolor.</p>
  </body>
</html>

하위 선택자, 자식 선택자, 형제 선택자, 인접 형제 선택자

하위 선택자(Descendant Selector)는 특정 요소의 하위에 있는 요소를 선택한다.

div blockquote

이 경우 blockquote 요소를 선택하는데, div와 blockquote 사이에 요소가 더 있어도 선택된다.

<div>
  <blockquote> ... </blockquote>
</div>

자식 선택자(Child Selector)는 특정 요소의 자식 요소를 선택한다.

div > blockquote

이 경우 div의 자식 요소 중 blockquote를 선택한다. 한 단계 아래에 있는 요소만 선택한다는 것에 주의한다.

<div>
  <blockquote> ... </blockquote>
</div>

위의 경우는 선택되지만 아래의 경우는 선택되지 않는다.

<div>
  <aside>
  	<blockquote> ... </blockquote>
  </aside>
</div>

형제 선택자(Sibling Selector)는 어떤 요소의 형제 요소를 선택한다.

h1 ~ p

위 문장은 h1 요소의 형제 요소 중 p 요소를 선택한다.

인접 형제 선택자(Adjacent Sibling Selector)는 어떤 요소의 형제 요소 중 첫 번째 요소를 선택한다.

h1 + p

위 문장은 h1의 형제 요소 중 첫 번째 p 요소를 선택한다.

가상 요소

가상 요소(Pseudo-elements)는 요소의 특정 부분을 선택한다.
가상 클래스는 콜론을 한 개 (:), 가상 요소는 콜론을 두 개(::) 쓴다.

::first-line
요소의 첫 번째 줄을 선택한다.

p::first-line {
  color: red;
}

p 요소의 첫 번째 줄의 글자색을 빨간색으로 만든다.

::first-letter
요소의 첫 번째 문자를 선택한다.

p::first-letter {
  color: red;
}

::before
요소의 앞을 선택한다.

p::before {
  content: "xyz";
  color: red;
}

p 요소 앞에 'xyz'라는 단어를 넣고 색을 빨간색으로 만든다.

::after
요소의 뒤를 선택한다.

p::after {
  content: "xyz";
  color: red;
}

::selection
마우스 드래그 등으로 선택한 텍스를 선택한다.

::selection {
  background-color: black;
  color: yellow;
}

텍스트를 선택했을 때 배경은 검은색, 글자는 노란색으로 만든다.

::selection {
  background-color: black;
  color: yellow;
}

h1::selection {
  background-color: red;
  color: yellow;
}

요소별로 다르게 설정할 수도 있다.

:nth-child(), :nth-last-child()

특정 순서에 있는 요소를 선택할 때 사용한다. :nth-child()는 앞에서부터, :nth-last-child()는 뒤에서부터 센다.

:nth-child(an+b)

a, b는 정수이다. 0과 음수도 가능하다. n에는 음이 아닌 정수가 차례대로 대입된다. an+b 대신 even, odd를 넣을 수도 있다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			li:nth-last-child( 3n+2 ) {
				color: red;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
	</body>
</html>

li 요소 중 2, 5, 8, 11 ... 번째에 있는 것을 선택해서 빨간색으로 만든다.

:nth-last-child도 마찬가지로 동작한다. 뒤에서부터 센다는 점만 다르다.

:nth-last-child(an+b)

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			li:nth-last-child( 3 ) {
				color: red;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>10</li>
			<li>9</li>
			<li>8</li>
			<li>7</li>
			<li>6</li>
			<li>5</li>
			<li>4</li>
			<li>3</li>
			<li>2</li>
			<li>1</li>
		</ul>
	</body>
</html>

li 요소 중 뒤에서 세 번째에 있는 요소를 선택한다.

상속(Inheritance)

CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있다. 상속하는 속성은 자식 요소에 영향을 미치고, 상속하지 않는 속성은 자식 요소에 영향을 미치지 않는다.

color는 상속하는 속성이다. 부모 요소에서 정한 색이 자식 요소에도 적용된다.

<style>
  p { color: blue; }
</style>
<p> hi <em> hello </em></p>

위와 같을 때 hi뿐 아니라 hello의 색도 파란색이 된다.

padding은 상속하지 않는 속성이다. 부모 요소에서 padding을 정의해도 자식 요소에 적용되지 않는다.

<style>
  p { padding: 20px; }
</style>
<p> hi <em> hello </em></p>

위와 같을 때 p 요소에만 안쪽 여백을 만들고 em 요소에는 만들지 않는다.

example

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .abc {
        color: red;
        border: 1px solid #bcbcbc;
        padding: 10px 20px 20px 20px;
      }
    </style>
  </head>
  <body>
    <div class="abc">
      <h1>Heading</h1>
      <p>Paragraph <em>Emphasize</em></p>
      <button>Button</button>
    </div>
  </body>
</html>