7일차 (2) CSS 개요

변승훈·2022년 4월 5일

CSS

KDT 핀테크 프론트엔드 개발자 2기 배운 내용

목록 보기

8/37

1. 기본 문법, 주석

1-1. 선택자 {속성: 값;}

선택자 : 스타일(CSS)을 적용할 대상(Selector)
속성 : 스타일(CSS)의 종류(Property)
값 : 스타일(CSS)의 값(Value)
속성은(:) 값이다(;)
{ } : 스타일 범위의 시작과 끝

1-2. 주석

ctrl + / 로 주석을 사용할 수 있다.
/* : 시작
*/ : 끝

div {
  color: red;		/*color: 속성, red: 값, 들여쓰기*/
  margin: 20px;		/*margin: 속성, 20px: 값, 들여쓰기*/
}

2. CSS 선언 방식

2-1. 내장 방식

내장방식 : style의 내용(Contents)으로 스타일을 작성하는 방식

<style>
  div {
    color: red;
    margin: 20px;
  }
</style>

2-2. 링크 방식

link / 로 외부 CSS 문서를 가져와서 연결하는 방식
병렬 방식이다.

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

/* main.css */
  div {
    color: red;
    margin: 20px;
  }

2-3. 인라인 방식

인라인방식 : 요소의 style 속성에 직접 스타일을 작성하는 방식(선택자가 없다.)
권장하지 않는 방식이다.

<div style="color: red; margin: 20px;"></div>

2-4. @import 방식

import방식 : CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식
직렬 방식이다.
앞의 파일의 연결이 끝나야지만 연결이 되는데 시간이 걸린다는 점에서 장점이자 단점으로 이용할 수 있다.
(href -> main.css -> box.css)

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

/*main.css*/
  @import url("./box.css");

  div {
    color: red;
    margin: 20px;
  }

  <!--box.css-->
  .box {
    background-color: red;
    padding: 20px;
  }

3. CSS 선택자

3-1. 기본 선택자

<div>
  <ul>
    <li>사과</li>
    <li>딸기</li>
    <li id="orange" class="orange">오렌지</li>
  </ul>
  <div>당근</div>
  <p>토마토</p>
  <span class="orange">오렌지</span>
</div>

"*" : 전체 선택자, 모든 요소를 선택

/* main.css */
<style>
  * {
    color: red;
  }
</style>

/*적용 대상 : 모든 코드*/

ABC : 태그 선택자(Type Selector), 태그 이름이 ABC인 요소 선택

  li {
    color: red;
  }

/*적용 대상 : 
	<li>사과</li>
    <li>딸기</li>
    <li id="orange" class="orange">오렌지*/

.ABC : 클래스 선택자(Class Selector), HTML class 속성의 값이 ABC인 요소 선택

  .orange {
    color: red;
  }

/* 적용 대상
<li id="orange" class="orange">오렌지</li>
<span class="orange">오렌지</span>
*/

#ABC : 아이디 선택자(ID Selector), HTML id 속성의 값이 ABC인 요소 선택

  #orange {
    color: red;
  }

/*적용 대상
<li id="orange" class="orange">오렌지</li>
*/

3-2. 복합 선택자

<div>
  <ul>
    <li>사과</li>
    <li>딸기</li>
    <li id="orange" class="orange">오렌지</li>
    <li>망고</li>
    <li>사과</li>
  </ul>
  <div>당근</div>
  <p>토마토</p>
  <span class="orange">오렌지</span>
</div>
<span class="orange">오렌지</span>

ABCXYZ : 일치 선택자(Basic Combinator), 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택
tag선택자를 사용해야 한다면 항상 맨 앞에 적고 뒤에 id나 class 선택자를 사용해야한다.

  span.orange {
    color: red;
  }

/*
적용 대상
<span class="orange">오렌지</span>
<div>
<span class="orange">오렌지</span>
*/

ABC > XYZ : 자식 선택자(Child Combinator), 선택자 ABC의 자식요소 XYZ 선택

  ul > .orange {
    color: red;
  }

