2023.02.21 TIL

정승원·2023년 3월 11일

📌 오늘의 생각

오늘은 평소에 개발하며 가장 궁금했던 절대단위와 상대단위의 차이에 대해 학습하였다. CSS는 이해가 잘 안되는 경우, 직접 브라우저에 그려보며 부족한 부분을 채워나가는 학습법이 가장 효과적인것 같다.

📒 목차

HTML 요소의 부모, 자식 관계

선택자 (가상 클래스, 가상 요소, 형제 요소)

justify-content / align-items

flex-wrap

flex-item의 속성

상속

웹폰트

폰트

단위

HTML

1️⃣ HTML 요소의 부모, 자식 관계

CSS

2️⃣ 선택자 (가상 클래스, 가상 요소, 형제 요소)

✅ 가상 클래스 선택자

`:first-child`

형제 요소중 첫번째 선택
: → 왼쪽 스페이스 해야한다

<div class="container">
	<h1>이렇게</h1>
	<p>자식이 있다면?</p>
</div>

.container h1:first-child{
	background :red
}

`:first-of-type`

형제 요소 중 자신과 유형이 일치하는 제일 첫번째 요소 선택

<div class="container">
	<h1>이렇게</h1>
	<p>자식이 있다면?</p>
	<p>이번엔</p>
	<h2>다른걸</h2>
	<p>해볼거야</p>
</div>

.container p:first-of-type{
	background :red
}

`:nth-child(n)`

모든 형제요소 중 n번째 요소 선택
() → 함수, 즉 수학식이 들어갈 수 있다

<div class="container">
	<p>1번</p>
	<p>2번</p>
	<p>3번</p>
	<p>4번</p>
	<p>5번</p>
</div>

.container p:nth-child(3){
	color : red;
}

`:nth-of-type(n)`

형제 요소 중 특정 형제의 n번째 요소 선택

<div class="container">
	<p>1번</p>
	<p>2번</p>
	<p>3번</p>
	<span>4번</span>
	<span>5번</span>
	<p>6번</p>
	<span>7번</span>
</div>

.container p:nth-of-type(4) {
  color: red;
}

`:active`

활성화된 요소를 선택 하는 가상 클래스 선택자
❗️ 활성화 된 요소 → 버튼등을 클릭해서 요소의 동작이 활성화 되어있는 상태

`:focus`

focus를 받고있는 입력창들의 요소를 선택 하는 가상 클래스 선택자
❗️ focus를 받고 있는 요소란 입력창의 커서가 활성화 되어있는 상태

`:visited`

사용자가 방문한 적 있는 링크를 선택 하는가상 클래스 선택자
❗️ 방문한 적 있는 링크는 말 그대로 링크를 눌러 해당 경로를 방문한 기록이
브라우저 상에 남아 있는 링크
방문한 적이 있는 경우 → 보라색으로 바뀐다

✅ 가상 요소 선택자

`:before, :after`

html요소를 수정하지 않고, css만으로 가상 요소를 추가해 선택할 수 있다
❗ 주의할점
- 가상으로 만든 요소이기 때문에 html상에 존재하지 않는다
- content요소를 작성해야한다!!
- 그렇지 않으면 브라우저에 그려지지 않는다

<div class="box1">
 나는 박스1입니다.
</div>

.box1{
    width : 200px;
    height: 300px;
    background-color: yellow;
}
.box1:after{
    content:"나는 박스2입니다.";
    display: block;
    background-color: blue;
}

✅ 형제 요소 선택자

`A ~ B {}`

A와 같은 부모를 가지고 있는 형제 요소들 중 B를 선택할 수 있다

<div class="container">
	<p class="text">나는 text입니다.</p>
	<span>나는 span입니다.</span>
	<span>나는 span입니다.</span>
	<p>나는 p입니다.</p>
	<p>나는 p입니다.</p>
</div>

.text ~ span {
	background : red
}

3️⃣ justify-content / align-items

`justify-content`

중심축 방향 정렬

`align-items`

중심축 수직방향 정렬!

4️⃣ flex-wrap

