[01] CSS/CSS3 소개 & 선택자

🎨 CSS/CSS3란?

CSS(Cascading Style Sheet)의 약자로, '(폭포처럼) 위에서 아래로 흐르는 스타일시트'라는 뜻입니다. 웹 문서에 미리 만들어진 스타일 속성을 입력하여 웹 페이지를 디자인하는 것을 스타일이라고 하며, 스타일이 사용된 문서에서 반복되는 스타일들을 모아 놓은 것을 '스타일시트'라고 합니다.

CASCADE

cascading은 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙입니다. cascading은 폭포가 내려오는 모양처럼 단계적인 이라는 의미를 지니며, 모든 스타일 규칙들은 cascading의 단계적인 규칙에 따라 요소에 적용됩니다.

CASCADING규칙
모든 스타일은 아래의 규칙에 따라 단계적으로 적용됩니다.

1. 스타일 규칙들을 모아서 중요도(!important)가 명시적으로 선언되었는지에 따라 분류합니다.

중요도가 명시적으로 선언된 규칙들은 그렇지 않은 규칙들보다 우선합니다.

중요도가 있는 규칙들끼리는 아래 다른 규칙들을 적용받습니다.

스타일 규칙들을 출처에 따라 분류합니다.

제작자 스타일 규칙이 사용자 에이전트 스타일 규칙보다 우선합니다.

스타일 규칙들을 구체성에 따라 분류합니다.

구체성이 높은 규칙들이 우선합니다.

스타일 규칙들을 선언 순서에 따라 분류합니다.

뒤에 선언된 규칙일수록 우선합니다.
<style>
  p{color:red;}
  p{color:blue;} /* blue color가 적용됨 */
</style>
<p>HELLO WORLD!</p>

상속Inheritance

상속은 자연스러운 현상처럼 보이지만, 모든 속성이 다 상속되는 것은 아님.
margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다.

1. CSS의 기본구조

기본 사용법 : 선택자 {속성명:속성값;}
- 선택자 Selector: 스타일을 적용하고 싶은 대상
- 선언문 Declaration, { } : 적용할 스타일을 이 안에 적어야 한다.
- 속성 Property/Attribute: 어떤 스타일에 대해 정의할지 지정한다.
- 속성값 Value: 실제 정의한 값
📌 NOTE 📌
속성명 뒤에는 콜론(:), 속성값 뒤에는 세미콜론(;)이 온다.
맨 마지막 세미콜론은 생략가능하다.

2. CSS선택자

- 타입, ID, CLASS 선택자 🎨

태그 선택자: html 태그를 선택하여 스타일을 적용한다.
body{margin:0; padding:0;}

id 선택자: id속성으로 묶은 부분만 스타일을 적용하는 id 선택자. id이름은 중복될 수 없음.
#id{color: red;}

class 선택자: class 속성으로 묶은 특정 부분만 스타일을 적용하는 선택자. class이름은 중복가능

.class{color: blue;}

- 속성 선택자 🎨

a[href]{} a태그 중에 href 속성이 있는 요소를 모두 선택

<style>
  a[href]{color:white; background-color:coral;}
</style>
<a href="https://www.naver.com/" title="naver" target="_blank">네이버</a>   
<a href="https://www.google.com/" title="google" target="_blank">구글</a>
<a>다음</a>
<a>네이트</a>

a[href="hello"]{} href의 속성값이 "hello"인 a태그만 선택

<style>
   a[href="https://www.google.com/"]{ color:white; background-color:coral; text-decoration: none;}
</style>
<a href="https://www.naver.com/" title="naver" target="_blank">네이버</a>
<a href="https://www.google.com/" title="google" target="_blank">구글</a> 
<a>다음</a>
<a>네이트</a>

a[href*="www"]{} href 속성값에 "www"가 포함된 a태그만 선택

