CSS - 선택자, 속성값, Reset CSS

CSS(Cascading Style Sheets)는 HTML 같은 문서를 화면에 어떻게 표현할 것인지를 정의하는 언어다.

Rule Set(구문)

위와 같은 구문을 Rule Set 혹은 Rule이라고 부른다. 이런 Rule Set을 모아둔 시트를 Style Sheet라고 부른다.

 

---

Selector(선택자)

CSS 구문에서 스타일을 적용할 HTML element를 선택하는 부분을 Selector라 부른다.

-HTML 문서 내의 모든 요소를 선택하고 싶다면 * 키워드를 사용할 수 있다. (head 태그와 html 태그도 포함된다.)

-* 키워드를 이용해 상속되지 않는 box-sizing 프로퍼티를 상속시킬 수도 있다.

*, *:before, *after { box-sizing: inherit; }

-HTML element의 태그명, 아이디명, 클래스명, 속성명을 이용할 수 있다.

* {  /* 모든 요소 선택 */
  color: red;
}

p {  /* 태그명이 p인 요소를 선택 */
  color: blue;
}

.class {  /* class명이 class인 요소를 선택 */
  color: green;
}

#id {  /* id명이 id인 요소를 선택 */
  color: gray;
}

a[href] {  /* a 태그 중 href라는 속성을 갖는 태그 */
  color: yellow;
}

input[type="button"] {  /* input 태그 중 type이 button인 태그 */
  background-color: lightgray;
}

-클래스는 여러 element에 중복해서 지정할 수 있으므로, 일종의 키워드처럼 만들어두고 재활용해도 좋다. color-red { color: red } 라는 구문을 만들어두면, 이후 HTML 요소에서 class를 지정하는 것만으로도 색을 지정할 수 있다.

-속성명으로 선택하는 경우 아래와 같은 옵션을 지원한다.

tag[value|="데이터"]:

tag[value~="데이터"]: 해당 데이터-로 시작하는 태그(언어 설정할 때, en-us, en-br처럼 여러 옵션이 있는 경우)

tag[value^="데이터"]: 해당 데이터로 시작하는 태그

tag[value$="데이터"]: 해당 데이터로 끝나는 태그

tag[value*="데이터"]: 해당 데이터를 포함하는 모든 태그

상세는 이쪽

HTML

<input type="text" value="데이터"></input>
<br>
<input type="text" value="데이터-"></input>
<input type="text" value="Lorem ipsum dolor"></input>
<input type="text" value="데이터- Lorem ipsum dolor"></input>
<input type="text" value="Lorem ipsum dolor 데이터-"></input>

<input type="text" value="데이터 Lorem ipsum dolor"></input>
<input type="text" value="Lorem 데이터 ipsum dolor"></input>
<input type="text" value="Lorem ipsum 데이터 dolor"></input>
<input type="text" value="Lorem ipsum dolor 데이터"></input

<input type="text" value="데이터Loremipsumdolor"></input>
<input type="text" value="Lorem데이터ipsumdolor"></input>
<input type="text" value="Loremipsum데이터dolor"></input>
<input type="text" value="Loremipsumdolor데이터"></input>
<input type="text" value="Loremipsumdolor"></input>

CSS

input[value="데이터"] {
  text-emphasis: filled red;
  -webkit-text-emphasis: filled red;
  padding: 10px;
}
input[value|="데이터"] {
  text-decoration: underline;
  text-decoration-color: blue;
  text-decoration-thickness: 5px;
}
input[value~="데이터"] {
  font-weight: bold;
  text-align: right;
}
input[value^="데이터"] {
  color: red;
}
input[value$="데이터"] {
  text-shadow: 1px 1px 2px blue, 0 0
}
input[value*="데이터"] {
  background-color: lightgray; 
}

 

 

-다른 태그와의 관계성을 통해 선택하는 경우도 있다. (Combinator)

-특정 조상을 가진 요소들을 선택할 수도 있다. ancestor child 순으로 나열하면 된다. 이 경우 조상이 부모든 할머니든 증조할아버지든 후손이면 전부 선택된다. (Descendant combinator)

-직계 자손만 선택하고 싶다면 parent > child를 쓰면 된다. (Child combinator)

-같은 자식끼리 있을 때 형 바로 뒤에 오는 동생을 선택하고 싶다면, 형 + 동생으로 선택하면 된다.(Adjacent Sibling Combinator)

이때 둘 사이에 다른 형제가 있어도 된다면 형 ~ 동생(General Sibling Combinator)

<label for="영희네">영희네</label>
<div id="영희네" class="조상">
  <p class="삼촌">삼촌</p>
  <label for="영희부모님">부모</label>
  <ul class="부모" id="영희부모님">
    <li class="자식 첫째">자식1</li>
    <li class="자식 둘째">자식2</li>
    <li class="자식 셋째">자식3</li>
    <li class="자식 넷째">자식4</li>
  </ul>
<hr>
</div>
<label for="철수네">철수네</label>
<div id="철수네" class="조상">
  <p class="삼촌">삼촌</p> 
  <label for="철수부모님">부모</label>
  <ul class="부모">
    <li class="자식 첫째">자식1</li>
    <li class="자식 셋째">자식3</li>
    <li class="자식 넷째">자식4</li>
    <li class="자식 둘째">자식2</li>
  </ul>