❗ align-items → flex-items이 한줄인 경우 우선 적용!!!
item이 두줄인 경우, align-content 사용
flex의 item들이 여러개인 경우, 줄바꿈을 허용할 것인지 아닌지
결정, 만약 허용하지 않는다면 우겨겨서 한줄에 들어간다

`flex-wrap : nowrap`

item 줄바꿈 허용 X
한줄에 우겨져서 들어간다

`flex wrap : wrap`

- item의 가로 사이즈가 container의 가로 사이즈를 넘기면,
  
  자연스럽게 다음 줄로 넘어간다.

`flex-flow`

flex-direction과 flex-wrap 합쳐놓은 단축 속성

5️⃣ flex-item의 속성

`order`

item의 순서 지정

`flex-basis`

item의 기본 사이즈 지정

`flex-shrink`

설정된 값에 따라 flex-container요소 내부에서 flex-item 요소의 크기 축소

`flex-grow`

flex-item 요소가 flex-container 요소 내부에서 할당 가능한 공간 비율 선언

6️⃣ 상속

기본적으로 css는 부모 요소에 지정한 속성값을 자식 요소에게도 상속해서 적용한다
상속 속성이 겹친 경우, Cascading 우선순위에 의해 결정된다
상속 되는 속성, 안되는 속성

7️⃣ 웹폰트

`font-family`

HTML 요소의 글씨체 바꾸기
폰트를 적용하려면 폰트 파일이 유저의 컴퓨터에 설치되어 있어야 한다.
여러개의 font-family 적용하는 경우, 앞에서부터 순서대로 폰트가 적용된다
폰트가 없다면 뒤로 하나씩 적용하는 것!!

.선택자{
	/* 폰트이름에 공백이 있는 경우 */
	font-family:"폰트 이름","폰트 이름2","폰트 이름3"
	/* 폰트이름에 공백이 없는 경우 */
	font-family:폰트이름,폰트이름2,폰트이름3
	/* 혼용해서 사용할 경우 */
	font-family:폰트이름,"폰트 이름2"
}

`웹폰트`

유저가 폰트를 설치해야 폰트를 적용시킬 수 있던 문제를 해결하기 위해 만들어진 것
웹폰트는 사용자 본인의 ㅋ머퓨터에 폰트를 성치하지 않더라도 특정 서버에 위치한 폰트를 다운받아 웹페이지에 표시

`웹폰트 적용법`

@font-face

웹폰트 파일 준비 (확장자명: woff/ woff2/ ttf/ eot)

CSS 문서에서 @font-face 이용 폰트 파일 불러오기

불러온 폰트 파일 이용하여 font-family 만들기

만든 font-family 사용

@import

구글 폰트에 접속하여 원하는 폰트 찾기

import 선택 후, 해당 import 구문 css 파일에 입력

8️⃣ 폰트

`font-size`

텍스트의 크기 지정
px, rem, em 등 사용

font-size: 15px
font-size: 20em
font-size: 25rem

`font-weight`

텍스트의 두께 지정
100단위의 수치 입력 or regular, bold 키워드 사용

font-weight: 700

`text-decoration`

텍스트에 장식용 선 추가

text-decoration: underline
text-decoration: overline
text-decoration: line-through
text-decoration: none

`color`

텍스트의 색상 지정

/* 헥스코드 입력시(헥스코드는 6자리 입니다.) */
color : #000000

/* rgb색상 이용시 */
color : rgb(0,0,0)

/* 키워드 이용시 */
color: red

`line-height`

텍스트의 행간을 설정

line-height: 2.0

`letter-spacing`

텍스트의 자간을 설정

letter-spacing: 0.1rem

`word-spacing`

텍스트의 단어 간 간격 지정

word-spacing: 3px

`text-align`

블록요소나 표안에서 텍스트의 가로 정렬방식을 지정

text-align: center
text-align: left
text-align: right
text-align: justify

`vertical-align`

인라인 요소나 표안에서 텍스트의 세로 정렬 방식을 지정

vertical-align: top
vertical-align: middle
vertical-align: bottom

`text-indent`

텍스트의 들여쓰기 설정

text-indent: 10%

`text-transform`

영문 텍스트의 대소문자 바꾸기