<style>
  a[href*="a"]{ border:1px solid #ccc; }
</style>
<a href="https://www.naver.com/" title="naver" target="_blank">네이버</a>
<a href="https://www.google.com/" title="google" target="_blank">구글</a>
<a href="https://www.daum.net">다음</a><!--선택-->
<a>네이트</a>

a[href^="www"]{} href가 "www"로 시작하는 a태그만 선택

<style>
  a[href^="https"]{ color:white; background-color:coral;}
</style>
<a href="https://www.naver.com/" title="naver" target="_blank">네이버</a>
<a href="https://www.google.com/" title="google" target="_blank">구글</a>
<a href="https://www.daum.net">다음</a><!--선택-->
<a>네이트</a>

a[href$=".com"]{} href가 ".com"으로 끝나는 a태그만 선택한다.

<style>
  a[href$=".net"]{ color:mediumvioletred; }
</style>
<a href="https://www.naver.com/" title="naver" target="_blank">네이버</a
<a href="https://www.google.com/" title="google" target="_blank">구글</a>
<a href="https://www.daum.net">다음</a>
<a>네이트</a>

- 연결 선택자 🎨

div div{} div 요소의 자손인 div를 선택하겠다는 의미

<style>
  h2{}   /* html문서의 모든 h2에게 스타일을 준다 */
  div h2{color:red;}  /* "div 하위의 h2에게만" 스타일을 준다 */
</style>
<h2>div 바깥의 h2</h2>
<div>
  <h2>div 내부의 h2</h2>
</div>

div > p{} div 요소의 바로 아래 자식 요소인 p 선택하기 (특정 부모와 특정 자식을 선택하기)

<style>
  div > p{color:red;} /* div의 자식요소인 p에게만 스타일을 주겠다는 의미 */
</style>
<p>여기는 color 변경 안됨</p>
<div>
   <p>  이 곳에 있는 p만 선택되어 스타일이 적용됨</p>
</div>
<p>여기는 color 변경 안됨</p>

div + p {} div 요소의 가장 가까운 형제요소인 p 요소만 선택하겠다는 의미

<style>
  div + p{ color: pink;}
<style>
<div>
  <p>얘는 div의 자식요소기 때문에 스타일변경 안됨</p>
</div>
<p> 형제1 </p>
<p> 형제2 </p> 
<p> 형제3 </p>

div ~ p{} div 요소의 형제요소 중 p가 있으면 모두 선택하겠다는 의미

<style>
  div ~ p {color:blue; font-weight: bold; font-size: large;}
</style>
<!-- div의 자식요소인 p는 CSS 변경x -->
<div>
  <h2>div 내부의 h2</h2>
  <p>div 내부의 p</p>                
</div>
<!-- div요소의 형제요소인 p이므로 스타일속성 변경됨-->
<p>갤럭시</p>                
<p>아이폰</p>  
<p>윈도우폰</p>

- 가상 선택자 🎨

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

선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태일 때만 만족하는 조건하는 조건이라고 할 수 있다. 종류가 무척 많고, 브러우저 호환성에 차이가 많으며 자주 사용하는 것을 제외하고는 학습을 서두를 필요X

가상 선택자의 종류

:hover{} - 요소에 마우스를 올렸을때
:active{} - 요소를 활성화했을 때 (마우스 클릭한 상태 or 키보드 타이핑상태)
:focus{} - 요소에 실행 흐름에 초점이 맞춰져있는 상태. (요소에 키보드가 진입할 때. 키보드 tab키를 눌러서 요소에 dotted box가 선택된 상태)

<style>
  a:hover {color:red;}
  a:active {color:purple;}
  a:focus {font-size:20px;}
</style>
<a href="#">TEST1</a>
<a href="#">TEST2</a>
<a href="#">TEST3</a>
<a href="#">TEST4</a>
<a href="#">TEST5</a>

<style>
  #chk:checked + label{ background: red; color:#fff; }
  input:focus{background-color: teal;}
  input:disabled{background-color: grey; }
  input:read-only{background-color: lightgrey;}
  input:required{ border:2px solid blue;}
  input:required:invalid{ border:2px solid red;}
</style>
<input type="checkbox" name="test" id="chk"><label for="chk">체크</label><br>
<input type="text" id="txt" placeholder=":focus 상태"><br>
<input type="text" id="t2" placeholder=":disable 상태" disabled><br>
<input type="text" id="t3" placeholder=":readonly 상태" readonly><br>
<input type="text" id="t4" placeholder=":required 상태" required><br>

가상 선택자의 종류

:before{}, :after() - 선택한 요소의 앞/뒤에 내용을 추가한다.

before나 after는 인라인요소임 (span요소처럼 생각하면 됨)
해당 선택자 뒤에는 반드시 content=""; 를 써주어야 함.
일반적인 열고 닫을 수 있는 요소들에만 적용가능하며 (div, li 등), 다음과 같은 요소들에는 :before()나 :after()가 적용안됨 (img, br, hr, form요소, select, textarea 등)

<style>
  .sel:after {content:"2"}   /* 클래스명 sel인 div요소 뒤에 숫자 2를 붙임 */
  .sel:after {content:"1"}   /* 클래스명 sel인 div요소 앞에 숫자 1를 붙임 */
</style>
<div class="sel"> test </div>

<style>
  .after li::before{ content:"시작내용 => "; color: red;} 
  .after li::after{ content:" <= 끝나는 내용"; color: red;} 
</style>
<ol class="after">
    <li>감사위원은 원장의 제청으로 대통령이 임명하고, 그 임기는 4년으로 하며, 1차에 한하여 중임할 수 있다.</li>
    <li>모든 국민은 소급입법에 의하여 참정권의 제한을 받거나 재산권을 박탈당하지 아니한다.</li>
    <li>대통령은 법률이 정하는 바에 의하여 훈장 기타의 영전을 수여한다.</li>
    <li>모든 국민은 법 앞에 평등하다. 누구든지 성별·종교 또는 사회적 신분에 의하여 정치적·경제적·사회적·문화적 생활의 모든 영역에 있어서 차별을 받지 아니한다.</li>
</ol>

::before, ::after 활용 예제

<style>
ul{
  padding:0; margin:0;
  list-style: none;
  width: 1000px;
  background: #ddd; 
  box-sizing: border-box;
  font-size: 0;
}
ul li{
  padding:0;
  width: calc(1000px / 4); 
  height: 50px;
  display: inline-block;
  text-align: center;
}
ul li a{
  display:block;
  color: black; 
  font-size: 16px;
  line-height: 50px; 
  text-decoration: none;
}
ul li a::after{
  content: '|';
  float:right; 
/*   display:block; */
}
ul li:last-child a::after{
  content:'';
}
</style>
<ul>
  <li><a href="#">HOME</a></li>
  <li><a href="#">회사소개</a></li>
  <li><a href="#">QnA</a></li>
  <li><a href="#">오시는길</a></li>
</ul>

가상 선택자의 종류

:nth-of-type{} - 요소들 중에 몇번째 요소에 있는 지를 선택. (아래 예문참고)
:first-of-type
:last-of-type
:nth-last-of-type

<style>
  /* 클래스명 sel인 div의 ul중 '첫번째 타입에만' border속성변경 */
  .sel ul:first-of-type{ border:1px solid red; }   
  /* 클래스명 sel인 div의 ul중 '마지막 타입에만' border속성변경 */
  .sel ul:last-of-type{ border:1px solid red; }   
  /* 클래스명 sel인 div의 ul중 '4번째만' border속성변경 */
  .sel ul:nth-of-type(4){ border:1px solid yellow; }   
  /* 클래스명 sel인 div의 ul중 '마지막으로부터 n번째만' border속성변경 */
  .sel ul:nth-last-of-type{ border:1px solid red; }   
</style>
<div class="sel">
  <span> 1 </span>
  <ul>
     <li> 2 </li>
     <li> 3 </li>
  </ul>
  <p> 4 </p>
  <div> 5 </div>
  <ul>
     <li> 6 </li>
     <li> 7 </li>
     <li> 8 </li>
  </ul>
</div>

가상 선택자의 종류

:checked input요소와 함께 쓰이는 선택자. 해당 form요소가 선택된 상태일때, 어떻게 변경할 것인지 지정

<style>
  .chk input { margin:0; }
  /* 체크박스를 선택하면, input값의 margin 변경 */
  .chk input:checked { margin:30px; }    
  /* 체크박스를 선택하면, input의 형제요소인 label의 색상변경 */
  .chk input:checked + label {color:blue;} 
  /* 체크박스를 선택하면, input의 형제요소인 label 앞에 v라는 텍스트가 붙게 됨 */
  .chk input:checked + label:before{content="v"} 
</style>
<div class="chk">
  <input type="checkbox" id="a1"><label for="a1">체크박스1</label>
  <input type="checkbox" id="a2"><label for="a1">체크박스2</label>
</div>

:empty 해당 요소가 비어있을때, 어떻게 변경할 것인지 지정

<style>
 table td:empty{ background-color: #ccc; }  /*테이블의 td가 없을 때 배경색을 회색으로 바꿈*/
</style>
<table>
  <tr>
     <td>빨</td>
     <td>주</td>
     <td>노</td>
     <td>초</td>
  </tr>
  <tr>
     <td>파</td>
     <td>남</td>
     <td>보</td>
     <td></td>    /*여기가 비어있으니 배경색상이 변경됨 */
  </tr>
</table>

가상 선택자의 종류

::selction - 드래그했을때 요소를 강조하기 위해 사용 (color, background-color, text-decoration, text-shadow만 가능)

::placeholder - placeholder 디자인도 바꿀 수 있음

3. 선택자 우선순위

중요도 : inline style > #id > .class > 태그 선택자

전체 선택자 *{color:#fff;}

태그 선택자 p{color:red;}

class 선택자 .class명 {color:red;}

id 선택자 #id명 {color:red;}

그룹 선택자 h1,h2,h3{color:red;}

인라인스타일 <div style="font-size:10px;">text</div>

절대값(최고값) *{color:#fff !important;}

📌 NOTE:

*(별표, asterisk) 기호로 문서 내에 모든 요소를 선택할 수 있습니다.
이렇게 선언하면, 한 번의 선언만으로 문서 내에 모든 요소에 스타일 규칙이 적용됩니다.
다만 전체 선택자는 매우 편리하지만, 성능에 좋지 않으므로 사용을 지양합니다.

선택자가 중복되는 코드가 있는 경우, 마지막에 작성된 코드가 적용된다. (CASCADE규칙)

CSS의 주석은 /*로 시작하여 */로 끝난다

!important;는 사용하지 않습니다.

4. CSS를 적용하는 방법

1) Inline style
HTML 요소에 직접 CSS를 제공하는 방법이다.
<h2 style="color:darkolivegreen">HELLO WORLD!</h1>

2) Internal style
페이지의 <head> 요소 안에 CSS를 제공하는 방법이다.
<style>
  h1{color:red;}
</style>

3) External style
외부 스타일시트 파일을 <link>요소로 연결하는 방식이다. (권장)
<link rel="stylesheet" href="위치경로지정" type="text/css">

4) Import style
CSS파일 또는 요소 안에 CSS파일을 include하는 방식이다. (권장)
@import url('default.css');

📖 REFERENCE

DOCS:
- MDN:
  CSS CASCADE(EN)
  CSS CASCADE AND INHERITANCE(EN)
  HOW CSS IS STRUCTURED(EN)
  CSS 가상클래스/의사클래스
  CSS PSEUDO-CLASS AND PSEUDO-ELEMENTS(EN)
- W3SCHOOL: HOW TO ADD CSS(EN)
YOUTUBE:
부스트코스
(책) 멘토씨리즈 HTML5+CSS3

Author And Source

이 문제에 관하여([01] CSS/CSS3 소개 & 선택자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sukyoungshin/01CSSCSS3소개

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)