💛[부스트코스_웹 UI 개발] 4. CSS 이해하기

CSS

Cascading Style Sheets

Cascading : 연속적으로 계속되는
Style Sheets: 스타일 규칙을 정의하는것

• CSS는 HTML을 꾸며주는 언어
• HTML이 웹페이지의 정보를 표현, CSS는 HTML을 보기 좋게 디자인하는 표현용 언어
• CSS는 마크업 언어와는 독립된 다른 언어
• 마크업 문서가 존재하지 않으면 CSS는 무용지물
  -> CSS가 마크업을 꾸며주는 표현용 언어인데 표현할 대상인 contents가 없기 때문
• http://csszengarden.com
  css 디자인의 아름다움을 보여주는 사이트

---

CSS 문법과 적용

CSS문법도 정해진 속성들과 그에 해당하는 값의 집합이다

h1 { color: yellow; font-size:2em; }

CSS는 HTML 요소를 꾸며주는 역할
1. 어느 요소를 꾸밀건지 선택할 요소 필요
2. 그 요소를 어떻게 꾸밀건지 스타일의 내용 필요

• h1 : 어느 요소를 꾸밀건지에 해당하는 선택자. selector
• {내용} : 어떻게 꾸밀건지에 대한 부분. 선언부
  • color : 속성 이름
  • yellow : 속성 값
• 선언 = 속성이름 + 속성 값
• 맨 마지막 선언에는 ; 붙이지 않아도 되지만 많이 붙인다
• 선택자 + 선언부 = 규칙 rule set
  CSS는 여러개의 rule set으로 이루어져 있다.

HTML 속성 attribute vs CSS 속성 property

완전 다른것. 구분하기

선택자와 선언부 사이에 개행 가능, 선언과 선언 사이에도 개행가능
속성명과 속성값 사이는 개행하면 안됨

h1 
{
  color:yellow;
  font-size:2em;
}

css 주석

/**/

---

어떻게 요소에 css를 적용시킬까. css와 html을 어떻게 연결?

1. Inline

해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는것

<div style="color:red;"> 내용 </div>

• 해당 요소에 직접 선언하기 때문에 선택자 필요없음
• 선언부의 내용만 스타일 속성값에 넣어줌
• 페이지가 길어질수록 수정하기 어렵다
  자주 사용되는 방법 아님
  인라인 스타일이 필요한 경우는 따로 존재

2. Internal

<style> 
div {color: red;} 
</style>

• style 태그를 이용해서 셀렉터를 이용한 방법
• style태그는 head 태그에 들어감
  그 안에 셀렉터를 포함한 룰셋 전부를 넣으면 된다

• 스타일이 변경되더라도 변경하기 편하나 한계 존재

-> 사이트에는 많은 페이지가 있는데 많은 페이지에 동일한 스타일 규칙을 적용시키기 위해서는 모든 페이지마다 style태그를 복사해서 붙여넣어야함
페이지가 많고 스타일 규칙이 길어진다면 어렵다

3. External

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

• 외부 스타일 시트 파일을 이용한 방법
• 스타일규칙들을 별도의 CSS파일(외부파일)을 만들어서 그 안에 넣는 방식
• 외부파일의 확장자는 css
• CSS파일과 HTML파일을 연결할때 사용하는 태그가 link태그
• head태그 내에 선언해야함
  • href 속성 : css파일의 경로 적음
  • rel 속성 : 연결되는 파일이 html 문서와 어떤 관계인지를 명시
    css파일을 연결할때는 stylesheet

• 많은 페이지가 있더라도 link태그만 복사해서 넣어주면 모두 동일한 스타일 적용
• 수정할때도 css파일만 수정하면 모두 동일하게 반영됨
• 외부 스타일 시트파일을 이용하면 관리하기 용이하고 용량도 적기 때문에 이 방법이 주로 사용됨

4. Import

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