text-transform: cpaitalize
text-transform: none
text-transform: uppercase
text-transform: lowercase

`word-break`

텍스트가 콘텐츠 영역 밖으로 넘쳤을 때, 어떻게 줄을 바꿀지 설정

work-break: keep-all
word-break: break-all

`overflow-wrap`

단어가 콘텐츠 박스 밖으로 넘쳤을 때, 줄바꿈 여부 설정

overflow-wrap: normal
overflow-wrap: break-word

`overflow`

콘텐츠가 커서 요소 안에서 내용을 다 보여주기 힘들 때, 어떻게 보여줄지 설정

overflow: visible
overflow: hidden
overflow: scroll
overflow: auto

`text-overflow`

줄바꿈을 하지 않을 때, 요소 밖으로 넘치는 text를 어떻게 표시할지 설정
❗ text-overflow 적용 전 선행조건
1. white-space: nowrap;
2. overflow: hidden;

text-overflow: clip
text-overflow: ellipsis

9️⃣ 단위

✅ 절대단위

외부 요인의 영향 없이 절대적인 값

`px = pixel 화소`

화면 구성하는 기본 단위

`pt(포인트) = 1/72 inch (인치)`

인쇄를 위한 단위
웹에서는 잘 사용하지 않는다

✅ 상대단위

외부 영향 받아 유동적인 값

`%`

부모 요소의 해당 속성 값에 비례하여 지정 비율의 값

`em`

스타일 지정 요소의 font-size 속성값에 비례한 값

/* font-size : 16px 인 경우 */

1em => 16 * 1 = 16px
0.8em => 16 * 0.8 = 12.8px
3em => 16 * 3 = 48px

`rem`

최상위 html 요소의 font-size 속성 값에 비례한 값

/* font-size : 16px 인 경우 */

1rem => 16 * 1 = 16px
0.8rem => 16 * 0.8 = 12.8px
3rem => 16 * 3 = 48px

정승원

이전 포스트

2023.02.20 TIL

다음 포스트

2023.02.21 TIL

📌 오늘의 생각

📒 목차

HTML

1️⃣ HTML 요소의 부모, 자식 관계

CSS

2️⃣ 선택자 (가상 클래스, 가상 요소, 형제 요소)

✅ 가상 클래스 선택자

:first-child

:first-of-type

:nth-child(n)

:nth-of-type(n)

:active

:focus

:visited

✅ 가상 요소 선택자

:before, :after

✅ 형제 요소 선택자

A ~ B {}

3️⃣ justify-content / align-items

justify-content

align-items

4️⃣ flex-wrap

flex-wrap : nowrap

flex wrap : wrap

flex-flow

5️⃣ flex-item의 속성

order

flex-basis

flex-shrink

flex-grow

6️⃣ 상속

7️⃣ 웹폰트

font-family

웹폰트

웹폰트 적용법

8️⃣ 폰트

font-size

font-weight

text-decoration

color

line-height

letter-spacing

word-spacing

text-align

vertical-align

text-indent

text-transform

word-break

overflow-wrap

overflow

text-overflow

9️⃣ 단위

✅ 절대단위

px = pixel 화소

pt(포인트) = 1/72 inch (인치)

✅ 상대단위

%

em

rem

2023.02.20 TIL

2023.02.22 TIL

0개의 댓글

`:first-child`

`:first-of-type`

`:nth-child(n)`

`:nth-of-type(n)`

`:active`

`:focus`

`:visited`

`:before, :after`

`A ~ B {}`

`justify-content`

`align-items`

`flex-wrap : nowrap`

`flex wrap : wrap`

`flex-flow`

`order`

`flex-basis`

`flex-shrink`

`flex-grow`

`font-family`

`웹폰트`

`웹폰트 적용법`

`font-size`

`font-weight`

`text-decoration`

`color`

`line-height`

`letter-spacing`

`word-spacing`

`text-align`

`vertical-align`

`text-indent`

`text-transform`

`word-break`

`overflow-wrap`

`overflow`

`text-overflow`

`px = pixel 화소`

`pt(포인트) = 1/72 inch (인치)`

`%`

`em`

`rem`