/*
적용 대상
<li id="orange" class="orange">오렌지</li>
*/

ABC XYZ : 하위(후손) 선택자(Descendant Combinator), 선택자 ABC의 하위요소 XYZ선택
'띄어쓰기'가 선택자의 기호! (공백문자)

<style>
  div .orange {
    color: red;
  }

/* 적용 대상
<li id="orange" class="orange">오렌지</li>
<span class="orange">오렌지</span>

<div> 밖에 있는  <span class="orange">오렌지</span>는 적용 대상이 아니다!
*/

ABC + XYZ :인접 형제 선택자(Adjacent Sibling Combinator), 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택

  .orange + li {
    color: red;
  }

/*
적용 대상
<li>망고</li>
*/

ABC ~ XYZ : 일반 형제 선택자(General Sibling Combinator), 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택

  .orange ~ li {
    color: red;
  }

/* 
적용 대상
<li>망고</li>
<li>사과</li>
*/

3-3. 가상 클래스 선택자

우리가 어떠한 행동을 했을 때 동작하는 개념, ":" 를 사용한다.

<div class="box"></div>

  .box {
    width: 100px;
    height: 100px;
    background-color: orange;
    transition: 1s;
  }
  .box:hover {
    width: 300px;
    background-color: royalblue;
  }

ABC:hover : 선택자 ABC요소에 마우스 커서가 올라가 있는 동안 선택

<a href="https://www.naver.com">NAVER</a>

  a:hover {
    color: red;
  }

ABC:active : 선택자 ABC요소에 마우스를 클릭하고 있는 동안 선택

<a href="https://www.naver.com">NAVER</a>

a:active {
  color: red;
}

ABC:focus : 선택자 ABC요소가 포커스 되면 선택
Focus가 될 수 있는 요소는 HTML 대화형 콘텐츠가 해당된다.
INPUT, A , BUTTON, LABEL, SELECT 등 여러 요소가 있으며 tabindex 속성을 사용한 요소도 FOCUS가 가능하다. tabindex="-1"을 추가해주면 동작이 가능해진다.

<div class="box" tabindex="-1"></div>
<input type="text" />

  input:focus {
    background-color: orange;
  }
  .box:focus {
    width: 300px;
    background-color: royalblue;
  }

ABC:first-child : 선택자 ABC가 형제 요소 중 첫째라면 선택.

<div class="fruits">
  <span>딸기</span>
  <span>수박</span>
  <div>오렌지</div>
  <p>망고</p>
  <h3>사과</h3>
</div>

  .fruits span:first-child {
    color: red;
  }
/*
적용 대상
<span>딸기</span>
*/

ABC:last-child : 선택자 ABC가 형제 요소 중 막내라면 선택.

<div class="fruits">
  <span>딸기</span>
  <span>수박</span>
  <div>오렌지</div>
  <p>망고</p>
  <h3>사과</h3>
</div>

  .fruits h3:last-child {
    color: red;
  }

/*
적용 대상
<h3>사과</h3>
*/

ABC:nth-child(n) : 선택자 ABC가 형제 요소 중 (n)째라면 선택.
여러 경우를 만들 수 있다. ex) 숫자, 2n(2의 배수), 2n+1(홀수)...

<div class="fruits">
  <span>딸기</span>
  <span>수박</span>
  <div>오렌지</div>
  <p>망고</p>
  <h3>사과</h3>
</div>

<!-- 1. 숫자-->
.fruits *:nth-child(2) {
  color: red;
}

</*
적용 대상
<span>수박</span>

/*------------------*/

/* 2. 배수*/
  .fruits *:nth-child(2n) {
    color: red;
  }

/*
적용 대상
<span>수박</span>
<p>망고</p>
*/

/*-------------------------*/

/* 3. 홀수*/
  .fruits *:nth-child(2n+1) {
    color: red;
  }

/*
적용 대상
<span>딸기</span>
<div>오렌지</div>
<h3>사과</h3>
*/

ABC:not(XYZ) : 선택자 XYZ가 아닌 ABC 요소 선택

