[HTML/CSS] - css basic 1

Minji Kim·2022년 10월 17일
CSS
0
post-thumbnail

bootcourse 수강 내용으로 대충 공부할까봐 꼼꼼히 복습하기 위해 작성한 글입니다.

CSS 용어

css는 html 요소를 꾸며주는 역할을 한다.

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; }"

css와 html의 속성 차이 ?

  • html의 속성 : attribute
  • css의 속성 : property

CSS 적용 방식

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

해당 방식은 요소에 직접 스타일 속성을 이용해 규칙을 선언하는 방식이다.

요소에 직접 입력하기 때문에 선택자는 필요하지 않는다.

다만, 해당 방식은 코드의 재활용이 되지 않으므로 자주 사용되진 않는다.

  1. Internal
<style> div {color: red;} </style>

해당 방식은 <style> 을 이용해 스타일 규칙을 선언하며 <head> 내부에 들어간다는 특징이 있다.

이 또한 많은 페이지가 존재할 경우 각각 규칙을 선언해줘야 하므로 효율적인 방식은 아니다.

  1. External
div {color: red;}

해당 방식은 외부 스타일 시트를 따로 생성하여 규칙을 선언하는 방식이다.

외부 파일은 확장자가 .css 이며 css 파일이라 부른다.

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

파일을 생성한 후에는 <head> 내부에 <link>를 선언한 후 href 속성을 이용하여 css파일 경로를 입력한다.

rel 속성은 연결되는 파일의 관계를 명시하는 속성으로 css파일은 ‘stylesheet’라고 입력해야 한다.

이 방식은 파일 관리가 용이하면서 연결된 모든 페이지에 반영할 수 있어 자주 사용되는 방식이다.

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

해당 방식은 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식이다. (성능 구림)

선택자

h1 {
  color: pink;
	font-size: 2em;
	background-color: gray;
}
h2 {
  color: pink;
	font-size: 2em;
	background-color: gray;
}
h3 {
  color: pink;
	font-size: 2em;
	background-color: gray;
}

문서 내에 선택자(h1, h2, h3)에 해당하는 모든 요소에 스타일 규칙이 적용된다.

해당 방식은 , 를 이용하여 그룹화를 할 수 있는데, 예시는 다음과 같다.

h1, h2, h3 { color: pink; font-size: 2em; background-color: gray; }

* 를 이용하면 문서 내의 모든 요소를 선택할 수 있다.

아래와 같이 규칙을 선언하면, 한 번의 선언만으로 문서 내 모든 요소에 동일한 스타일 규칙이 적용된다.

매우 편리하지만, 성능이 구리므로 가능한 한 사용을 지양한다.

class 선택자

요소에 구애받지 않고 스타일 규칙을 적용하는 일반적인 방법 중 하나이다.

class에 속성값을 넣게 되면, 해당 값을 통해 동일하게 스타일 규칙을 적용할 수 있다.

class 선택자를 사용할 때는, 맨 앞에 . 를 입력해야 한다.

.foo { font-size: 30px;}
<p class="foo"> ... </p>

다중 class 선택자

공백을 구분하면 여러 개의 class 값을 넣을 수 있는데 예시는 다음과 같다.

.foo { font-size: 30px; }
.bar { color: blue; }
<p class="foo bar"> ... </p>

id 선택자

class 선택자와 사용하는 방법은 유사한데, . 이 아닌 앞에 # 을 사용하면 된다.

#bar {background: pink;}
<p id="bar"> .. </p>

class 선택자와 또 다른 점은, id는 문서 내 유일해야 하므로 다중 선택이 불가하다.

선택자의 조합

/* 요소와 class의 조합 */
p.bar { ... }
/* <p> 이며 class 속성에 bar가 있어야 적용 */

/* 다중 class */
.foo.bar { ... }
/* class 속성에 foo와 bar가 모두 있어야 적용 */

/* id와 class의 조합 */
#foo.bar { ... }
/* id가 foo이며 class속성에 bar가 있어야 적용 */

속성 선택자

대괄호를 이용하여 스타일 규칙을 적용할 수 있다.

p[class] { color: silver; }
/* class 속성이 있으면 sliver로 적용 */
p[class][id] { text-decoration: underline; }
/* class, id 속성이 모두 있어야 underline 적용 */
<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>

정확한 속성값으로 선택

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

부분 속성값으로 선택

p[class~="color"] { font-style: italic; }
p[class^="color"] { font-style: italic; }
p[class$="color"] { font-style: italic; }
p[class*="color"] { font-style: italic; }

