[TIL] 220502(월)

Beanxx·2022년 5월 2일

CSS TIL

TIL

목록 보기

6/120

☑️ CSS (Cascading Style Sheets)

: 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어

사용자 인터페이스(UI; user interface)
좋은 사용자 경험(UX; user experience) from 직관적이고 쉬운 UI

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

<link> 요소: html 파일과 다른 파일을 연결하는 목적으로 사용
rel 속성: 연결하고자 하는 파일의 역할이나 특징을 나타냄
href 속성: 파일의 위치 추가 (파일이 같은 폴더 내에 있으면 파일 이름만 입력 / 파일이 다른 폴더 내에 존재하는 경우엔 절대 경로나 상대 경로 입력)

<!-- 일반적인 html 구조 -->

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8">
	<title>Page title</title>
	<link rel="stylesheet" href="index.css"/> <!-- css 파일 적용 -->
  </head>

  <body>
	<header/>
	<div class="container menu">  <!-- 하나의 태그 요소에 여러 class 적용 -->
	  <nav/>
	  <main/>
	  <aside/>
	</div>
	<footer/>
  </body>
</html>

💡 CSS 문법

Selector: 요소 이름이나 id, 클래스 선택

/* css 구조 */

body {
  margin: 0;
  padding: 0;
  background: #fff;  /* 배경의 다른 속성도 한줄에 한번에 지정 가능 */
}
header, footer {
  font-size: large;
  text-align : left / right / center / justify(양쪽 정렬);  /* 가로정렬의 경우 */
  padding: 0.3em 0;
  background-color: #4a4a4a; /* background 속성과 다르게 배경색만 지정 가능*/
  color: red; /* 글자 색상 */
  border-color: #c3e6cb;  /* 테두리 색상 */
}
#navigation-title {  /* '#'을 붙여 id로 요소를 선택해 스타일링 */
  font-family: "SF Pro KR", "MalgunGothic"; /* 글꼴 */
	/* 앞에 작성한 글꼴이 없을 경우 뒤의 글꼴 적용 */
}

.menu-item {  /* '.'을 붙여 class를 선택해 스타일링 */
  text-decoration: underline; /* 밑줄 */
  font-weight: 10 /* 굵기 */
  letter-spacing: 10 /* 자간 */
  line-height: 10 /* 행간 */
}

💡 id & class 차이

id	class
#으로 선택	.으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는데 사용	스타일의 분류에 사용

💡 CSS 스타일 적용 방법

인라인 스타일: 태그 안에서 스타일 적용
내부 스타일 시트: html 파일의 <style> 요소 내에 작성
외부 스타일 시트: 별도의 css 파일로 적용

💡 단위

절대 단위	상대 단위
px, pt ...	%, em, rem, ch, vw, vh ...

px(픽셀): 크기가 고정된 절대 단위 → 사용자 접근성 불리. (모바일 기기처럼 작은 화면이면서 동시에 고해상도인 경우엔 적합 X)
rem: root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem. (x2 → 2rem, x0.8 → 0.8rem) ⇒ 접근성 유리
vw(viewport width): 1vw는 보이는 영역 너비의 1/100
vh(viewport height): 1vh는 보이는 영역 높이의 1/100
(화면을 가득 채우는 경우 100vw, 100vh)
%: html이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤 했을 때 보이는 영역까지 포함했을 때 비율

☑️ 박스모델

block box: 줄 바꿈이 되는 박스 (<h1>, <p>, <div>)
inline box: 줄 바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스. width, height 속성 적용x (<span>)
inline-block box: 줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 박스

block inline-block inline
줄바꿈 O X X
기본적으로 갖는 너비(width) 100% 글자가 차지하는 만큼 글자가 차지하는 만큼
width, height 사용 가능 여부 O O X

💡 박스 구성 요소

	block	inline-block	inline
