[CSS] CSS란?

miaa·2023년 1월 18일

CSS

FE

목록 보기

1/8

CSS (Cascading Style Sheets)

웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어
웹 사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할을 한다

CSS 단위

CSS를 다루기 위해선 알아야 할 몇 가지의 단위들이 있다

절대 단위

pt (point)

: 1pt = 1/72 인치로, 약 0.354146mm이다
px (pixel)

: 해상도의 단위
MAC의 경우, 9pt는 9px로 동일하다고 하지만 Window의 경우 9pt는 12px이라고 한다. 그 이유는 해상도 차이가 있기 때문이다.
따라서 pt 가 조금 더 절대적이라고 할 순 있으나 작업 할 때는 px 를 사용할 것을 권장 받았다

상대 단위
상대단위들은 보통 부모태그와 밀접하게 연관이 있다

%

: 부모 태그의 크기를 기준으로 퍼센트가 적용됨

: 그래서 무조건 부모 태그에 크기 값이 있어야함

: 부모랑 함께 or 화면 크기에 따라 크기 변동이 필요할 때 사용
em, rem

: 비율을 나타냄

: em 은 부모태그의 폰트 사이즈를 기준으로 비율이 적용

ex) parent 가 10px 이고 1.2em 이라한다면 10 * 1.2 = 12px 가 되는 것

: 1rem = 16px

: 브라우저 마다 크기가 달라지는 단점이 있음

: 보통 폰트 사이즈에 적용
vw, vh

: view-width / view-height

: 1vw는 보이는 영역 너비의 1/100을, 1vh는 보이는 영역 높이의 1/100을 뜻한다

: 보통 가장 바깥에 있는 웹 태그에만 적용한다

: 초기화 하는 단위

CSS Selector

기본 셀렉터

1. 전체 셀렉터 : 전체 셀렉터는 문서의 모든 요소를 선택한다

* { }

2. 태그 셀렉터 : 태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택하고 복수로도 선택할 수 있다

h1 { }
div { }
section, h1 { }

3. ID 셀렉터 : ID 셀렉터는 #id로 입력하여 선택한다

#only { }

4. attribute 셀렉터 : attribute 셀렉터는 같은 속성을 가진 요소를 선택한다

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

자식 / 후손 / 형제 셀렉터

1. 자식 셀렉터 : 첫 번째로 입력한 요소의 바로 아래 자식요소를 선택한다

header > p { }

<header>
<p> <!-- 선택됨 -->
	<span>
		<p></p>
	</span>
</p>
<p> <!-- 선택됨 -->
	<span>
		<p></p>
	</span>
</p>
</header>

<header> 요소 바로 아래에 있는 두 개의 <p> 요소는 선택되지만 O
<span> 요소의 자식인 <p> 요소는 선택되지 않는다 X

2. 후손 셀렉터 : 첫 번째로 입력한 요소의 후손을 선택한다

header p { }

<header>
<p><!-- 선택 -->
	<span>
		<p><!-- !!선택!! -->
		</p>
	</span>
</p>
<p><!-- 선택 -->
	<span>
		<p><!-- !!선택!! -->
		</p>
	</span>
</p>
</header>

<header> 의 자식 <p> 뿐만 아니라
<header> 의 자식인 <p> + 그 <p> 자식의 <p> 요소까지 모두 선택된다

엄청난 혈연을 자랑한다고 생각하면 된다

3. 형제 셀렉터

: 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택한다
: 같은 단계에 있는 모든 요소들을 선택한다고 생각하면 쉽다

section ~ p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
</header>

4. 인접 형제 셀렉터

: 인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택한다
: 같은 단계에 있는 태그 중 가장 가까운 요소만 선택한다

section + p { }

<header>
  <section></section>
  <p></p> <!-- 선택 -->
  <p></p>
  <p></p>
</header>

5. 부정 설렉터 : ~가 아닌 것만 선택한다

input:not([type="password"]) { }

나는 수업 내용을 기반으로 우선 정리를 해서 추가 되지 않은 선택자들도있긴 있다 (잘 안쓴다고는 하지만 알아두면 그래도 나쁠 건 없으니까)

더 알고 싶거나 아직 selector 에 대해 감이 안오는 사람들을 위한 링크가 있다

https://flukeout.github.io/

오른쪽 HTML 문서를 보며 위의 지시령을 따라 선택자만 타이핑 하고 엔터 치면 된다

총 32개의 선택자들을 연습할 수 있어서 좋았다

막힌다면 오른쪽 힌트를 보거나 "Help I'm Stuck" 버튼을 눌러 참고 하면 된다

miaa

엉금엉금

다음 포스트