CSS 개요 - 문법, 선택자 등

[패스트캠퍼스] React& Redux로 시작하는 웹 프로그래밍 강의 수강 1주차(6)

CSS 개요

CSS 기본 문법

선택자 { 속성: 값; 속성: 값; }
*선택자란? 스타일을 적용할 대상(Selector)
*속성이란? 스타일의 종류(Property)
*값이란? 스타일의 값(Value)

 

주석 (단축키: Ctrl+/)

/* 설명 작성 */

 

CSS 선언 방식

1. 내장 방식
<style></style>의 내용(Contents)으로 스타일을 작성하는 방식. HTML 문서에 직접 사용하기 때문에 CSS 파일을 사용X.
그러나 유지, 보수 측면에서 권장하지 않음.

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

2. 인라인 방식
요소의 style 속성에 직접 스타일을 작성하는 방식(선택자 없음). 인라인 방식은 지나치게 우선하기 때문에(유지, 보수 측면에서) 권장하지 않음.

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

3. 링크 방식
<link />로 외부 CSS 문서를 가져와서 연결하는 방식. 병렬로 연결되며, 가장 많이 사용되는 방식. 아래 차례로 html, main.css

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

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

4. @import 방식
CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식. 직렬로 연결되는 방식이므로 연결을 지연시키는 목적으로 사용됨. 아래 차례로 html, main.css, box.css

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

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

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

.box {
  background-color: red;
  padding: 20px;
}

 

선택자

1. 기본 선택자

1) 전체 선택자(Universal Selector)
*
모든 요소를 선택함.

* {
  color: red;
} /* html의 모든 요소가 선택됨. */

 

2) 태그 선택자(Type Selector)
태그 이름
해당 태그를 선택함.

li {
  color: orange;
} /* <li></li>태그에 해당하는 요소가 선택됨. */

 

3) 클래스 선택자(Class Selector)
.클래스이름
HTML class 속성의 값 이름에 해당하는 요소를 선택함.

<div class="fruits">오렌지</div>
<span class="fruits">사과></span> <!-- class는 중복 가능 -->

.fruits {
  color: red;
} /* HTML에서 class이름이 fruits에 해당하는 요소들이 선택됨. */

 

4) 아이디 선택자(ID Selector)
#아이디이름
HTML id 속성의 값 이름에 해당하는 요소를 선택함.

<div id=apple>사과</div> <!-- id는 중복할 수 없음. -->

#apple {
  color: red;
} /* HTML에서 id이름에 해당하는 요소가 선택됨. */

 

2. 복합 선택자

1) 일치 선택자(Basic Combinator)
띄어쓰기 없이 2가지 선택자를 이어서 씀.
선택자 2가지를 동시에 만족하는 요소를 선택함.
주의) 전체 선택자 > 태그 선택자 > 클래스 선택자 > id 선택자 순으로 적는 것을 권장.

<span class="orange">오렌지</span>

span.orange {
  color: red;
} /* HTML에서 span 태그와 orange 클래스를 동시에 만족하는 요소를 찾아 선택함. */

 

2) 자식 선택자(Child Combinator)
선택자 > 선택자
선택자의 자식 요소를 선택함.

<ul>
  <li>사과</li>
  <li class="orange">오렌지</li>
</ul>

ul > .orange {
  color: red;
} /* ul 선택자의 자식 중 orange 클래스를 가진 요소를 선택함. */

 

3) 하위(후손) 선택자(Descendant Combinator)
선택자 선택자
선택자의 하위 요소(선택자)를 선택함. 띄어쓰기 이용. 일반적으로 하위 선택자를 많이 이용.

<div>
  <ul>
    <li class="apple">사과</li> <!-- 선택됨 -->
  </ul>
  <span class="apple">사과</span> <!-- 선택됨 -->
</div>
<span class="apple">사과</span> <!-- 선택 안됨 -->

div .apple {
  color: red;
} /* div의 하위 요소 중 apple 클래스 이름을 가진 요소를 선택함. */

 

4) 인접 형제 선택자(Adjacent Sibling Combinator)
선택자 + 선택자
선택자의 다음 형제 요소 "하나"를 선택함.

<ul>
  <li>딸기</li>
  <li class="orange">오렌지</li>
  <li>망고</li> <!-- 선택됨 -->
  <li>사과</li>
</ul>

.orange + li {
  color: red;
} /* orange 클래스의 바로 다음 li인 망고가 선택됨 */

 

 

5) 일반 형제 선택자(General Sibling Combinator)
선택자 ~ 선택자
선택자의 다음 형제 요소를 "모두" 선택함.

<ul>
  <li>딸기</li>
  <li class="orange">오렌지</li>
  <li>망고</li> <!-- 선택됨 -->
  <li>사과</li> <!-- 선택됨 -->
</ul>

.orange ~ li {
  color: red;
} /* orange 클래스 다음의 모든 li 태그 요소를 선택함. */

 

3. 가상 클래스 선택자

---

동작에 관한 가상 클래스 선택자

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

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

a:hover {
  color: red;
} /* a태그에 마우스를 올렸을 때 스타일이 적용됨 */

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

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

