※ 다음 강좌를 들으며 정리한 내용입니다.
www.edwith.org/boostcourse-ui/joinLectures/19142
[부스트코스] 웹 UI 개발 강좌소개 : edwith
- 부스트코스
www.edwith.org
1) CSS 소개
- CSS는 간단히 이야기하면 HTML(마크업 언어)을 꾸며주는 표현용 언어입니다.
HTML이 문서의 정보, 구조를 설계한다면 CSS는 문서를 보기 좋게 디자인합니다.
- 모든 사이트가 비슷한 HTML 태그를 사용해서 만들어졌음에도 불구하고
각각 다양하고 독창적인 디자인으로 표현 가능한 이유가 바로 CSS 덕분입니다.
2) CSS 문법과 적용
- CSS도 몇 개의 규칙을 제외하고는 HTML과 마찬가지로 정해진 많은 속성과 그에 해당하는 값의 집합으로 이루어져 있습니다.
- ex) h1 { color: yellow; font-size:2em; }
- 선택자(selector) - "h1"
- 속성(property) - "color"
- 값(value) - "yellow"
- 선언(declaration) - "color: yellow", "font-size: 2em"
- 선언부(declaration block) - "{ color: yellow; font-size:2em; }"
- 규칙(rule set) - "h1 { color: yellow; font-size:2em; }"
- 선택자와 선언부 사이, 선언과 선언 사이는 앞뒤로 개행을 해도 상관이 없습니다. 하지만 속성이름과 속성값 사이에는 개행을 하면 안 됩니다.
- HTML에도 속성이 있고, CSS에도 속성이 있습니다. 두 가지는 전혀 다른 것입니다.
HTML의 속성은 영어로 attribute이고, CSS의 속성은 property입니다.
둘 다 한국어로 번역할 때 "속성"이라고 하므로 잘 구분해야 합니다.
- CSS의 주석은 /* 주석 내용 */ 로 처리합니다.
- CSS와 문서를 연결하는 방법은 4가지가 있습니다.
- Inline : 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법. 코드의 재활용이 되지 않기 때문에 자주 사용하지 않습니다. ex) <div style="color:red;"> 내용 </div>
- Internal : 문서에 <style>을 활용한 방법. <style>은 <head>내부에 들어가며 <style>안에 스타일 규칙이 들어갑니다. 페이지가 많고 스타일 규칙 내용이 많아지면 좋지 않은 방법입니다.
- ★ External : 외부 스타일 시트 파일을 이용한 방법. 외부파일은 확장자가 .css가 됩니다. CSS파일을 만들어 스타일 규칙을 선언하고, <link>을 이용해서 CSS 파일을 연결하면 됩니다. <head>내부에 <link>를 선언한 후 href 속성을 이용해 CSS 파일의 경로를 적습니다. ex) <link rel="stylesheet" href="css/style.css">. (rel은 문서와 어떤 관계인지 명시하는 속성) 파일 관리가 편하면서도 용량이 작기 때문에 주로 사용되는 방법입니다.
- Import : 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식. 성능상 좋지 않아서 거의 쓰이지 않습니다.
3) 선택자 1 (요소 선택자)
- 요소 선택자(태그 선택자) : 선택자 부분에 태그 이름이 들어갑니다. 문서 내에 선택자에 해당하는 모든 요소에 스타일 규칙이 적용됩니다. ex) h1{ color: yellow; }
- 선택자는 쉼표를 이용해서 그룹화를 할 수 있습니다. ex) h1, h2, h3 { color: yellow; }
- 전체 선택자(*)를 사용하면 문서 내에 모든 요소를 선택할 수 있습니다. 성능에 좋지 않으므로 될 수 있으면 사용을 지양합니다. ex) * { color: yellow; }
- 선택자뿐만 아니라 선언들도 그룹화가 가능합니다. ex) h1 { color: yellow; font-size: 2em; background-color: gray; }
- 선택자와 선언이 동시에 그룹화도 가능합니다. ex) h1, h2, h3 { color: yellow; font-size: 2em; background-color: gray; }
4) 선택자 2 (class 선택자, id 선택자)
- 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법은 class 선택자를 활용하는 것입니다. class 선택자를 사용하기 위해서는 HTML을 수정해 class 속성을 추가해야 합니다.
- class 속성은 글로벌 속성이므로 어느 태그에서도 사용할 수 있습니다. 클래스 선택자를 쓸 때는, 맨 앞에 .(마침표)를 찍어줘야 합니다.
- class 속성은 꼭 하나의 값만 가질 수 있는 것은 아닙니다. 공백으로 구분하여 여러 개의 class 값을 넣을 수 있습니다.
- id 선택자는 class 선택자와 비슷합니다. 선택자를 쓸 때는, .(마침표) 기호 대신 #(해시) 기호를 써주시면 되고, 요소에는 class 속성 대신 id 속성만 써주면 됩니다.
- class 선택자와 id 선택자의 차이점은 id 속성값은 문서 내에 유일하게 사용되어야 한다는 점입니다. 결국, id 선택자로 규칙을 적용할 수 있는 요소는 단 하나뿐입니다. 또한 구체성의 값이 다릅니다. (이에 대한 자세한 설명은 이후 구체성 수업에서 다룹니다.)
5) 선택자 3 ( 속성 선택자)
-요소와 class를 조합(p.bar{}), 다중 class(.foo.bar{}), id와 class의 조합(#foo.bar{})이 가능한다. 이 경우 모두 해당되는 경우에 적용이 된다.
- 속성 선택자는 대괄호를 이용해서 선언하며 대괄호 안에 속성 이름이 들어갑니다.
ex) p[class] { color: silver; }
ex) p[class][id] { text-decoration: underline; }
예시와 같이 쓸 경우, 첫 번째는 <p>이면서 class 속성이 있는 요소이면, 두 번째는 <p>이면서 class 속성과 id 속성이 함께 있어야 규칙이 적용됩니다.
- p[class="foo"] { color: silver; } 또는 p[id="title"] { text-decoration: underline; }로 정확한 속성값을 적으면, <p>이면서 그 속성값인 요소에 규칙이 적용됩니다.
- 부분 속성값으로 선택은 속성 이름과 속성값 사이에 사용되는 기호에 따라 동작이 조금 다릅니다.
- [class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
- [class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
- [class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
- [class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택
ex)p[class~="color"] { font-style: italic; }
p[class^="color"] { font-style: italic; }
p[class$="color"] { font-style: italic; }
p[class*="color"] { font-style: italic; }
6) 문서 구조 관련 선택자
- 선택자 중에는 문서의 구조를 이용하여 요소를 선택하는 선택자도 있습니다.
문맥이나 요소의 구조를 기반으로 하여 선택자를 조합하는 것을 "조합자" 또는 "결정자" 라고 부릅니다.
- 부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나뿐입니다.
자식 요소는 부모 요소와 반대라고 생각하면 되며 자식 요소는 여러 개일 수도 있습니다.
- 조상과 자손의 관계는 부모와 자식의 관계를 포함한 확장된 관계라고 생각하면 됩니다.
조상 요소는 그 요소를 포함하는 모든 요소로, 부모 요소를 포함하여 여러 개일 수도 있습니다.
자손 요소는 그 반대로, 그 요소가 포함하고 있는 모든 요소가 자손 요소입니다.
- 같은 부모를 가지고 있는 요소들은 서로 형제 관계에 있습니다. 형제 관계 중에는 인접한 관계도 있습니다.
형제 관계에 있는 요소 중 바로 뒤에 이어 나오는 요소를 인접해 있다고 합니다.
- 문서 구조를 이용한 선택자는 3가지 있습니다.
- 자손 선택자 : 선택자 사이에 아무 기호없이 그냥 공백으로 구분을 합니다.
- 자식 선택자 : 선택자 사이에 닫는 꺽쇠 기호(>)를 넣습니다. 꺽쇠 기호와 선택자 기호 사이에는 공백은 있거나 없어도 상관이 없습니다.
- 인접 형제 선택자 : 선택자 사이에 + 기호를 넣습니다. 자식 선택자와 마찬가지로 공백은 있거나 없어도 상관이 없습니다.
- body > div table + ul { ... }처럼 문서 구조 관련 선택자는 더 복잡하게 사용할 수 있습니다.
유의할 점은 요소들이 많이 나열되어 있더라도 제일 우측에 있는 요소가 실제 선택되는 요소라는 것입니다.
- cf) 또 다른 형제 선택자인 ~(틸트)도 있습니다.
https://www.w3schools.com/cssref/sel_gen_sibling.asp
7) 가상 선택자 1
- 가상 클래스(Pseudo Class)는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스입니다.
우리가 직접 요소에 클래스를 선언하는 것은 아니고, 약속된 상황이 되면 브라우저 스스로 클래스를 적용해줍니다.
- 문서 구조와 관련된 가상 클래스는 first-child와 last-child 가상 클래스 선택자 입니다.(ex. li:first-child{})
- :first-child : 첫 번째 자식 요소 선택
- :last-child : 마지막 자식 요소 선택
- 앵커 요소와 관련된 가상 클래스로는 :link와 :visited가 있습니다.(ex. a:link{})
- :link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
- :visited : 이미 방문한 하이퍼링크를 의미
- 하이퍼 링크는 앵커 요소에 href 속성이 있는 것을 의미합니다.
- 사용자 동작과 관련된 가상 클래스로는 :focus, :hover, :active가 있습니다. 이 클래스들은 <a>에 주로 많이 쓰이며, 이 조건에 맞는 상황이 되는 요소들은 다 사용이 가능합니다.(ex. a:focus{})
- :focus : 현재 입력 초점을 가진 요소에 적용
- :hover : 마우스 포인터가 있는 요소에 적용
- :active : 사용자 입력으로 활성화된 요소에 적용
8) 가상 선택자 2
- 가상 요소(Pseudo Element)도 가상 클래스처럼 문서 내에 보이지 않지만, 미리 정의한 위치에 삽입되도록 약속이 되어있습니다. 선언 방법은 가상 클래스와 같게 콜론을 사용합니다.
- CSS3부터는 가상 클래스와 가상 요소를 구분하기 위해 가상 요소에는 ::(더블 콜론) 기호를 사용하기로 했습니다. 하지만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있으므로 상황에 따라 : 기호를 사용하셔야 합니다.(ex. p::before{content: "###"})
- :before : 가장 앞에 요소를 삽입
- :after : 가장 뒤에 요소를 삽입(before와 after 가상 요소는 애초에 내용이 없는 상태로 생성되기 때문에 내용을 넣기 위해 content 속성을 이용해야 합니다.)
- :first-line : 요소의 첫 번째 줄에 있는 텍스트
- :first-letter : 블록 레벨 요소의 첫 번째 문자
9) 구체성
- 어떤 요소에 적용된 CSS 스타일이 상충할 때 어떤 스타일을 적용할지 결정하기 위해 브라우저는 각 스타일에 구체성을 부여하고 판단하여 우선으로 적용할 것을 선택합니다.
- 구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로, 구체성의 값이 클수록 우선으로 적용이 됩니다.
- 구체성은 4개의 숫자 값으로 이루어져 있습니다. 값을 비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성을 갖습니다. 구체성은 아래의 규칙대로 계산됩니다.
- 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
- 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
- 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
- 전체 선택자는 0, 0, 0, 0을 가진다.
- 조합자는 구체성에 영향을 주지 않는다. (>, + 등)
- 인라인 스타일의 구체성 값은 1, 0, 0, 0이며 규칙들 중 가장 큰 구체성을 갖기 때문입니다.
- important 키워드는 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖습니다.
important 키워드는 속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 씁니다.
10) 상속
- CSS에서 상속은 우리가 기본적으로 알고 있는 부모가 가진 특성을 자식이 물려받는 개념과 같습니다.
어떤 스타일 규칙이 특정 요소뿐만 아니라 그 자손 요소까지 적용되는 것을 말합니다.
- 상속은 자연스러운 현상처럼 보이지만, 모든 속성이 다 상속되는 것은 아닙니다. margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다는 것을 알고 계시면 됩니다.
- ★ 상속된 속성은 아무런 구체성을 가지지 못합니다.
11) 케스케이딩
- cascading은 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙입니다. cascading에는 다음과 같이 3가지 규칙이 있습니다.
- 중요도(!important)와 출처
- 구체성
- 선언 순서
위에서의 출처는 CSS 출처를 의미합니다.
- 모든 스타일은 아래의 규칙에 따라 단계적으로 적용됩니다.
- 스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류합니다.
- 중요도가 명시적으로 선언된 규칙들은 그렇지 않은 규칙들보다 우선합니다.
- 중요도가 있는 규칙들끼리는 아래 다른 규칙들을 적용받습니다.
- 스타일 규칙들을 출처에 따라 분류합니다.
- 제작자 스타일 규칙이 사용자 에이전트 스타일 규칙보다 우선합니다.
- 스타일 규칙들을 구체성에 따라 분류합니다.
- 구체성이 높은 규칙들이 우선합니다.
- 스타일 규칙들을 선언 순서에 따라 분류합니다.
- 뒤에 선언된 규칙일수록 우선합니다.
12) 선택자 정리
- 아래 참고 링크는 w3schools의 CSS Selector Reference 페이지 입니다. 위에서 다루지 못한 선택자들도 많이 있습니다.
www.w3schools.com/cssref/css_selectors.asp
CSS Selectors Reference
CSS Selector Reference CSS Selectors In CSS, selectors are patterns used to select the element(s) you want to style. Use our CSS Selector Tester to demonstrate the different selectors. Selector Example Example description .class .intro Selects all elements
www.w3schools.com
'웹개발 > [부스트코스] 웹 UI 개발' 카테고리의 다른 글
| 1. HTML&CSS 기초 - (3) 콘텐츠모델, 시멘틱마크업, 블록 & 인라인 (0) | 2020.11.14 |
|---|---|
| 1. HTML&CSS 기초 - (2) HTML 태그 (0) | 2020.11.08 |
| 1. HTML&CSS 기초 - (1) HTML 이해하기 (0) | 2020.11.07 |