<div class="fruits">
  <span>딸기</span>
  <span>수박</span>
  <div>오렌지</div>
  <p>망고</p>
  <h3>사과</h3>
</div>

  .fruits *:not(span) {
    color: red;
  }

/*
적용 대상
<div>오렌지</div>
<p>망고</p>
<h3>사과</h3>
*/

3-4. 가상요소 선택자

<div class="box">

  Content!

</div>

가상의 요소를 만들어서 삽입을 할 수 있다., "::" 를 사용한다.

ABC::before : 선택자 ABC요소의 내부 앞에 내용(Content)을 삽입

  .box::before {
    content: "앞!";
  }

/*
결과 
앞! Content!
*/

ABC::after : 선택자 ABC요소의 내부 뒤에 내용(Content)을 삽입

  .box::after {
    content: "뒤!";
  }

/*
결과
Content! 뒤!
*/

3-5. 속성 선택자

<input type="text" value="HEROPY">
<input type="password" value="1234">
<input type="text" value="ABCD" disabled>

[ABC] : 속성 ABC을 포함한 요소 선택

[disabled] {
  color: red;
}

/*
적용 대상 
<input type="text" value="ABCD" disabled>
*/

  [type] {
    color: red;
  }

/*
적용 대상 
<input type="text" value="HEROPY">
<input type="password" value="1234">
<input type="text" value="ABCD" disabled>
*/

[ABC="XYZ"] : 속성 ABC을 포함하고 값이 XYZ인 요소 선택.

  [type="password"] {
    color: red;
  }

/*
적용 대상 
<input type="password" value="1234">
*/

4. 스타일 상속

<div class="ecosystem">생태계
  <div class="animal">동물
    <div class="tiger">호랑이</div>
    <div class="lion">사자</div>
    <div class="elephant">코끼리</div>
  </div>
  <div class="plant">식물</div>
</div>

  .animal {
    color: red;
  }

/*
동물
호랑이   -- 상속
사자	    -- 상속
코끼리	-- 상속
*/

글자(문자)와 관련된 CSS속성의 값이 자동으로 상속된다. (인라인)

상속되는 CSS 속성들 : 모두 글자/문자 관련 속성들!(모든 글자/문자 속성은 아니다)

font-style : 글자 기울기

font-weight : 글자 두께

font-size : 글자 크기

line-height : 줄 높이

font-family : 폰트(서체)

color : 글자 색상

text-align : 정렬

강제 상속 : inherit을 사용하여 상속되지 않는 속성을 강제로 상속시킬 수 있다.

<div class="parent">
  <div class="child"></div>
</div>

  .parent {
    width: 300px;
    height: 200px;
    background-color: red;
  }
  .child {
    width: 100px;
    height: inherit;
    background-color: orange;
  }

5. 선택자 우선순위

우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법이다.

점수가 높은 선언이 우선된다.
점수가 같으면, 가장 마지막에 해석된 선언이 우선된다.

!important : 무한대
인라인 : 1000점(쓸데없이 점수가 높으므로 사용하지 말것)
(#)id 선택자 : 100점
(.)class 선택자 : 10점
tag 선택자 : 1점
★ 선언이 여러개가 됐을 경우 모든 점수를 합산하여 계산하면 된다.

변승훈

잘 할 수 있는 개발자가 되기 위하여

이전 포스트

7일차 (1) HTML

다음 포스트

7일차 (2) CSS 개요

KDT 핀테크 프론트엔드 개발자 2기 배운 내용

1. 기본 문법, 주석

1-1. 선택자 {속성: 값;}

1-2. 주석

2. CSS 선언 방식

2-1. 내장 방식

2-2. 링크 방식

2-3. 인라인 방식

2-4. @import 방식

3. CSS 선택자

3-1. 기본 선택자

3-2. 복합 선택자

3-3. 가상 클래스 선택자

3-4. 가상요소 선택자

3-5. 속성 선택자

4. 스타일 상속

5. 선택자 우선순위

7일차 (1) HTML

8일차 CSS 특성(1)

0개의 댓글