a:active {
  color: red;
} /* a태그가 클릭되었을 때 스타일이 적용됨 */

3) 선택자:focus
선택자 요소가 포커스 되면 선택됨.
*focus가 될 수 있는 요소는 HTML 대화형 콘텐츠(input, a, button, label, select 등)

<input type="text />

input:focus {
  background-color: red;
} /* input 요소에 입력 커서를 넣게 되면(focus) 스타일이 적용됨 */

*tabindex 속성을 사용한 요소도 focus 될 수 있음.
*tabindex: tab키를 사용해 focus 할 수 있는 순서를 지정하는 속성. -1 값 이외에는 권장하지 않음.

<div class="box" tabindex="-1"></div> <!-- tabindex를 이용해 focus 적용 -->
<input type="text />

.box:focus {
  width: 300px;
  background-color: blue;
} /* div요소인 box 클래스에 focus 적용 */

input:focus {
  background-color: orange;
}

---

요소에 관한 가상 클래스 선택자

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

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

.fruits span:first-child { /* fruits 클래스 하위 요소 중(하위 선택자) span태그와 일치하는(일치선택자) 첫째 자식을 선택 */
  color: red;
}

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

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

.fruits h3:last-child { /* fruits 클래스 하위 요소 중(하위 선택자) h3태그와 일치하는(일치 선택자) 막내를 선택함. */
  color: red;
}

3) 선택자:nth-child(n)
선택자가 형제 요소 중 n째라면 선택.

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

.fruits *:nth-child(2) { /* fruits 클래스 하위 요소 중(하위 선택자) 전체 선택자 중(일치 선택자) 2번째 자식을 선택함. */
  color: red;
}

*(n)에 n을 사용할 수 있음. 이때 n은 0부터 시작함.

.fruits *:nth-child(2n) { /* 이때 n은 0부터 시작. 2n은 짝수번째를 선택하게 됨. */
  color: red;
]

.fruits *:nth-child(2n+1) { /* 홀수번째 자식들을 선택하게 됨. */
  color: red;
}

4) 부정선택자 선택자:not("선택자")
"선택자"가 아닌 요소를 선택함.

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

.fruits *:not(span) { /* fruits 클래스의 하위 요소 중(하위 선택자) 전체 선택자 중(일치 선택자) span태그 요소를 제외하고 선택함. */
  color: red;
}

 

4. 가상 요소 선택자

1) 선택자::before
가상의 인라인(글자) 요소를 만들어서 선택자 요소 내부의 가장 앞에 내용을 삽입함.

<div class="box">
  <!-- 이 부분에 삽입됨. -->
  Content!
  
</div>

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

2) 선택자::after
선택자 요소 내부의 가장 뒤에 내용을 삽입함.

<div class="box">
  
  Content!
  <!-- 이 부분에 삽입됨. -->
</div>

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

*before/after를 사용할 때는 반드시 content CSS속성을 사용해야 함.(비워두더라도)

 

5. 속성 선택자

1) [속성]
속성을 포함한 요소 선택함. 특이한 속성값을 찾을 때는 유용하지만, 일반적으로 사용되지는 않음.

<input type="text value="hello">
<input type="password" value="1234">
<input type="text value="ABCD" disabled> <!-- disabled 속성을 가진 태그에 스타일이 적용됨 -->

[disabled] {
  color: red;
}

2) [속성="값"]
속성을 포함하고, 값이 일치하는 요소를 선택함.

<input type="text value="hello">
<input type="password" value="1234"> <!-- 선택됨 -->
<input type="text value="ABCD" disabled>

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

 

스타일 상속

.animal {
  color: red;
}

<div class="ecosystem">생태계
  <div class="animal">동물 <!-- 적용됨 -->
    <div class="tiger">호랑이</div> <!-- 적용됨(상속) -->
    <div class="lion">사자</div> <!-- 적용됨(상속) -->
    <div class="elephant">코끼리</div> <!-- 적용됨(상속) -->
  </div>
  <div class="plant">식물</div>
</div>

출력시 다음과 같은 형태.

생태계 동물 호랑이 사자 코끼리 식물

*모든 속성이 자동으로 상속되지는 않음.

상속되는 CSS 속성: 모두 글자/문자 관련 속성들 일부.

font-style	글자 기울기
font-weight	글자 두께
font-size	글자 크기
line-height	줄 높이
font-family	폰트(서체)
color	글자 색상
text-align	정렬

*강제 상속 inherit
속성: inherit;
자동으로 상속되지 않는 속성들(글자/문자 관련 속성 이외)에 강제로 상속할 때 사용하며, 부모의 스타일이 자식에 강제로 상속됨.

.parent {
  width: 300px;
  height: 200px;
  background-color: orange;
}

.child {
  width: inherit; /* 300px이 됨. */
  height: inherit; /* 200px이 됨. */
  background-color: inherit; /* orange가 됨. */
}

 

선택자 우선순위

우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법
1. !important -> 사용 권장X
2. 인라인 선언인 경우 -> 사용 권장X
3. 복합 선택자(?)
4. ID 선택자
5. Class 선택자
6. 태그 선택자
7. 전체 선택자
*같은 우선 순위라면, 더 나중에 작성된 코드가 우선함.