• 스타일 내에서 다른 스타일 시트 파일을 불러오는것
• style태그 상단이나 외부 스타일 시트 파일 안 상단에 선언
• 성능이 좋지 않으므로 거의 쓰이지 않음

---

선택자

완성도 있는 디자인을 표현하기 위해서는 반드시 내가 원하는 요소를 선택할 수 있어야함
css에서 선택자는 중요하다!

1. 요소 선택자
선택자중에 가장 기본이 되는 선택자. 태그선택자라고도 함
선택자 부분에 태그의 이름이 들어감
요소 선택자는 문서 내에 선택자에 해당하는 요소, 태그 모두에 스타일 규칙이 적용됨

h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }
h4 { color: yellow; }
h5 { color: yellow; }
h6 { color: yellow; }

• 선택자 그룹화 가능
  ,를 이용해서 선택자들을 나열해주면됨

h1, h2, h3, h4, h5, h6 { color: yellow; }

• 전체선택자
  *(asterisk)를 이용해서 문서내에 있는 모든 요소 선택하는 선택자
  단 한번의 선언만으로도 문서내에 있는 모든 요소가 선택됨
  성능에 좋지 않으므로 사용을 지양

• 선언 그룹화 가능

h1 { color: yellow; font-size: 2em; background-color: gray; }

• 선택자와 선언이 동시에 그룹화 가능

h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; }

2. class 선택자
요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법
html 수정 필요.

/*css*/
.foo { font-size: 30px; }

<!--html-->
<p class="foo"> ... </p>

• class 속성에 값을 넣게되면 class 선택자를 이용해서 해당 요소에 스타일규칙을 적용할 수 있다
• css에서는 선택자 앞에 .을 찍어준다
• 어느 요소든지 class속성의 값이 foo로 선언된 요소가 있다면 모두 해당 규칙을 적용받게 된다

• 하나의 요소에 여러개의 class를 넣을 수 있다 : 다중 class
  공백으로 구분해서 두가지 속성값이 들어가있음
  두개의 규칙이 모두 적용됨

.foo { font-size: 30px; }
.bar { color: blue; }

<p class="foo bar"> ... </p>

3. id 선택자

#bar { background-color: yellow; }

<p id="bar"> ... </p>

• class선택자와 차이

  • .대신 #사용
  • 태그의 class속성이 아닌 id속성 참조
  • id는 문서 내에서 유일해야한다
  • 구체성의 값이 다르다

• 선택자는 조합이 가능하다

/* 요소와 class의 조합 */
p.bar { ... }

: p 태그이면서 클래스로 bar가 있어야 규칙이 적용됨

/* 다중 class */
.foo.bar { ... }

: foo와 bar 클래스가 다 있는경우에 해당

/* id와 class의 조합 */
#foo.bar { ... }

: 아이디는 foo이면서 클래스는 bar인 요소가 선택

4. 속성 선택자
태그에 속성을 이용해서 요소를 선택한다

1. 단순 속성으로 선택

p[class] { color: silver; }
p[class][id] { text-decoration: underline; }

: p요소이면서 class라는 속성이 있는 요소에 글자를 은색으로 표현
아래는 p요소이면서 class, id속성이 모두 있는 경우에 적용

<p class="foo">Hello</p> /*은색*/
<p class="bar">CSS</p> 은색
<p class="baz" id="title">HTML</p> 은색이면서 밑줄

• 요소 선택자와 조합으로 사용됨
• []안에 속성의 이름 들어감
• 요소에 해당 이름의 속성이 선언이 되어있다면 모두 적용됨

2. 정확한 속성값으로 선택

p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }

속성값으로 요소를 선택
선택자를 쓸때는 []안에 속성의 이름과 속성값까지 같이 적어야함

<p class="foo">Hello</p> /*은색*/
<p class="bar">CSS</p> 
<p class="baz" id="title">HTML</p> 밑줄

3. 부분 속성값으로 선택
속성이름과 속성값 사이에 사용되는 기호에 따라 다르다