</div>

#영희네 {
  color: lightcoral;
}
.조상 > .자식 {  /* 직계가 아니라 적용되지 않는다 */
  text-align: right;
}
.부모 > .자식 {
  background-color: mistyrose;
}
.둘째 {
  font-weight: bold;
}
.첫째 + .둘째 {  /* 첫째 밑에 둘째인 영희네에만 적용 */
  font-size: 20px;
}
.첫째 ~ .셋째 {  /* 바로 밑이 셋째인 철수네와 한 다리 건너는 영희네 모두 선택 */
  text-decoration: underline;
}

 

 

-특정한 상태(마우스를 가져왔을 때, 링크 방문 전/방문 후 등)에 따라 스타일을 적용하고 싶다면 가상 클래스 셀렉터(Pseudo-Class Selector)를 쓸 수 있다. CSS 표준에서 정해진 상태 중에 원하는 것을 선택자 뒤에 콜론(:)으로 연결하면 된다.

 

-마우스 커서가 버튼 위에 올라가있을 때의 스타일을 지정하고 싶다면 button:hover { 스타일 }

-방문하지 않은 링크인 경우 :link, 방문한 링크인 경우 :visited

-셀렉터가 클릭된 상태일 때 :active, 현재 커서가 셀렉터이 있을 때 :focus

-체크된 상태일 때(checkbox, radio): checked 와 사용가능(enabled), 사용불가능일 때(disabled)

<label for="영희네">영희네</label>
<div id="영희네" class="조상">
  <p class="삼촌"><a href="https://ko.wikipedia.org/wiki/%EB%B6%80%EB%AA%A8">삼촌</a></p>
  <label for="영희부모님">부모</label>
  <ul class="부모" id="영희부모님">
    <li class="자식 첫째">자식1</li>
    <li class="자식 둘째">자식2</li>
    <li class="자식 셋째">자식3</li>
    <li class="자식 넷째">자식4</li>
  </ul>
</div>
<input type="text" class="focus">

