공부하는 히욤이

[부스트코스] 웹 UI 개발 : CSS 이해하기 본문

boostcourse/웹 UI 개발

[부스트코스] 웹 UI 개발 : CSS 이해하기

히욤이 2019. 7. 27. 23:14

1) CSS 소개

CSS

 - Cascading Style Sheets

 

2) CSS 문법과 적용

CSS 문법

  • 선택자(selector)
  • 속성 (property)
  • 값 (value)
  • 선언 (declaration)
  • 선언부 (declaration block)
  • 규칙 (rule set)


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 : yellowl font-size: 2em; }

 

* 선택자와 선언부 사이, 선언과 선언 사이는 앞뒤로 개행 해도 상관없음

* 속성이름과 속성 값 사이에는 개행 하면 안됨

 

 

CSS의 속성(Property)과 HTML의 속성(Attribute)

CSS - property

HTML - Attribute

 

 

CSS의 적용

1. Inline

  • 해당 요소에 직접 스타일 속성을 이용해 규칙을 선언하는 방법
  • 선택자는 필요하지 않고 선언부에 내용만 스타일 속성 값 삽입
<div style="color:red;"> 내용 </div>

 

2. Internal

  • <style> 을 활용한 방법
  • <style>은 <head> 내부에 들어감
<style> div {color: red;} </style>

 

3. External

  • 외부 스타일 시트 파일을 이용한 방법
  • <link>를 이용해 CSS 파일과 연결
  • <head> 내부에 <link>를 선언한 후 href 속성을 이용해 css 파일 경로 기입
  • rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성 (css는 'stylesheet'라고 적어야 함)
<link rel="stylesheet" href="css/style.css">

 

4. Import

  • 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식
  • <style> 내부 상단이나 외부 스타일 시트 파일 상단에 선언하지만 성능상 좋지 않아 거의 쓰이지 않음
@import url("css/style.css");

 

 

 

3) 선택자 1

요소 선택자

  • 선택자 중에 가장 기본이 되는 선택자이며, 태그 선택자라고도 함

  • 문서 내에 선택자에 해당하는 모든 요소에 스타일 규칙이 적용 됨
h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }
h4 { color: yellow; }
h5 { color: yellow; }
h6 { color: yellow; }

 

그룹화

  • 선택자는 쉼표를 이용해 그룹화 가능
  • * (별표, asterisk) 기호로 문서 내에 모든 요소를 선택 가능
h1, h2, h3, h4, h5, h6 { color: yellow; }

* { color: yellow; }
  • 전체 선택자는 편리하지만 성능상 좋지 않음으로 되도록 지양
  • 선언들도 그룹화 가능
h1 { color: yellow; font-size: 2em; background-color: gray; }
  • 선택자와 선언을 동시에 그룹화도 가능
h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; }

 

 

4) 선택자 2

class 선택자

  • 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법
  • HTML을 수정해 class 속성을 추가해야 함
  • class 속성은 글로벌 속성임으로 어느 태그에서도 사용 가능
  • class 속성에 값을 넣게 되면 class 선택지를 이용해 스타일 규칙 적용 가능
.foo { font-size: 30px; }
<p class="foo"> ... </p>

* 클래스 선택자를 쓸 때는 마침표 .을 적어야 함

 

다중 class

  • class 속성은 꼭 하나의 값만 가질 수 있는 것이 아님
  • 공백으로 구분하여 여러 개의 class 값을 넣을 수 있음
.foo { font-size: 30px; }
.bar { color: blue; }
<p class="foo bar"> ... </p>

 

id 선택자

  • 선택자를 쓸 때는 #을 사용
  • class 속성 대신 id 속성만 쓰면 됨
#bar { background-color: yellow; }
<p id="bar"> ... </p>

 

class 선택자와 id 선택자의 차이점

  • class는 . id는 #을 사용
  • id 선택자는 문서 내에 유일한 요소에만 사용 가능
  • id 선택자는 구체성의 값이 다름

 

 

5) 선택자 3

선택자의 조합

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

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

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

1. <p> 이면서 class 속성에 bar가 있어야 적용 가능

2. class 속성에 foo와 bar가 모두 있어야 적용 가능

3. id와 class의 조합으로 id가 foo이고 class가 bar인 요소에 적용

 

 

속성 선택자

  • 단순 속성으로 선택

p[class] { color: silver; }
p[class][id] { text-decoration: underline; }
<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>

  • 속성 선택자는 대괄호를 이용해 선언하고 대괄호 안에 속성 이름이 들어 감

 

정확한 속성 값으로 선택

  • 정확한 속성값으로 선택은 제목 그대로 속성의 값으로 요소를 선택

  • 선택자는 대괄호 안에 속성 이름과 속성값을 다 적으면 됨
p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }

 

부분 속성 값으로 선택

  • 부분 속성 값으로 선택은 속성 이름과 속성값 사이에 사용되는 기호에 따라 동작이 다름

<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>
/* class 속성의 값이 공백으로 구분한 'bar' 단어가 포함되는 요소 선택*/
p[class~="color"] { font-style: italic; }

/* class 속성의 값이 'bar로 시작하는 요소 선택 */
p[class^="color"] { font-style: italic; }

/* class 속성의 값이 'bar로 끝나는 요소 선택*/
p[class$="color"] { font-style: italic; }

/* class 속성의 값이 'bar 문자가 포함되는 요소 선택 */
p[class*="color"] { font-style: italic; }

 

6) 문서 구조 관련 선택자

문서 구조의 이해

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

 

부모와 자식

부모 요소 : 그 요소를 포함하는 가장 가까운 상위 요소로 그 요소의 부모 요소는 단 하나 뿐