<p class="color hot">red</p> 
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>

p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */

• [class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택

• [class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
  ^ 캐럿 기호

• [class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
  $ dollar sign

• [class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택
  * asterisk

---

문서 구조 관련 선택자

<html>
  <head>
  </head>
  <body>
    <div>
        <h1><span>HTML</span>: Hyper Text Markup Language</h1>
       <span>CSS는 문서를 꾸며줍니다.</span>
    </div>
    <span>Javasciprt는 문서를 동적으로 제어할 수 있습니다.</span>
    <p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
  </body>
</html>

• html요소는 자식요소들만 존재. 부모 요소 존재하지 않음
• head요소와 body 요소 두개의 자식 요소 존재
• body요소에 div,span,p 3개의 자식요소 존재
• body요소의 부모 요소가 html요소
• div요소는 자식요소로 h1, span요소, 부모요소로 body
• h1 요소도 div의 자식요소이자 span의 부모요소

보통 문서의 요소들은 어느 요소의 자식 요소이자 부모요소가 되는 경우 많음

조상/자손

html 요소의 자손 요소는 head, body, ...모든 요소들이 html요소의 자손 요소
span요소의 조상요소는 h1, div, body, html까지 4개

형제관계

같은 부모를 가지고 있는 요소들이 서로 형제관계에 있는 요소들
head, body
div, span, p

인접한 관계

형재 관계에 있는 요소들 중에 바로 뒤에 나오는 요소를 인접해있다고 함
span요소는 div요소의 인접한 형제인 요소
p요소도 span의 인접한 형제 요소

---

문서구조를 이용한 선택자 3가지
자손선택자
자식선택자
인접 형제 선택자

자손선택자

div span { color: red; }

: div요소의 자손, span요소를 선택하는 선택자
선택자와 선택자 사이에 아무런 기호 없이 공백으로만 구분

자식선택자

div > h1 { color: red; }

선택자 사이에 꺽쇠 >기호 넣기
> 기호 좌우에 공백줘도 되고 없어도 됨

인접 형제 선택자

div + span { color: red; }

선택자 사이에 + plus 기호
공백 있어도 되고 없어도 됨

조합해서 사용가능

/* body 요소의 자식인 div 요소의 자손인 table 요소 바로 뒤에 인접한 ul 요소 선택 */
body > div table + ul { ... }

---

가상선택자

pseudo selector
1) 지금 문서내에 존재하지 않는 구조, 문서에 존재하지 않는 요소에 스타일을 부여할 수 있고,
2) 특정 요소의 상태를 미리 추정해서 가상의 클래스로 스타일을 적용시킬수도 있는 선택자

가상선택자에는 가상 클래스, 가상요소 두가지 존재

가상 클래스
특정 요소에 미리 정의해놓은 상황에 적용이 되도록 약속되어 있는 보이지 않는 클래스

• 가상클래스는 우리가 요소에 직접 클래스를 입력하는것이 아니고 브라우저 스스로가 특정한 상황이 되면 자동적으로 클래스를 적용시켜주는것.

• 보통 자바스크립트, 서버사이드 등의 다른 언어를 사용해서 특정한 상황, 예를들어 마우스를 올리게 되면 요소에 red라는 클래스를 삽입하도록 별도의 처리를 해주는게 실무에서 쓰이는 방법
  -> 개발 비용이 들어감.

• css에서는 자주 사용되는 여러 상황들을 미리 정의해놓고 그 상황이 되면 알아서 요소에 어떠한 가상의 클래스가 들어가게끔 만들어놓았다.
  -> 가상클래스를 이용하면 css만으로 구현가능하기 떄문에 효율적

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
참고 링크

:pseudo-class {
    property: value;
}

가상클래스 이름 앞에 : 기호 넣어주면 됨

문서구조와 관련된 가상 클래스

first-child : 첫번째 자식 요소에 들어가는 클래스
last-child : 마지막 자식 요소에 들어가는 클래스

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>

li:first-child { color: red; }
li:last-child { color: blue; }

아래 코드처럼 동작하게된다

<ul>
    <li class="first-child">HTML</li>
    <li>CSS</li>
    <li class="last-child">JS</li>
</ul>

앵커 요소와 관련된 가상 클래스

link : 하이퍼링크이면서 아직 방문하지 않은 앵커를 이야기함
하이퍼링크 : a 태그에 href속성이 존재하는것
vistied : 이미 방문을 한 하이퍼링크

a:link { color: blue; }
a:visited { color: gray; }

사용자 동작과 관련된 가상 클래스
이 클래스들도 a요소에 주로 많이 쓰인다.

focus : 현재 입력 포커스를 갖고 있는 요소에 적용됨 포커스는 탭 키로 줄 수 있음 (포커스 : 현재 선택을 받고 있는것. 초점)
hover : 마우스 포인터가 위치해 있는 요소에 적용. 즉 마우스를 올렸을떄
active : 사용자 입력에 의해 활성화된 요소. 초점을 받은 상태에서 링크를 클릭하거나 버튼을 눌렀을떄 순간적으로 발생

a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }

---

가상요소
HTML코드 내에 존재하지 않는 구조, 요소에 스타일을 부여할 수 있다

미리 정의해놓은 위치에 삽입되도록 약속이 되어 있는 보이지않는 요소.
문서내에는 없는 요소이지 만 가상요소 선택자를 쓰게 되면 미리 정의해놓은 위치에 삽입이 되도록 약속되어있다.

::pseudo-element {
    property: value;
}

가상요소 선언
: 이용

CSS3부터는 가상 클래스와 가상 요소를 구분하기 위해 가상 요소에는 ::(더블 콜론) 기호를 사용하기로 했다.
하지만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있으므로 상황에 따라 : 기호를 사용해야함.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

p::before { content: "###" }
p::after { content: "!!!" }
p::first-line { ... }
p::first-letter { ... }

이렇게됨

<p>
    <before>###</before>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <after>!!!</after>
</p>

• before
  요소 내에 가장 첫번쨰 자식으로 삽입
• after
  가장 마지막 자식으로 삽입
• first-line
  요소의 첫번째 줄에 있는 텍스트를 감싸는 요소가 삽입. 화면에 나타난 줄이 기준
• first-letter
  요소내에 블록레벨요소중에 그 안에 첫번째 문자를 감싸는 요소를 생성

before, after 가상요소는 내용이 없는 상태로 생성된 요소이기 때문에 내용을 집어넣기 위해서는 contents라는 css속성도 이용해야함

---

구체성

서로 다른 선택자를 이용해서 같은 요소를 선택할때, 동일한 규칙들이 서로 상반된 스타일을 갖고 있다면 어떻게 표현될까?

h1 { color: red; } /*요소선택자*/
body h1 { color: green; } /*자손선택자*/

모두 h1 요소를 선택하는 선택자. 두 규칙은 지정된 스타일이 서로 상반됨

구체성
선택자에 어떠한 규칙이 우선되어야하는지 정해진 룰
선택자를 얼마나 명시적으로 선언했느냐를 수치화한것

구체성의 값이 높을수록 우선되어 적용됨

0, 0, 0, 0
구체성을 계산할떄는 좌측에 있는 값부터 비교하기 때문에 좌측부분의 숫자가 클수록 높은 구체성을 가진다.

선택자에 있는 모든 id속성값
0, 1, 0, 0

선택자에 있는 모든 클래스 속성값, 기타 속성, 가상 클래스
0, 0, 1, 0

선택자에 있는 모든 요소, 가상 요소
0, 0, 0, 1

• 조합자나 전체선택자는 구체성에 영향을 못 줌
• 전체선택자는 0, 0, 0, 0의 구체성 값 가짐
• 조합자는 아무런 구체성 값을 갖지 않음. >, +

h1 { ... }  /* 0,0,0,1 */
body h1 { ... }  /* 0,0,0,2 */
.grape { ... }  /* 0,0,1,0 */
*.bright { ... }  /* 0,0,1,0 */
p.bright em.dark { ... }  /* 0,0,2,2 */
#page { ... }  /* 0,1,0,0 */
div#page { ... }  /* 0,1,0,1 */

인라인 스타일로 선언된 규칙이 가장 높은 구체성을 갖는다.
1, 0, 0, 0

p#page { color: red; }

<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

-> blue가 적용

!important 키워드

p#page { color: red !important; }

속성값 한칸 뒤에 공백 주고 씀

<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

-> red로 나타남

important는 별도의 구체성 값은 없지만 모든 구체성을 무시하고 우선권을 갖게끔 되어있다

---

상속

상속은 구체성과 더불어 선언들이 문서에 어떻게 적용되는지를 이해하기 위한 중요한 핵심개념
어떤 스타일이 특정요소만이 아니라 그 자손요소에까지 적용되는 방식

h1 { color: gray; }

<h1>Hello, <em>CSS</em></h1>

-> em요소가 부모 gray값을 상속받아서 회색으로 표현됨

margin, padding, background, border등의 박스모델속성들은 다 상속되지 않는다

상속된 선언의 구체성

* { color: red; }
h1#page { color: gray; }

<h1 id="page">Hello, <em>CSS</em></h1>

-> red가 적용됨
상속된 값에는 아무런 구체성을 갖지 못함. 0, 0, 0, 0의 값도 없기 때문에 전체 선택자의 구체성에도 밀린다

---

캐스케이딩

캐스케이딩
: 모든 스타일 규칙들이, 즉 css가 어떤 기준으로 어떤 방식으로 문서에 적용이 되는지를 정한 규칙

구체성도 캐스케이딩 규칙의 하나이다
케스케이딩 : 단계적인이라는 뜻 가짐

구체성이 같은 두가지 규칙이 동일한 요소에 적용되면 어떻게 될까?

h1 { color: red; }
h1 { color: blue; }

구체성이 같은 규칙이 나오면 캐스케이딩의 단계적인 규칙에 따라 동작함.

캐스케이딩 규칙 3가지
1. 중요도와 출처
2. 구체성
3. 선언순서

1.

• 중요도 : !important를 의미
  !important로 선언된 모든 규칙은 그렇지 않은 규칙보다 우선

• 출처 : 제작자/사용자/사용자 에이전트 user gent로 구분
  css의 출처를 이야기하는것.

  • 제작자 : 실제 사이트를 제작하는 사이트 개발자가 작성한 css를 의미
  • 사용자 : 사이트를 방문하는 일반 사용자들이 작성한 css를 의미
  • 사용자 에이전트 : 일반 사용자의 환경, 즉 브라우저에 내장된 css

우선순위
5위) 사용자 에이전트 스타일
브라우저에서 기본적으로 제공하는 스타일

4위) 사용자 스타일
일반 유저가 직접 css를 만들어서 본인 브라우저에 설정해놓은것. 지금은 잘 사용되지 않고 지원하지 않는 브라우저들도 많아서 신경 x

3위) 제작자 스타일
사이트 제작자가 작성한 css. 대부분의 스타일 규칙들이 여기에 해당

2위) 제작자 !important

1위) 사용자 !important

기본 규칙에서는 제작자가 우선인데 !important중요도를 주게 되면 사용자가 더 우선하게 되어있다는것 주의
그래도 사용자 스타일은 거의 쓰지 않기 때문에 1순위는 무시해도 상관없다.

2. 구체성

이미 배웠음

3. 선언 순서

나중에 선언된 녀석이 우선하게 됨

---

선택자 추가 공부
https://www.w3schools.com/cssref/css_selectors.asp