#1. CCS의 기본구조

1. CSS의 개념

1) CSS란?

  • Cascading Style Sheets의 약자이며, 계단식으로 스타일을 정의하는 문서를 의미한다.
    • HTML 문서는 태그가 태그를 포함하는 계단식 구조를 가지고 있다.
  • 작성된 HTML 문서 디자인요소를 더해준다. (확장자는 *.css)
  • CSS는 독립적으로 존재할 수 있지만, 그 목적이 HTML 문서의 스타일을 정의하는데 있으므로 HTML 문서가 없는 CSS는 의미가 없다.

 

2) 기본 문법

  • 어떤 요소에 스타일을 적용 할지 선택(선택자)한 후 속성명과 속성값을 정의한다.
  • 선택자 지정후 값은 " { } " 를 통해 정의한다.
    • 선택자(selector): 어떤 요소에 스타일을 적용할지에 대한 정보
    • 속성명: 어떤 스타일을 정의하고 싶은지에 대한 정보 (색상, 크기 등)
    • 속성값: 속성명을 어떻게 정의하고 싶은지에 대한 정보
선택자 {
  속성명: 속성값;
  속성명: 속성값;
}

-----

h1 {
  color: red;
}
/* p태그에 color를 정의하고 값을 red로 적용 */

 

2. CSS 적용 방법

1) 인라인 스타일

  • HTML 태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의한다. (거의 사용안하는 방법)
  • 선택자는 필요없다.
<h1 style="color: blue;">파란글씨</p>

 

2) 스타일 태그

  • HTML의 <head>태그 안에 <style></style> 태그를 추가하여 그안에 CSS 코드를 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  
  <style>
    h1 {
      color: red;
    }
  </style>
  
</head>

 

3) 외부파일 참조 (문서간의 연결)

  • CSS문서를 따로 작성하여 HTML 문서와 연결한다. (가장 좋은 방법)
  • 확장자가 *.css 인 스타일시트 파일을 생성해 그 안에 CSS 코드를 작성하고, <link /> 태그를 사용해서 불러온다.
  • <link> 태그는 HTML의 <head> 태그 안에 위치한다.
<link rel="stylesheet" href="CSS파일경로">

※ link 태그의 사용 가능한 속성

  • rel : 현재 문서와 외부 소스의 연관 관계를 기술하는 속성
  • href : 연결하고자 하는 외부 소스의 주소를 기술하는 속성

 

#2. 선택자(selector)

1. 기본 선택자

1) 전체 선택자

  • " * "(애스터리스크, 별표) 를 사용하여 문서내 모든 요소를 선택한다.
* {
  color: blue;
} 
/* 문서 내 모든 요소의 글자 색을 파란색으로 지정 */

 

2) 태그 선택자

  • HTML 문서의 태그를 명시하여 선택한다. (유형 선택자 라고도 한다)
  • 해당 태그가 여러개인 경우, 모두 선택한다.
p {
  color: blue;
} 
/* 문서 내 모든 p태그의 글자 색을 파란색으로 지정 */

 

3) 클래스(class) 선택자

  • class 속성 값을 가진 요소를 선택한다.
  • 해당 class 속성을 가진 태그가 여러개인 경우 모두 선택한다.
  • HTML 태그에 쓰인 class 이름 앞에 " . " 을 붙여 선택한다. 
  • 태그의 종류에 상관없이 여러번 재사용이 가능하다.
[html]
<div class="text"> </div>

[CSS]
.text {
  color: blue;
} 
/* HTML 문서 내 class가 "text"인 모든 요소의 글자 색을 파란색으로 지정 */

 

4) 아이디(id) 선택자

  • id 속성 값을 가진 요소를 선택한다.
  • HTML 태그에 쓰인 id 이름 앞에 " # " 을 붙여 선택한다.
  • id는 고유한 식별자 역할을 하는 전역 속성이다. (하나의 HTML 문서 안에서 다른 요소와 중복될 수 없다.)
