7일차 (2) CSS 개요

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 sytle="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 -->
* {
  color: red;
}

<!--적용 대상-->
모든 코드
  • ABC : 태그 선택자(Type Selector), 태그 이름이 ABC인 요소 선택
<!-- main.css -->
li {
  color: red;
}

<!--적용 대상-->
<li>사과</li>
<li>딸기</li>
<li id="orange" class="orange">오렌지</li>
  • .ABC : 클래스 선택자(Class Selector), HTML class 속성의 값이 ABC인 요소 선택
<!-- main.css -->
.orange {
  color: red;
}

<!--적용 대상-->
<li id="orange" class="orange">오렌지</li>
<span class="orange">오렌지</span>
  • #ABC : 아이디 선택자(ID Selector), HTML id 속성의 값이 ABC인 요소 선택
<!-- main.css -->
#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 선택자를 사용해야한다.
<!-- main.css -->
span.orange {
  color: red;
}

<!--적용 대상-->
<span class="orange">오렌지</span>
<!-- <div> 밖 -->
<span class="orange">오렌지</span>
  • ABC > XYZ : 자식 선택자(Child Combinator), 선택자 ABC의 자식요소 XYZ 선택
<!-- main.css -->
ul > .orange {
  color: red;
}

<!--적용 대상-->
<li id="orange" class="orange">오렌지</li>
  • ABC XYZ : 하위(후손) 선택자(Descendant Combinator), 선택자 ABC의 하위요소 XYZ선택
    '띄어쓰기'가 선택자의 기호! (공백문자)
<!-- main.css -->
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 하나를 선택
<!-- main.css -->
.orange + li {
  color: red;
}

<!--적용 대상-->
<li>망고</li>
  • ABC ~ XYZ : 일반 형제 선택자(General Sibling Combinator), 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택
<!-- main.css -->
.orange ~ li {
  color: red;
}

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

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

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

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

<!--main.css-->
.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>

<!-- main.css -->
a:hover {
  color: red;
}
  • ABC:active : 선택자 ABC요소에 마우스를 클릭하고 있는 동안 선택
<a href="https://www.naver.com">NAVER</a>

<!-- main.css -->
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" />

<!-- main.css -->
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>

<!-- main.css -->
.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>

<!-- main.css -->
.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>

<!-- main.css -->
<!-- 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>

<!-- main.css -->
.fruits *:not(span) {
  color: red;
}

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

3-4. 가상요소 선택자

<div class="box">

  Content!

</div>

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

  • ABC::before : 선택자 ABC요소의 내부 앞에 내용(Content)을 삽입
<!-- main.css -->
.box::before {
  content: "앞!";
}

<!-- 결과 -->

앞! Content!
  • ABC::after : 선택자 ABC요소의 내부 뒤에 내용(Content)을 삽입
<!-- main.css -->
.box::after {
  content: "뒤!";
}

<!-- 결과 -->

Content! 뒤!

3-5. 속성 선택자

<input type="text" value="HEROPY">
<input type="password" value="1234">
<input type="text" value="ABCD" disabled>
  • [ABC] : 속성 ABC을 포함한 요소 선택
<!-- main.css -->
[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인 요소 선택. 
<!-- main.css -->
[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>

<!-- main.css -->
.animal {
  color: red;
}

<!-- 적용 대상 -->
동물
호랑이   -- 상속
사자	    -- 상속
코끼리	-- 상속
  • 글자(문자)와 관련된 CSS속성의 값이 자동으로 상속된다. (인라인)
  1. 상속되는 CSS 속성들 : 모두 글자/문자 관련 속성들!(모든 글자/문자 속성은 아니다)
  • font-style : 글자 기울기
  • font-weight : 글자 두께
  • font-size : 글자 크기
  • line-height : 줄 높이
  • font-family : 폰트(서체)
  • color : 글자 색상
  • text-align : 정렬
  1. 강제 상속 : inherit을 사용하여 상속되지 않는 속성을 강제로 상속시킬 수 있다.
<div class="parent">
  <div class="child"></div>
</div>

<!-- main.css -->
.parent {
  width: 300px;
  height: 200px;
  background-color: red;
}
.child {
  width: 100px;
  height: inherit;
  background-color: orange;
}

5. 선택자 우선순위

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

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

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

[프로그래머스] Lv.2 땅따먹기 (Swift) 문제풀이
BOJ #1092

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage