📚 edwith 부스트코스 : 비전공자를 위한 HTML/CSS
CSS의 소개, 문법과 적용
소개
- CSS: Cascading Style Sheets로, HTML(마크업 언어)를 꾸며주는 언어이다.
- HTML이 웹페이지의 정보를 표현한다면 CSS는 HTML을 보기 좋게 디자인한다.
마크업 문서가 존재하지 않으면 CSS는 무용지물이나 마찬가지!
문법
h1 { color: yellow; font-size: 2em; }
- 선택자(selector): 어떤 요소를 꾸밀지 선택하는 부분, 위 코드에서는
h1 - 선언(declaration): 속성(property)과 값(value)를 묶어 하나의 선언이라고 함. 위 코드에서는
color: yellow;와font-size: 2em;이며 마지막 선언에는;를 붙이지 않아도 됨
- HTML에서의 속성과 CSS에서의 속성의 비교
: HTML->attribute, CSS->property - 선언부(declaration block): 중괄호까지를 모두 포함하는 부분으로, 위의 코드에서는
{ color: yellow; font-size: 2em; } - 규칙(rule set): 선택자까지를 모두 포함하는 부분으로 위 코드 전체를 가리킴
- 주석(comment tags):
/* 내용 */, 여러 줄로도 작성 가능
적용
- Inline 스타일 방식: 해당 요소에 직접 스타일 속성을 넣어 선언, 선택자 X
<div style="..."></div>- Internal 스타일 방식:
<head>태그 내에<style>태그를 선언, 선택자 O
<style>...</style>- External 스타일 방식: 규칙들을 별도의 CSS 파일(.css)에 저장, 원하는 CSS 파일을
<link>태그를 통해(<head>태그 내에 선언) 불러와 스타일을 적용
<link rel="stylesheet" href="css/style.css">- import 스타일 방식: 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식, 내부 상단이나 외부 스타일 시트 파일 상단에 선언. 성능상 좋지 않아 거의 쓰이지 않는다.
@import url("css/style.css");선택자
그룹핑(Grouping)
- 쉼표를 이용해 선택자들을 나열:
h1, h2, h3 { color: yellow; } - 전체 선택자:
* { color: yellow; }, 사용을 가급적 지양
class 선택자
: HTML의 글로벌 속성인 class 속성을 활용
- HTML 코드의 class 속성에 원하는 값을 넣고,
<p class="foo bar">...</p> - CSS 코드에서 class 속성값을 선택자로 사용. 온점
.기호를 사용한다.
.foo { font-size: 30px; text-decoration: underline; }
.bar { color: blue; }
/* 이와 같이 하면 html 코드에 두 class의 스타일이 다 적용됨 */id 선택자
: class 선택자와 유사한 방식으로 사용
- HTML 코드의 id 속성에 원하는 값을 넣고,
<p id="bar">...</p>- CSS 코드에서 id 속성값을 선택자로 사용. 값 앞에 해시 기호(#)을 씀
#bar { background-color: yellow; }- class 속성과의 차이
id는 문서 내에서 유일해야 함. 즉 id 속성은 무분별하게 사용해서는 안된다!
구체성 면에서도 다른데 이건 다음 강의에서 더 자세히 나온다!
선택자의 조합
/* 요소+class */ p.foo {...}
/* 다중 class */ .foo.bar {...}
/* id+class */ #foo.bar {...}속성 선택자
- 단순 속성으로 선택: 지정 속성이 있는 요소에 모두 적용
p[class] { color: silver; }
p[class][id] { font-size: 20px; }- 정확한 속성값으로 선택: 지정 속성의 속성값이 있는 요소에 적용
p[class="foo"] { color: yellow; }
p[id="title"] { text-decoration: underline; }- 부분 속성값으로 선택
-[class~="bar"]: class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
-[class^="bar"]: class 속성의 값이 "bar"로 시작하는 요소 선택
-[class$="bar"]: class 속성의 값이 "bar"로 끝나는 요소 선택
-[class*="bar"]: class 속성의 값이 "bar" 문자가 포함되는 요소 선택
문서 구조의 이해
- 부모와 자식
- 부모 요소: 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나뿐이다.
- 자식 요소: 부모 요소와 반대이며, 자식 요소는 여러 개일 수 있다. - 조상과 자손
- 조상 요소: 그 요소를 포함하는 모든 요소로, 부모 요소를 포함하여 여러 개일 수 있다.
- 자손 요소: 그 요소가 포함하고 있는 모든 요소로 여러 개일 수 있다. - 형제: 같은 부모를 가지고 있는 모든 요소
문서 구조 관련 선택자
- 자손 선택자: 선택자 사이를 공백으로만 구분한다. 다음 예시는
<div>의 자손 요소인<span>요소를 선택하는 선택자이다.
div span { color: red; }- 자식 선택자: 선택자 사이에
>기호를 넣는다. 다음 예시는<div>의 자식 요소인<h1>요소를 선택하는 선택자이다.
div > h1 { color: red; }- 인접 형제 선택자: 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택할 때 사용한다. 선택자 사이에
+기호를 넣는다. 다음 예시는<div>의 형제 요소인<p>요소를 선택하는 선택자이다.
div + p { color: red; }- 문서 구조 관련 선택자의 조합: 아무리 복잡하게 나열되어 있더라도, 실제 선택되는 요소는 가장 우측에 있는 요소라는 점을 기억하자.
body > div table + ul { ... }가상 선택자
가상 클래스 선택자
- 가상 클래스(pseudo class): 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스로, HTML과 CSS는 정적인 언어이므로 필요하다.
- https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes 에서 많은 가상 클래스들을 볼 수 있다!
- 아래 예시처럼 콜론:기호를 사용하여 나타낸다.
:pseudo-class { property: value; }- 문서 구조와 관련된 가상 클래스
-:first-child: 첫 번째 자식 요소 선택
-:last-child: 마지막 자식 요소 선택
li:fitst-child {...}
li:last-child {...}- 앵커 요소와 관련된 가상 클래스
-:link: 하이퍼링크(앵커 내에href속성이 있는 것)이면서 아직 방문하지 않은 앵커
-:visited: 이미 방문한 하이퍼링크
a:link { color: blue; }
a:visited { color: gray; }- 사용자 동작과 관련된 가상 클래스
-:focus: 현재 입력 초점을 가진 요소에 적용
-:hover: 마우스 커서가 있는 요소에 적용
-:active: 사용자 입력으로 활성화된 요소에 적용(순간적, ex 클릭)
a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }가상 요소 선택자
- 가상 요소: 미리 정해놓은 위치에 삽입되도록 약속된 보이지 않는 요소
- https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements 에서 다양한 가상 요소를 볼 수 있다!
- 가상 클래스와 구분하기 위해 CSS3부터 더블 콜론::기호를 사용한다. - 대표적인 가상 요소들
-::before: 가장 앞에 요소를 삽입 (content속성을 사용해 내용 입력)
-::after: 가장 뒤에 요소를 삽입 (content속성을 사용해 내용 입력)
-::first-line: 요소의 첫 번째 줄에 있는 텍스트를 감싸는 요소 생성
-::first-letter: 블록 레벨 요소의 첫 번째 문자를 감싸는 요소 생성
p::before { content: "###" }
p::after { content: "!!!" }
p::first-line { ... }
p::first-letter { ... }구체성
구체성의 정의와 계산
- 선택자로 지정한 스타일이 상반되는 경우, 어떤 규칙이 우선적으로 적용되어야 하는지에 대해 정해진 규칙, Cascading 규칙 중 하나
- 선택자를 얼마나 명시적으로 선언했는지를 수치화한 것으로, 값이 클수록 우선적으로 적용
- 다음과 같이 4개의 숫자 값으로 이루어진다.
0, 0, 0, 0- 값을 비교할 때에는 좌측 숫자부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성을 가진다. 구체성은 다음 규칙대로 계산된다.
0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
조합자는 구체성에 영향을 주지 않는다. (>, + 등)
전체 선택자는 0, 0, 0, 0을 가진다.인라인 스타일
- 인라인 스타일의 구체성 값은
1, 0, 0, 0으로 규칙들 중 가장 큰 구체성을 갖는다.
important 키워드
- 별도의 구체성 값은 가지지 않으나, 모든 구체성을 무시하고 우선권을 갖는다.
- 속성값 뒤 한 칸 공백 후 느낌표와 같이 사용한다.
p#page { color: red !important; }상속
- 상속되는 속성: 보통 상식적으로 구분될 만한 속성들이며, 박스 모델 속성들은 상속되지 않는다(margin, padding, background, border 등)
- 상속되는 속성의 구체성: 상속된 속성은 구체성을 가지지 않는다. 그러므로 스타일이 충돌할 경우 상속된 속성 외의 속성이 우선적으로 적용된다.
캐스케이딩 Cascading
- 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙
- 모든 스타일 규칙들은 Cascading의 단계적인 규칙에 따라 요소에 적용
캐스케이딩 규칙
- 중요도(!important)와 출처
- 출처는 CSS 출처를 의미하며, 제작자와 사용자, 사용자 에이전트(user agent) 순서대로 규칙을 적용한다.
- 구체성
- 선언 순서
- -> 중요도가 명시적으로 선언되었는지 -> 출처에 따라 분류
-> 구체성에 따라 분류 -> 뒤에 선언된 규칙일수록 우선적으로 적용
오늘 공부하면서 느낀 점
- 어어엄청 어려운 내용을 공부한 건 아니지만 직접 코드를 짜서 웹페이지를 만들어 보려고 하면 매우 헷갈릴 것 같다.. 잊어버리지 않게 복습도 잘 해야지!
- 캐스케이딩 어렵다,,,
- tmi지만 내일 수강정정 성공하게 해주세요ㅠㅠ
응애 나 애기 개발자