[HTML]
<div id="topic"> </div>

[CSS]
#topic {
  color: blue;
}
/* 문서 내 id가 "topic"인 요소의 글자 색을 파란색으로 지정 */

 

2. 그룹 선택자

  • 다양한 유형의 요소를 한번에 선택하고자 할 때 사용한다.
  • 콤마( , )를 이용해 선택자를 구분하고, 그룹화 한다.
h1, p, div, .myclass, #myid {
	color: blue;
}
/* 문서 내 모든 h1, p, div 태그와 클래스, 아이디 속성의 글자 색을 파란색으로 지정 */

※ 선택자가 겹치는 경우

  • 기본적으로 나중에 작성된 스타일이 적용된다.
  • 선택자가 다르지만, 요소가 겹치는 경우 선택자 우선순위에 의해 적용될 스타일이 결정된다.
  • id > class 선택자 > tag 선택자 순서로 tag 선택자의 순위가 가장 낮다.
    • id는 100점, class는 10점, tag는 1점으로 계산하여 높은 점수가 우선순위를 갖는다.

 

3. 속성 선택자

  • 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택한다. (값의 포함 여부, 위치 등을 통해서 선택할 수 있다)
  • HTML 태그의 속성과 값을 대괄호 [ ] 안에 표현해서 사용한다.
a[href] {
    ...
} /* href 라는 속성을 갖는 a태그(값은 상관없다) */

a[href="#"] 
/* href 속성값이 "#"인 a태그 (값이 반드시 일치해야 한다) */

#hello[method="post"] 
/* method 속성의 값이 post이고, id 값이 hello인 태그 */

.choose[value="123"] 
/* value 속성의 값이 123이고, class 값이 choose인 태그 */

[class="item"] {
	...
} /* 클래스가 "item"인 요소를 선택 */
  • 기호를 추가하여 요스를 선택하는 방식을 다양화 할 수 있다.
[class *= "it"] {
	...
} /* 클래스 값에 "it"가 포함되는 요소 선택 (* == 포함) */

[class ^= "it"]
/* 클래스 값이 "it"로 시작하는 요소를 선택 (^ == 시작) */

[class $= "it"]
/* 클래스 값이 "it"로 끝나는 요소를 선택 ($ == 끝) */

 

4. 결합 선택자

  • 두개 이상의 선택자를 결합시켜 조건을 만족하는 요소를 선택한다.

1) 선택자 조합

  • 특정 요소를 자세하게 명시하고자 할 때 사용한다. (띄어쓰기x)
div.hello
/* 태그이름 + class */
 
div#hello
/* 태그이름 + id */

 

2) 자식 선택자

  • HTML의 계층구조를 순차적으로 " > " 를 사용하여 표현한다.
[HTML]
<div>
    <span><input class="form_control" /></span>
</div>

[CSS]
div > span > input.form_control {
    ...
} /* div 태그 바로 아래에 위치하는 span 태그의 바로 아래 해당 클래스값을 가진 input 태그 */

 

3) 자손 선택자

  • HTML의 계층구조를 공백을 사용하여 표현한다.
  • 반드시 순차적일 필요는 없다.
[HTML]
<div>
    ...
    <span> ... <input class="form_control" /> ... </span>
    ... 
</div>

[CSS]
div span input.form_control {
    ...
}

 

4) 형제 선택자

  • 두개의 선택자 중 첫 번째 선택자 요소의 형제를 선택할 수 있다.
h1 ~ p {
  color: red;
} /* h1 태그의 뒤에 오는 형제 중 모든 p 태그를 선택 (전체 선택) */

h1 + p {
  color: red;
} /* h1 태그의 바로 뒤에 오는 형제 p 태그를 선택 (하나만 선택) */

 

