[멋사] 프론트엔드 스쿨 7기 학습 230706

챈스·2023년 7월 11일

멋쟁이사자처럼 FES 7기

목록 보기

5/30

멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

🎨텍스트 꾸미기(CSS)

Color 색상

폰트의 색상을 나타냄
font-가 붙지 않음 → font-color: red (X) / color: blue (O)
키워드(red,blue) , HEX(#+16진수 표기법), rgb(), rgba(), hsla() 등 다양한 방법으로 표기
HEX를 많이 사용하며, 투명 값을 위해 rgba*도 많이 사용
a=0 투명 / a=1 불투명 (0 ~ 1 사이값 사용)
transparent: 투명한 색
currentColor: 부모에 color 값이 있다면 상속으로 처리됨

💡 알고 넘어가기!

시력이 안 좋으신 분들을 위해 폰트 색상과 배경 명도 대비도 중요함(웹 접근성)
최소한 4.5:1
개발자 모드(F12) → Lighthouse → 카테고리 '접근성(Accessibility) → 페이지 로드 분석 가능

font-family 글꼴 종류

폰트 적용 방법

1. link

HTML 파일

<!-- 사용예시1 : href 참고 -->
<head>
	<link href="폰트 링크" rel="stylesheet">
    <style> 
		body {font-family: '폰트 이름', sans-serif;}
	</style>
</head>

2. @import

CSS 파일

/*사용예시2 : url 참고 */
@import url("폰트 링크");
body{
	font-family: "폰트 이름", sans-serif;
}

3. @font-face

브라우저 사용자의 컴퓨터에 특정 폰트가 설치되어 있지 않아도 @font-face 속성을 통해 폰트를 설치하여 사용할 수 있음

CSS 파일

@font-face {
    font-family: "Pretendard-Regular";
    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}
body{
	font-family: Pretendard-Regular, "Times New Roman", Dotum, "돋움", sans-serif;
}

💡 알고 넘어가기!

폰트 적용 방법에 따라 렌더링 속도가 다름 = 컴퓨터에 기본으로 설치된 폰트가 렌더링이 빠르다
폰트에 " " 묶은 것과 안 묶은 것의 차이
- " " 묶은 것: 한글 또는 영문이지만 공백이 포함될 경우
- " " 안 묶은 것: generic(sans-serif, serif)와 같은 기본 폰트인 경우

font-size 글꼴 크기

절대 단위

px (cm, mm, in, pc, pt..)
- px = pixel (picture+element)
- 다양한 디바이스가 생겨나며, 픽셀 밀도도 다양해졌기 때문에 디바이스에 따라 보여지는 크기가 다름

상대 단위

% (em, rem, vw, vh, vmin, vmax..)
- %: 부모 요소 기준 백분율 단위
- em: 부모 요소로 상속받은 요소의 글자 크기 기준
- rem: 루트 요소(html)에 설정된 글꼴 크기 상대 단위
- vw, vh: viewport width(화면 넓이), viewport height(화면 높이) 기준 백분율 단위
- vmin, vmax: 화면의 넓이와 높이 중 작은 값, 큰 값을 기준으로 하는 백분율 단위

💡 알고 넘어가기!

상대 단위를 쓰는 이유? 반응형 웹페이지 개발, 유지보수 등에 용이하기 때문

font-weight 텍스트 굵기

normal: 기본
bold: 굵게
lighter: 현재 요소의 굵기를 부모 요소 굵기 보다 한 단계 가볍게
bolder: 현재 요소의 굵기를 부모 요소 굵기 보다 한 단계 두껍게
100 - 900

text-transform 대/소문자 변경

none: 변형방지
**uppercase**: 모든 텍스트를 대문자로
**lowercase**: 모든 텍스트를 소문자로
capitalize: 모든 단어의 첫글자를 대문자로

text-decoration 텍스트 라인

text-decoration-color

텍스트 라인 색상

text-decoration-line

텍스트 라인 종류
underline: 밑줄 긋기
overline: 오버라인
line-through: 취소선

text-decoration-style

텍스트 라인 모양
solid: 굵은선(기본값)
wavy: 물결선
dashed: 파선(짧은 막대선을 일정 간격으로 벌려놓은 선)

text-decoration-thickness

텍스트 라인의 굵기 속성

.dashed {
  text-decoration: lime underline overline dashed auto;
}
.wavy{
  text-decoration-color: royalblue;
  text-decoration-line: line-through underline overline;
  text-decoration-style: wavy;
  text-decoration-thickness:5px;
}

text-shadow 텍스트 그림자

축약형 (아래 작성 순서)
offset-x | offset-y | blur-radius | color
box-shadow 는 상자 그림자를 나타냄

text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;

text-align 텍스트 가로정렬

left : 왼쪽 정렬
right : 오른쪽 정렬
center : 중앙 정렬
justify : 양쪽 정렬
justify-all: 양쪽 정렬(마지막 줄 적용)

vertical-align 텍스트 세로정렬

인라인, 인라인 블록 및 테이블 셀 요소에만 적용
블록 레벨 요소를 수직으로 정렬하는 데 사용할 수 없음

Frame

line-height 줄 높이 설정

단위, 배수, % 등의 값으로 설정

letter-spacing 글자 사이 간격

단위 값으로 설정

word-spacing 단어와 단어 사이 간격

단위 값으로 설정

text-indent 들여쓰기, 내어쓰기

문단 첫째줄 빈 공간(들여쓰기)의 길이를 설정

word-break 줄바꿈

텍스트가 자신의 콘텐츠 박스 밖으로 넘칠 경우 줄바꿈 여부 지정
normal: 기본값 (한중일 텍스트는 글자 기준, 비 한중일 텍스트는 단어 기준으로 줄바꿈)
break-all: 글자 기준으로 줄바꿈 (한중일 텍스트는 제외)
keep-all: 단어 기준으로 줄바꿈 (비 한중일 텍스트에서는 normal과 동일)

text-overflow 넘치는 텍스트 표기

말줄임 처리할 때 자주 사용
ellipsis: 말줄임

.ellipsis{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.multi-ellipsis{
  overflow:hidden;  
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

📑목록 관련 태그(HTML)

ol (Ordered List)

순차적 목록
정렬된, 순서가 있는 보통 숫자 목록을 의미
type: 항목을 셀 때 사용할 카운터 유형
- 1: 숫자(기본값)
- a: 소문자 알파벳
- A: 대문자 알파벳
- i: 소문자 로마 숫자
- I: 대문자 로마 숫자
start: 항목을 셀때 시작할 수, 아라비아 숫자만 가능
reversed: 순서 역전
순서가 중요한 목록에 적용
ex) 레시피, 브레드크럼

브레드크럼 (BreadCrumbs) - 빵부스러기, 빵가루
사이트 구조와, 현재 페이지의 계층구조를 링크 목록 등으로 나타낸 것
사용자의 웹사이트의 탐색을 도와줌

출처: 서울시청

ul (Unordered List)

비순차적 목록
정렬되지 않은, 보통 bullet으로 표현되는 목록
순서가 중요하지 않은 목록에 적용

li (List)

목록의 항목
단독으로 사용할 수 없음. ol, ul의 자식요소로만 사용 가능

dl (Definition List)

설명 목록
dt(용어), dd (용어설명)
주로 용어사전 구현, 메타데이터(키-값 쌍의 목록)을 표시할때 사용

여러개의 용어와 하나의 설명, 하나의 용어 하나의 설명 가능

<dl>
	<dt>WEB<dt>
	<dt>WWW<dt>
	<dt>W3<dt>
	<dt>World Wide Web<dt>
	<dd>인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간<dd>
</dl>

dt (Definition Term)

용어(Term)
dl 요소 안에 위치
dl 의 자식, 자손이 아닌 단독으로 사용할 수 없음
dl과 함께 사용

dd (Definition Description)

설명(Description)
dl 요소 안에 위치
dl 의 자식, 자손이 아닌 단독으로 사용할 수 없음
dt와 함께 사용

💡 알고 넘어가기!

ol, ul과 다르게 안에 div태그를 감쌀 수 있음
하지만! 이미 정의 되어 있거나 설명이 정해져 있는 경우에만 사용할 수 있음
정확한 정보를 전달하는 사전 서비스, 의미 설명, 용어 설명 페이지 등..

list-style (CSS)

list의 bullet 모양 변경
list-style-image list-style-position list-style-type
- position : inside, outside
- type: disc, circle, square, decimal …

🎨CSS 선택자(가상 클래스/가상 요소)

가상 클래스 선택자

의사 클래스(pseudo selectors)
선택한 요소가 특별한 상태여야 만족
ex) :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용

동적 가상 클래스

`:link`

아직 방문하지 않은 상태

`:visited`

이미 방문한 상태

`:hover`

마우스 포인터가 올라간 요소

`:active`

마우스 포인터를 누르고 있는 요소
사용자 입력으로 활성화된 요소

`:focus`

현재 초점을 가진 요소

구조적 가상 선택자

`:first-child`

형제 요소 그룹 중 첫 번째 요소

`:last-child`

형제 요소 그룹 중 마지막 요소

body의 직계 자손의 경우 :first-child 선택자는 사용 가능하지만,
:last-child 선택자가 적용되지 않음

`:nth-child`

형제 사이에서의 순서에 따라 요소 선택

/* 2번째 li */
li:nth-child(2) {
  color: lime;
}
/* 홀수번째 li */
li:nth-child(odd) {
  color: lime;
}
/* 짝수번째 li */
li:nth-child(even) {
  color: lime;
}
/* 2n+1번째 li */
li:nth-child(2n+1) {
  color: lime;
}

`:nth-of-type`

형제 그룹 안에서 위치를 기반으로 형제 요소 선택

`:only-of-type`

동일한 유형의 형제가 없는, 형제 요소 중 유일하게 사용된 태그

`:not`

부정 선택자

/* li 중 첫번째가 아닌 li */
li:not(:first-child){
	margin-top:20px;
}

`:root`

html

전역 변수를 선언할 때 사용

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

가상 요소

::
선택자에 추가하는 키워드.
특정 요소의 일부분에만 스타일 적용

`::after`, `::before`

선택한 요소에 자식 생성
보통 content 속성과 짝을지어 요소에 장식용 콘텐츠를 추가할 때 사용
빈태그 img br input 에는 적용 안 됨

`::placeholder`

자리 표시자
input, textarea 요소에 정보 제공

챈스

열정적 끈기의 힘(GRIT)

이전 포스트

[멋사] 프론트엔드 스쿨 7기 학습 230705

다음 포스트

[멋사] 프론트엔드 스쿨 7기 학습 230706

멋쟁이사자처럼 FES 7기

🎨텍스트 꾸미기(CSS)

Color 색상

font-family 글꼴 종류

폰트 적용 방법

1. link

2. @import

3. @font-face

font-size 글꼴 크기

font-weight 텍스트 굵기

text-transform 대/소문자 변경

text-decoration 텍스트 라인

text-decoration-color

text-decoration-line

text-decoration-style

text-decoration-thickness

text-shadow 텍스트 그림자

text-align 텍스트 가로정렬

vertical-align 텍스트 세로정렬

line-height 줄 높이 설정

letter-spacing 글자 사이 간격

word-spacing 단어와 단어 사이 간격

text-indent 들여쓰기, 내어쓰기

word-break 줄바꿈

text-overflow 넘치는 텍스트 표기

📑목록 관련 태그(HTML)

ol (Ordered List)

ul (Unordered List)

li (List)

dl (Definition List)

dt (Definition Term)

dd (Definition Description)

list-style (CSS)

🎨CSS 선택자(가상 클래스/가상 요소)

가상 클래스 선택자

동적 가상 클래스

:link

:visited

:hover

:active

:focus

구조적 가상 선택자

:first-child

:last-child

:nth-child

:nth-of-type

:only-of-type

:not

:root

가상 요소

::after, ::before

::placeholder

[멋사] 프론트엔드 스쿨 7기 학습 230705

[멋사] 프론트엔드 스쿨 7기 학습 230707

0개의 댓글

`:link`

`:visited`

`:hover`

`:active`

`:focus`

`:first-child`

`:last-child`

`:nth-child`

`:nth-of-type`

`:only-of-type`

`:not`

`:root`

`::after`, `::before`

`::placeholder`