줄바꿈	O	X	X
기본적으로 갖는 너비(width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능 여부	O	O	X

margin: 바깥 여백
- margin: 10px 20px 30px 40px; (top, right, bottom, left)
- margn: 10px 20px; (10px: top, bottom / 20px: left, right)
- margin: 10px; (모든 방향에 적용)
- margin-top: 10px; (특정 방향을 지정한 속성도 존재)
✋ 음수 값 지정 가능 (다른 element와의 간격이 줄어듬, 겹치게 하는 것도 가능)
padding: 안쪽 여백
- padding: 10px 20px 30px 40px; (top, right, bottom, left)
✋ 배경색이나 border를 적용하면, padding을 더 선명하게 확인 가능

overflow 속성: 콘텐츠 크기 > 박스 크기 → 콘텐츠가 박스 바깥으로 빠져오지 않도록 사용하는 속성
- auto 값: 콘텐츠가 넘치는 경우 스크롤 생성
- hidden 값: 넘치는 콘텐츠의 내용을 보여주고 싶지 않을 경우
- overflow-x, overflow-y: x축, y축을 지정해 가로/세로 방향으로 스크롤 할 수 있게끔 지정

✋ box-sizing: border-box : 모든 박스에서 여백과 테두리를 포함한 크기로 계산

☑️ CSS Selector

: CSS 속성을 적용할 대상을 선택하는 방법

💡 기본 Selector

전체 Selector
: 문서의 모든 요소 선택
* {}
태그 Selector
: 같은 태그명을 가진 모든 요소 선택 (복수 선택 가능)
h1 { } div, h1 { }
ID Selector
: #id로 입력하여 선택
#only { }
Class Selector
: .class로 입력하여 선택. 같은 class를 가진 모든 요소 선택
.center { }
Attribute Selector
: 같은 속성을 가진 요소 선택
a[href] { } p[id=”only”] { }

💡 자식 / 후손 / 형제 Selector

자식 Selector
: 첫 번째로 입력한 요소의 바로 아래 자식인 요소 선택
header > p { }

 <header>
   <p> ✔️
 	<span>
 	  <p></p>
 	</span>
   </p>
   <p> ✔️
 	<span>
 	  <p></p>
 	</span>
   </p>
 </header>

후손 Selector
: 첫 번째로 입력한 요소의 후손 선택
header p { }

<header>
  <p> ✔️
	<span>
	  <p></p> ✔️
	</span>
  </p>
  <p> ✔️
	<span>
	  <p></p> ✔️
	</span>
  </p>
</header>

형제 Selector
: 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 요소 모두 선택
section ~ p { }
```
```html
<header>
  <section></section>
  <p></p> ✔️
  <p></p> ✔️
  <p></p> ✔️
</header>
```
```
인접 형제 Selector
: 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소 선택
section + p { }
```
```html
<header>
  <section></section>
  <p></p> ✔️
  <p></p>
  <p></p>
</header>
```
```

💡 기타 Selector

가상 클래스 Selector
: 요소의 상태 정보에 기반해 요소 선택

a:link { } /*사용자가 방문하지 않은 <a>요소를 선택 */
a:visited { } /*사용자가 방문한 <a>요소를 선택 */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택 */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택 */
a:focus { } /* 포커스가 들어와 있을 때 선택 */

UI 요소 상태 Selector

input:checked + span { } /*체크 상태일 때 선택 */
input:enabled + span { } /*사용 가능한 상태일 때 선택 */
input:disabled + span { } /*사용 불가능한 상태일 때 선택 */

구조 가상 클래스 Selector

p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

부정 Selector

input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }

정합성 확인 Selector

input[type="text"]:valid { }
input[type="text"]:invalid { }

💡 프론트엔드 개발자가 되기 위해선

컴포넌트 기능별로 묶어서 제작
화면의 구성이나 배치 (레이아웃 디자인)
굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일
(정렬이나 배색에 대한 감각)
(UX에 대해 고민해 보고, UX가 잘 적용된 웹이나 앱을 분석해 본 경험)

Beanxx

FE developer

이전 포스트

[TIL] 220501(일)

다음 포스트