본문 바로가기
Programing/HTML & CSS

[CSS] CSS & SELECTOR

다람지덕후 2019. 2. 24. 19:40

https://learn.shayhowe.com/html-css/

HTML과 CSS에 대한 기초 자료입니다. HTML, CSS에 대한 기초 지식이 없거나, 이미 알더라도 빠르게 다시 복습할 수 있는 자료입니다.


출처 : 코드스테이츠

관련문서 : WHAT IS HTML


복습차원에서 올리는 글입니다.




WHAT IS CSS?

· Cascading Style Sheets의 약자

· 웹 페이지 구성요소의 스타일을 정의하는 언어




HTML EXAMPLE

· 로고, 검색창, 버튼이 중앙에 위치하고, 그 외의 기능이 우측 상단에 위치

· 웹 페이지의 요소(element)들을 구성하는 역할




CSS EXAMPLE

· 로고, 검색창, 버튼이 중앙에 위치하고, 그 외의 기능이 우측 상단에 위치

    · 검색창의 너비

    · 버튼의 크기

    · 구성요소를 어디에 위치할 것인가







HOW TO USE CSS?

· CSS를 HTML에 적용하는 세가지 방법

    1. inline

    2. HTML 내부에 stylesheet 작성

    3. HTML 외부에 stylesheet 작성




1. INLINE

HTML의 특정 태그에 직접 style을 적용


1
<h1 style="color: red; font-style: italic">Hello world<h1>
cs


· h1태그에 style이라는 속성을 부여해서 적용

· 색상은 빨간색, 스타일은 기울임꼴임을 명시




2. HTML 내부에 STYLESHEET 작성

· <style> 태그 이용

· 보통 <head> 태그 안에 삽입

· 태그를 선택하는 규칙(Selector)에 따라 일괄 적용


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 <!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
    <style>
      h1 {
        color: red;
        font-style: italic;
      }
      <!--모든 h1 태그에 빨간색, 기울임꼴을 적용-->
      
      button {
        background-color: blue;
        color: white;
      }
      <!--button 배경이 파랑색, 글자 색은 하얀색-->
 
    </style>
  </head>
  <body>
    <h1>Hello world</h1>
    <div>Contents here
      <span>Here too!<span>
    </div>
  </body>
</html>
cs




3. HTML 외부에 STYLESHEET 작성

· <link>태그 이용

· css 확장자로 저장된 stylesheet 파일을 href 속성을 이용해 삽입


index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
    <link rel="stylesheet" type="text/css" href="myFirstStyle.css" />
  </head>
  <body>
    <h1>Hello world</h1>
    <div>Contents here
      <span>Here too!<span>
    </div>
  </body>
</html>
cs


myFirstStyle.css


1
2
3
4
5
h1 {
  color: red;
  font-style: italic;
}
<!-- 모든 h1 태그에 빨간색, 기울임꼴을 적용 -->
cs







CSS SELECTOR

CSS에서 요소(element)를 선택하는 규칙


· Note: 태그라는 용어는 시작 및 종료 태그와 같이 마크업(Markup)을 의미하며, 요소는 의미를 갖는 하나의 구조를 의미합니다




CASE STUDY

만일 다음 문서에서 Hello world에는 빨간색, Code States에는 파란색을 적용하고 싶을 경우는?



index.html


1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
    <link rel="stylesheet" type="text/css" href="myFirstStyle.css" />
  </head>
  <body>
    <h1>Hello world</h1>
    <h1>Code States</h1>
  </body>
</html>
cs


myFirstStyle.css


1
h1 { color: red }
cs




SOLUTION 1: 각각의 ELEMENT에 고유한 ID를 부여

· id 속성 이용

· #identifier와 같이 #을 이용해 고유한 id를 선택


index.html


1
2
3
4
<!-- 생략 -->
  <h1 id="hello">Hello world</h1>
  <h1 id="codestates">Code States</h1>
<!-- 생략 -->
cs


myFirstStyle.css


1
2
#hello { color: red; }
#codestates { color: blue; }
cs




SOLUTION 2: 종류(CLASS)를 만들고 ELEMENT에 CLASS 부여

· 각기 다른 색의 특성을 가진 종류를 만들고, 해당 element에 적용

· 여러 태그에 class를 부여할 수 있으며, 한 태그에 여러 class 적용도 가능

· .className과 같이 .(dot)을 이용해 class 선택


index.html


1
2
3
4
<!-- 생략 -->
  <h1 class="red underline">Hello world</h1>
  <h1 class="blue">Code States</h1>
<!-- 생략 -->
cs


myFirstStyle.css


1
2
3
.red { color: red; }
.blue { color: blue; }
.underline { text-decoration: underline; }
cs




태그일경우 .이나 #안붙여도된다.


1
button { padding: 5px; }
cs




여러개의 CLASS 값을 갖는 ELEMENT

· 공백(whitespace)를 이용해, 한 element에 여러 class를 지정할 수 있음

(element가 여러 값을 가질 수 있음)


1
<h1 class="impact red">Hello world</h1>
cs


1
2
.impact { font-size: 2em; font-weight: bold; }
.red { color: red; }
cs







LEARN YOURSELF: CSS

· 레이아웃 & Box Model

    · margin, padding, border

    · width, height, top, left, bottom, right

    · position, box-sizing

· 레이아웃 고급:

    · z-index

    · float, flex

· 기본 스타일링:

    · font-*, background-*




LEARN MORE..

· Responsive Web

· Pseudo class




저작자표시 비영리

'Programing > HTML & CSS' 카테고리의 다른 글

[HTML] DOM - DOCUMENT OBJECT MODEL  (0) 2019.02.25
[HTML] WHAT IS HTML  (0) 2019.02.24

'Programing/HTML & CSS' Related Articles

티스토리툴바