자식 요소 : 부모 요소와 반대라고 생각하면 되고, 여러 개일 수도 있음

  • <body>의 부모 요소: <html> ↔ <html>의 자식 요소: <body>
  • <div>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>
  • <h1>의 부모 요소: <div> ↔ <div>의 자식 요소: <h1>
  • <span>의 부모 요소: <h1> ↔ <h1>의 자식 요소: <span> 
  • <p>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>

조상과 자손

조상 요소 : 그 요소를 포함하는 모든 요소로, 부모 요소를 포함하여 여러개 일수도 있음

자손 요소 : 그 반대로, 그요소가 포함하고 있는 모든 요소가 자손 요소임

  • <body>의 조상 요소: <html> ↔ <html>의 자손 요소: <body>, <div>, <h1>, <span>, <p>
  • <div>의 조상 요소: <html>, <body> ↔ <body>의 자손 요소: <div>, <h1>, <span>, <p>
  • <h1>의 조상 요소: <html>, <body>, <div> ↔ <div>의 자손 요소: <h1>, <span>
  • <span>의 조상 요소: <html>, <body>, <div>, <h1> ↔ <h1>의 자손 요소: <span>
  • <p>의 조상 요소: <html>, <body> ↔ <body>의 자손 요소: <div>, <h1>, <span>, <p>

형제

같은 부모를 가지고 있는 요소들은 서로 형제 관계에 있음

 

 

 

 

 

7) 가상 선택자1

가상 클래스(pseudo class)

  • 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스

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

문서 구조와 관련된 가상 클래스

  • :first-child : 첫 번째 자식 요소 선택

  • :last-child : 마지막 자식 요소 선택
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>
li:first-child { color: red; }
li:last-child { color: blue; }

 

아래의 코드와 같이 동작하게 됨

<ul>
    <li class="first-child">HTML</li>
    <li>CSS</li>
    <li class="last-child">JS</li>
</ul>

 

 

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

  • :link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
  • :visited : 이미 방문한 하이퍼링크를 의미
a:link { color: blue; }
a:visited { color: gray; }

 

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

  • :active: 사용자 입력으로 활성화된 요소에 적용
  • :hover: 마우스 포인터가 있는 요소에 적용
  • :focus: 현재 입력 초점을 가진 요소에 적용
a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }

 

 

 

 

8) 가상 선택자 2

가상 선택자(pseudo element)

  • HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수 있음

  • 가상 클래스처럼 문서 내에 보이지 않지만, 미리 정의한 위치에 삽입되도록 약속 되어 있음
  • 선언 방법은 콜론을 사용
  • CSS3 부터는 가상 클래스와 가상 요소를 구분하기 위해 가상 요소에는 ::(더블 콜론) 사용
::pseudo-element {
    property: value;
}
p::before { content: "###" } //가장 앞에 요소를 삽입
p::after { content: "!!!" } // 가장 뒤에 요소를 삽입
p::first-line { ... } // 요소의 첫 번째 줄에 있는 텍스트
p::first-letter { ... } // 블록 레벨 요소의 첫 번째 문자

 

9) 구체성

구체성

  • 선택자는 어떠 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙이 있는데 이것이 구체성

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

- 값을 비교 할 때는 좌측에 있는 값부터 비교하고 좌측 부분의 숫자가 클수록 높은 구체성을 갖음

 

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

 

10) 구체성

상속되는 속성

h1 { color: gray; }

<h1>Hello, <em>CSS</em></h1>

- <em>은 부모인 <h1>의 color: gray를 상속 받음

  • margin, padding, background, border 등 박스 모델 속성들은 상속되지 않음

 

상속되는 속성의 구체성

* { color: red; }
h1#page { color: gray; }
<h1 id="page">Hello, <em>CSS</em></h1>

 

11) 케스케이딩

cascading 규칙

1. 중요도(!important)와 출처

2. 구체성

3. 선언 순서

 

* 스타일이 적용되는 방식

더보기
  1. 스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류합니다.
    1. 중요도가 명시적으로 선언된 규칙들은 그렇지 않은 규칙들보다 우선합니다.
    2. 중요도가 있는 규칙들끼리는 아래 다른 규칙들을 적용받습니다.
  2. 스타일 규칙들을 출처에 따라 분류합니다.
    1. 제작자 스타일 규칙이 사용자 에이전트 스타일 규칙보다 우선합니다.
  3. 스타일 규칙들을 구체성에 따라 분류합니다.
    1. 구체성이 높은 규칙들이 우선합니다.
  4. 스타일 규칙들을 선언 순서에 따라 분류합니다.
    1. 뒤에 선언된 규칙일수록 우선합니다.

 

 

<해당 포스트는 교육 목적을 위해 '부스트코스'의 강의를 듣고 강의자료를 개인적으로 정리한 것으로 모든 내용의 출처와 저작권은 부스트코스에 있습니다.>

저작자표시 비영리 동일조건

'boostcourse > 웹 UI 개발' 카테고리의 다른 글

[부스트코스] 웹 UI 개발 : 폰트, 텍스트  (0) 2019.07.30
[부스트코스] 웹 UI 개발 : 단위, 배경, 박스모델  (0) 2019.07.29
[부스트코스] 웹 UI 개발 : 콘텐츠모델, 시멘틱마크업, 블록 & 인라인  (0) 2019.07.24
[부스트코스] 웹 UI 개발 : HTML 태그  (3) 2019.03.28
[부스트코스] 웹 UI 개발 : HTML 이해하기  (0) 2019.03.28
'boostcourse/웹 UI 개발' Related Articles more