CSS 속성: 크기(단위)
px
절대 크기 지정 방식
내가 정해준 크기가 무조건 적용
rem
문서 요소 최상위 태그 = html의 font-size와의 배율
1rem = 16px (html font-size default value = 16)
2rem = 32px
em
상위 요소(부모) font-size의 배율
1.5em = 부모 요소 font-size 1.5배
* 아주 특별한 경우에만 사용 ; 미디어 쿼리
%
부모 요소(상위 요소) 혹은 기준이 되는 요소와의 [비율]
* 가장 가까운 요인이 되는 요소와의 비율
; px, rem, em, & 중 px, rem, &을 대부분 많이 사용
vw(viewpoint width), vh(viewpoint height)
100vw ; 사용자 해상도의 100% 길이 ; 잘 사용하지 않음
100vh ; 사용자 해상도의 100% 높이** 아주아주 많이 사용
* 100vw ; 스크롤의 길이는 포함하지 않음
calc
계산 기능 : 특정 높이의 요소를 제하기 위해 사용
ex.
height: calc(100vh - 80px)
* 띄어쓰기 꼭 지켜야 함
CSS의 배경
background-color
: 배경색
background-image
: 배경 이미지
background-repeat
: 바둑판 배열(반복) ; 일종의 옵션
background-position
: 반복되지 않는 배경 이미지의 상대 위치를 설정
background-attachment
: 위치가 설정된 배경 이미지를 고정
스크롤과 무관하게 화면에서 배경이 이동하지 않습니다
background-size
: 배경의 크기 설정
cover
페이지에 가득 차게
종횡비에 따라 이미지가 잘릴 수 있음
contain
원본 종횡비에 맞게 사진이 전체가 보이도록
사진의 크기에 따라 여백이 생김
축약
background
: 경로, 반복여부, 위치, 속성 / 사이즈
background: url(이미지경로) no-repeat fixed
ex.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>font</title>
</head>
<style>
/*
font-family
폰트 적용 방식
1. import ; 거의 사용하지 않음
2. link ; 링크로 가지고 오는 게 제일 빠름
3. 다운로드 ; 실무
웹사이트 제작 시 기본 폰트는 굉장히 부자연스럽습니다
무료 폰트 사이트: 구글폰트, 네이버폰트
*/
@font-face {
font-family: "noto";
src: url("./font.otf") format("opentype");
/*ttf, otf는
woff
woff2
*/
}
* {
font-family: "Noto Sans KR", sans-serif;
}
#rem {
font-size: 10%;
}
#em {
font-size: 2em; /* = 부모 요소의 2배*/
}
#progres {
width: 500px;
border: 1px solid #999;
}
#per {
width: 70%;
background-color: #00f;
color: #fff;
text-align: center;
font-size: 16px;
}
html {
font-size: 32px;
}
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 100px;
background-color: yellow;
}
nav {
width: 100%;
height: 80px;
background-color: aqua;
}
main {
height: calc(100vh - 100px - 80px); /*띄어쓰기 아주 중요*/
background-color: rgb(255, 174, 216);
}
body {
background-image: url(./image/1.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.color {
background-color: #000;
color: #fff;
}
/*
패딩, 마진
박스사이징, 테두리
플렉시블 레이아웃
그리드 리에아웃 (모던 CSS 레이아웃)
미디어쿼리, 트랜스폼, 애니메이션, 트랜지션
+ 퍼블리싱 페이지
*/
</style>
<body>
<p>안녕하세요, 바뀐 폰트입니다</p>
<p style="font-size: 48px">안녕하세요, 바뀐 폰트입니다</p>
<p style="font-weight: bold">
안녕하세요, 바뀐 폰트입니다 why not imported!!!!
</p>
<!-- font-weight: 100~900 100 ; thin 400 ; regular (기본값 ; 아무것도 지정하지
않았을 때) 700 ; bold (명령어) 900 ; exttra bold -->
<p style="font-size: 48px" font-weight:900>안녕하세요, 바뀐 폰트입니다</p>
<p style="font-weight: 100">안녕하세요, 바뀐 폰트입니다</p>
<h2>rem</h2>
<div id="rem">
<!-- html의 크기에 의존 -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita ea nihil
necessitatibus? Doloremque vel excepturi iure esse, inventore et numquam
suscipit architecto laborum, necessitatibus at explicabo, possimus
molestias? Consectetur, explicabo.
</div>
<h2>em</h2>
<div style="font-size: 16px">
<p id="em">
<!-- 부모 요소에 영향을 받기 때문에 p태그로 적용 -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt beatae
rem expedita consectetur recusandae! Officiis dolorum ex veritatis!
Facere dolorum nisi ratione? Illum alias nihil ut! Deleniti dolores non
repudiandae?
</p>
</div>
<h2>per</h2>
<div id="progress">
<div id="per">70%</div>
</div>
<h2>CSS 배경</h2>
<div class="color">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam voluptate
dignissimos dolor quod perspiciatis repellat labore est deserunt corrupti,
numquam, atque mollitia explicabo quo, earum nulla laudantium iure cumque
id!
</div>
<div class="image-1">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam facilis
itaque enim voluptate delectus culpa earum quasi similique veritatis eum,
beatae ipsam laboriosam in. Mollitia nam dolorem esse modi enim.
</div>
<div class="image-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem
praesentium fugiat sequi accusantium dolore unde necessitatibus sapiente
nulla accusamus nesciunt iste eum reprehenderit nostrum quis eveniet
dolorem, odit sunt nobis!
</body>
</html>
HTML 파싱 과정, google.com을 주소창에 입력했을 때 일어나는 일?!
-> cs ; computer science 관련 질문
1. google.com을 입력했을 때
2. 도메인(google.com)을 통해 DNS(Domain Name Server)에서 대응하는 ip주소를 찾음
3. 그리고 해당 주소에 웹 페이지를 그리기 위한 데이터를 요청
4. WAS(서버의 도우미) ex. tomcat => 데이터 요청, 데이터 응답
5. 다시 웹 브라우저에 전송, 웹 브라우저는 받아온 데이터를 토대로 페이지를 파싱
6. 웹 브라우저에 전달된 페이지를 브라우저 로더가 분석
7. HTML, CSS, JS를 분리함
8. HTML(DOM tree), CSS(CSS OM), js(자바스크립트 엔진)
* DOM ; 내가 만든 것들 ; 검색이 빠름
9. DOM tree, CSS OM이 합쳐지면서 랜더링 트리(F12)
10. 랜더링 크리 : DOM tree + CSS
랜더링 트리를 토대로 CSS가 정해지는 레이아웃 과정
-> 크기, 위치 계산
11. JS로드 (평가와 실행 -> JS 실행 컨텍스트)
12. 페인트 (사용자 화면에 그려주는 것)
13. 사용자의 행위에 따라 CSS나 HTML의 구조적 변경이 일어남
이 경우에는 레이아웃 과정 -> 페인트 과정을 다시 그리는
리페인트 및 리레이아웃 과정이 존재