class 속성이

  • ~ : 공백 기준으로 구분하여 ‘color’단어가 포함되는 요소 선택
  • ^ : ‘color’로 시작하는 요소 선택
  • $ : ‘color’로 끝나는 요소 선택
  • * : ‘color’가 포함되는 요소 선택

문서 구조 관련 선택자

부모와 자식

  • 부모 요소 : 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나뿐이다.
  • 자식 요소 : 부모 요소와 반대라고 생각하면 되며 자식 요소는 여러 개일 수도 있다.

조상과 자손

부모와 자식의 관계를 포함한 확장된 관계

  • 조상 요소 : 그 요소를 포함하는 모든 요소로, 부모 요소를 포함하여 여러 개일 수도 있습니다.
  • 자손 요소 : 그 반대로, 그 요소가 포함하고 있는 모든 요소가 자손 요소입니다.

형제

  • 형제 관계 : 같은 부모를 가지고 있는 요소들
    • 인접 형제와 일반 형제 관계는 다르니 구분할 것!
/* 자손 선택자 사용 방식 (div 조상 - span 자손) */
div span { color: red; }

/* 자식 선택자 사용 방식 (div 부모 - h1 자식) */
div > h1 { color: red; }

/* 인접 형제 선택자 사용 방식 (div - p 인접 형제) */
div + p { color: red; }
/* 복잡한 선택자 사용 시 가장 우측에 있는 요소가 실제 선택되는 요소 */
body > div table + ul { ... }

가상 선택자

가상 클래스(pseudo class)

약속된 상황에 적용되도록 하는 조건문과 유사한 방식인데, 약속되지 않은 상황이라면 보이지 않은 클래스이다.

: 를 사용하여 스타일 규칙을 적용한다.

/* 리스트의 경우 해당 방식을 이용할 수 있다. */
li:first-child { color: red; }
li:last-child { color: blue; }

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

/* 아직 방문하지 않은 하이퍼링크 앵커 */
a:link { color: blue; }

/* 이미 방문한 하이퍼링크 앵커 */
a:visited { color: gray; }

사용자 동작과 관련된 가상 클래스

/* 현재 입력 초점을 가진 요소 */
a:focus { background-color: yellow; }

/* 마우스 커서가 있는 요소 */
a:hover { font-weight: bold; }

/* 사용자 입력으로 활성화된 요소 (click 시) */
a:active { color: red; }

가상 요소 (pseudo element)

태그 안의 요소가 약속된 상황에 따라 적용되는 방식이다.

:: 를 사용하여 스타일 규칙을 적용한다.

/* before와 after은 애초에 내용이 없는 것이므로 content라는 프로퍼티가 따로 필요함 */
p::before { 
	color: red;
	content: "첫 문장에 추가되며 스타일 적용"; 
}

p::after { 
	color: blue;
	content: "마지막 문장에 추가되며 스타일 적용"; 
}

/* 문서 내 첫 줄이 yellow 적용 */
p::first-line { color: yellow; }

/* 문서 내 첫 문자의 크기가 3em으로 적용 */
p::first-letter { font-size: 3em; }

구체성

앞서 알아본 결과, 다양한 규칙들을 선언할 수 있는데 복잡도가 높아질수록 이에 대한 우선순위가 중요한 이슈일 수 있다.

구체성은 선택자의 명시적 또는 구체적 선언 여부에 따라 수치화한 것으로, 값이 클수록 우선으로 적용 된다.

값은 초기 0, 0, 0, 0 으로 지정되어있고 값을 비교할 때는 왼쪽에 있는 값부터 비교하며, 왼쪽 숫자가 클 수록 높은 구체성을 갖는다.

각 자리의 의미는 선택자가 어떤 선택자가 들어오느냐에 따라 다른데, 구체적인 방식은 다음과 같다.

  • 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
  • 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
  • 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
  • 1, 0, 0, 0 : 인라인 스타일로 규칙이 선언된 경우
  • 전체 선택자는 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 */

important

important 키워드는 모든 구체성을 무시하고 우선권을 가져 해당 규칙으로 적용된다.

p#page { color: red !important; }

상속

* { color: purple; }
h1#page { color: gray; }
<h1 id="page">Hello, <em>CSS</em></h1>

앞서 구체성을 공부한 내용에 따르면 위 코드 결과는 모두 회색으로 나타나야 맞다. 구체성으로 따지면 0,1,0,1 이므로 전체 선택자는 무시되는 게 맞지만, <em> 태그는 <h1> 자식 태그, 즉 상속된 속성이므로 아무런 구체성을 가지지 못 한다!

참고

https://www.boostcourse.org/cs120

profile
Minji Kim
애기코더 응애
이전 포스트

[HTML/CSS] - html basic

다음 포스트

[HTML/CSS] - css basic 2

0개의 댓글