5. 의사클래스 (가상클래스)

  • 의사클래스(가상클래스)는 선택자에 추가하는 키워드로, 요소가 어떤 특정한 상태가 되었을 때 요소에 적용한다는 의미이다.
  • 선택자 뒤에 콜론 " : " 을 붙여서 정의한다.
  • hover : 마우스 포인터가 요소에 올라가 있다.
  • active : 사용자가 요소를 활성화 했다. (마우스클릭)
  • focus : 요소가 포커스 받고 있다.
  • disabled : 비활성 상태의 요소
  • nth-child : 형제 사이에서 순서에 따라 요소를 선택
    • h1:first-child : h1 태그를 갖는 요소 중 첫번 째 요소 선택 
    • h1:last-child : h1 태그를 갖는 요소 중 마지막 요소 선택
    • h1:nth-child(2) : h1 태그를 갖는 요소 중 2번째 요소 선택
    • h1:nth-child(odd) : h1 태그를 갖는 요소 중 홀수번째 요소 선택
    • h1:nth-child(2n) : h1 태그를 갖는 요소 중 짝수번째 요소 선택
    • h1:nth-child(3n) : 3의 배수 번째 선택
    • h1:nth-last-child(숫자) : nth-child 와 같은 규칙이지만 뒤에서부터 요소를 카운트 한다.
  • link : 링크의 기본 상태
  • visited : 방문한 경험이 있는 링크
선택자:의사클래스 {
  속성명: 속성값;
}

h1:hover {
  color: red;
} /* h1 태그에 마우스가 올라가면(hover) 글자를 빨간색으로 하겠다 */

 

6. 의사 요소

  • 의사요소(pseudo-elements)는 선택자에 추가하는 키워드로, 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있다.
  • 선택자 뒤에 콜론 두개 " :: " 를 붙여서 정의한다.
  • before : 요소의 앞에 의사 요소를 생성 및 추가
  • after : 요소의 뒤에 의사 요소를 생성 및 추가
  • first-line : 블록 레벨 요소의 첫 번째 선에 스타일을 적용
  • first-letter : 블록 레벨 요소의 첫 글자에만 스타일을 적용
  • marker : 목록 기호의 스타일을 적용
  • placeholder : 입력 요소의 placeholder 스타일을 적용
선택자::의사요소 {
  속성명: 속성값;
}


li::first-letter {
  fonst-size: 20px;
} /* li 요소의 첫번째 글자만 크기를 20px로 하겠다 */

 

※ before, after 의사 요소

[HTML]
<div class="parent">
  <!-- .parent의 before -->
  
  <div class="child">
    <!-- .child의 before -->
    
    박스1
    <!-- .child의 after -->
    
  </div>
  <!-- .parent의 after -->
  
</div>


[CSS]
/* 크기 지정*/
.parent {
  width: 500px;
  border: 5px solid red;
  background: #ff0;
  margin: auto;
}
.child {
  width: 450px;
  border: 5px dashed blue;
  margin: auto;
}

/* parent 클래스 태그 시작태그 직후 */
.parent::before {
  content: "parent의 before";
  display: block;
  color: red;
}

/* parent 클래스 태그 종료태그 직전 */
.parent::after {
  content: "parent의 after";
  display: block;
  color: red;
}

/* child 클래스 태그 시작태그 직후 */
.child::before {
  content: "child의 before";
  display: block;
  color: green;
}

/* child 클래스 태그 종료태그 직전 */
.child::after {
  content: "child의 after";
  display: block;
  color: green;
}

before, after 비교

저작자표시 비영리 변경금지

'국비수업 > HTML & CSS' 카테고리의 다른 글

[CSS] 박스모델 / Display 속성  (0) 2022.03.03
[CSS] 폰트 관련 속성 / 문단 관련 속성  (0) 2022.03.02
[HTML] 멀티미디어 / 입력 요소  (0) 2022.02.26
[HTML] 문장 관련 요소 / 표 그리기  (0) 2022.02.25
[HTML] HTML 기본구조 / 문단 관련 요소  (0) 2022.02.23

+ Recent posts

티스토리툴바