.focus, .focus:focus, .focus:active {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

.focus:active {
  outline: solid 3px blue;
}

.focus:focus {
  background-color: lightcyan;
}

.자식:hover {
  font-size: 120%;
}

a[href] {
  color: deeppink;
}

a[href] {
  color: pink;
}

 

 

-그 외에도 first-child, last-child로 셀렉터의 첫 번째 자식, 마지막 자식을 선택할 수도 있다. 이런 종류는 pseudo-classes라고 한다. 해당 태그t:first-child 처럼 쓴다.

-특정 번째 자식을 선택하고 싶다면 :nth-child(n)을 쓰면 된다. n은 0부터 시작하는 정수다. 홀수나 짝수번째를 선택하고 싶다면 t:nth-child(2n)나 :nth-child(2n+1)을 쓸 수도 있다. 음수가 들어가면 생략된다. n+3처럼 정수를 줘서 3번째 자식부터 선택할 수도 있다.

li:first-child {
  color: orange;
}

li:nth-child(2n) {
  font-weight: bold;
}

-비슷한 시리즈로 :first-of-type이 있다. :last-of-type, :nth-of-type(n), :nth-last-of-type(n)를 지원한다. 위의 nth-child과의 차이는 nth-of-type는 다른 태그가 섞여있을 때를 구분하는가다. 상세 설명은 이쪽에서 찾았다: www.digitalocean.com/community/tutorials/css-css-nth-child-vs-nth-of-type

<label for="영희네">영희네</label>
<div id="영희네" class="조상">
  <p class="삼촌">삼촌</p>
  <label for="영희부모님">부모</label>
  <ul class="부모" id="영희부모님">
    <li class="자식 첫째">자식1</li>
    <li class="자식 둘째">자식2</li>
    <p>놀러온 옆집 아이</p>
    <li class="자식 셋째">자식3</li>
    <li class="자식 넷째">자식4</li>

  </ul>
<hr>
</div>
<label for="철수네">철수네</label>
<div id="철수네" class="조상">
  <p class="삼촌">삼촌</p> 
  <label for="철수부모님">부모</label>
  <ul class="부모">
    <li class="자식 첫째">자식1</li>
    <li class="자식 셋째">자식3</li>
    <li class="자식 넷째">자식4</li>
    <li class="자식 둘째">자식2</li>
    <p>놀러온 옆집 아이</p>
  </ul>
</div>

li:nth-child(2n) {
  color: red;
}

li:nth-of-type(2n) {
  background-color: yellow;
}

-nth-child는 태그 종류(li이든 p든)에 상관 없이 짝수 번째 자식을 선택하지만, nth-of-type은 해당 태그(li) 중 짝수 번째만 선택한다.

 

-pseudo-class 중에는 부정 셀렉터(Negation pseudo-class)도 있다. :not(셀렉터)를 쓰면 해당 셀렉터가 아닌 요소를 선택한다. p:not(.삼촌)라고 쓰면 p 중에 삼촌 클래스가 아닌 요소들을 선택할 수 있다. input:not(type=password)처럼 속성명을 쓸 수도 있다. 위의 nth-of-type과 합쳐서 div:not(:nth-of-type(5n))처럼 쓸 수도 있다. 5의 배수가 아닌 것들을 선택할 수 있다.

 

-input이나 form의 데이터 유효성을 검증하는 셀렉터는 validity pseudo-class라고 부른다. :valid, :invalid가 있고 input[type="text"]:valid 처럼 쓰면 된다. pattern 속성에서 명시한 값과 일치하는지에 따라 선택된다.

 

-첫 번째 글자나 첫 줄 등, 요소의 특정 부분에만 적용하고 싶다면 가상/의사 요소 셀렉터(Pseudo-Element Selector)가 있다. 콜론 2개(::)로 표시하고, ::first-letter처럼 쓴다.

::first-line 블록 요소의 첫 번째 줄

::after 콘텐츠의 뒤

::before 콘텐츠의 앞

before와 after는 content 프로퍼티에 '텍스트 입력'을 통해 데이터를 추가할 수 있다 (ex p::before { content: '추가할 말' }

사용할 수 있는 키워드 색인은 이쪽에 있다: developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements

 

---

Property(속성)

요소의 색깔을 빨간색으로 바꾸고 싶다고 하면, 이때 '색깔'이 속성이 된다.

사용할 수 있는 속성 목록은 아래 URL을 참조:

developer.mozilla.org/en-US/docs/Web/CSS/Reference#Keyword_index

한 선택자에 여러 개의 프로퍼티를 지정하고 싶다면 각각을 세미콜론(;)으로 구분하면 된다. (보통은 가독성을 위해 엔터도 친다.)

 

---

Value(속성값)

요소의 색깔을 빨간색으로 바꾸고 싶다고 하면, 이때 '빨간색'이 속성값이 된다.

색깔이라면 CSS에서 지원하는 색상명을, 높이나 너비 같은 크기라면 수치값으로 표현해줘야 한다. 수치를 표현할 때 사용할 수 있는 단위도 정해져 있다.

 

<키워드>

-display 프로퍼티는 block, inline, inline-block, none 같은 정해진 키워드를 값으로 받는다.

 

<단위>

-수치값인 경우 px, em, % 등의 단위를 사용한다. px는 절대값이고, em, %는 상대값이다.

-1px = 1인치의 1/96th

-%는 부모에서 상속된 값이나 기본값 같은 다른 값을 기준으로 상대적인 사이즈를 말한다.

-em은 상속 받은 값이나 기본값을 기준으로 몇 배가 될 것인지를 정한다. 다만 div를 여러 개 중첩했을 때 div 태그 전체에 2em으로 사이즈를 지정해버리면, 매 자식마다 사이즈가 부모의 2배가 되어버리므로 유의해서 사용해야 한다.

-rem은 root em으로 <html>에서 글꼴 크기를 가져온다. 사용자가 웹브라우저의 폰트 크기를 변경하더라도 대응이 가능하므로 유용하다. 기본값은 16px다.

 

-viewport를 이용하면, 부모 요소가 아닌 웹페이지가 사용자에게 보여지는 영역 기준으로 한 상대적 사이즈를 지정할 수도 있다.

-vw 보이는 너비 대비 비율

-vh 보이는 높이 대비 비율

-vmin 너비나 높이 중 작은 쪽 대비 비율

-vmin 너비나 높이 중 큰 쪽 대비 비율

 

<색상>

정해진 색상명(red, blue) 이나 HEX 코드 (#000000), rgb, rgba(alpha/투명도), hsl(Hue/색상, Saturation/채도, Lightness/명도), hsla 등 여러 방법으로 표현할 수 있다.

색상 리스트는 이쪽: www.w3.org/TR/css-color-3/

 

색상 참고 사이트: htmlcolorcodes.com/

또다른 참고 사이트: www.htmlcsscolor.com/

 

 

---

사용 방법

아래 3가지 방법이 있지만 대부분은 2번처럼 별도의 파일로 관리한다. 예외적으로, JavScript에서 동적으로 CSS를 생성하는 경우 3번처럼 사용하는 경우도 있다.

 

1. HTML 파일의 <style> 태그 내에 CSS 구문을 작성하거나

2. <head> 내에 <link rel="stylesheet" href="파일경로"> 태그로 참조할 파일 경로를 지정해주거나

3. HTML 요소에 style 프로퍼티에서 지정하거나 <p style="color: red">Red Color</p>

 

---

Reset CSS

브라우저별로 디폴트 스타일이 다르기 때문에, 한 브라우저에서는 의도대로 작동하던 것이 다른 브라우저에서는 그렇지 않을 수 있다.

이런 상황을 방지하기 위해 HTML 요소의 디폴트 스타일을을 초기화하는 과정이 필요하다.

margin이나 padding처럼 수치를 받는 속성은 속성값을 0으로 지정하고,

nav나 header 등 레이아웃 요소의 display는 block으로 고정하는 등의 작업이다.

meyerweb.com/eric/tools/css/reset/