em과 rem
둘 모두 배수로 크기를 지정하는 단위로, 기본 글자 크기 16px을 기준으로 늘리거나 줄인다. 다만 em은 부모 태그가 존재할 경우, 부모의 크기를 기준으로 배수를 한다. 반면 rem은 부모 태그가 몇개가 존재하더라도 항상 같은 값이 나온다.
아래의 예를 보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- ex67 -->
<title>em의 출력값</title>
<style>
.em {
font-size: 1.2em;
} </style>
</head>
<body>
기본크기 16px
<div class="em">
테스트문구 (19.2px)
<div class="em">
테스트문구 (23.4px)
<div class="em">
테스트문구 (27.6px)
</div>
</div>
</div>
</body>
</html>em의 경우는 부모 태그의 1.2배를 거듭 한다. 그렇다보니 같은 값을 얻기 매우 힘들어 나온 기술이 rem이다.
rem은 부모 태그가 얼마나있든 상관없이 항상 16*1.2의 값인 19.2px가 나온다.
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- ex67 -->
<title>em과 rem 차이</title>
<!-- em : 배수 2em : 16px * 2 -->
<!-- rem : 상대배수, em안에 em속성을 방지해줌. -->
<style>
.em {
font-size: 1.2em;
}
.rem {
font-size: 1.2rem;
}
</style>
</head>
<body>
기본크기 16px
<div class="em">
테스트문구 (16*1.2=19.2)
<div class="em">
테스트문구 (19.2*1.2=23.4)
<div class="em">
테스트문구 (23.4*1.2=27.6)
</div>
</div>
</div>
<div class="rem">
테스트문구 (16*1.2=19.2)
<div class="rem">
테스트문구 (16*1.2=19.2)
<div class="rem">
테스트문구 (16*1.2=19.2)
</div>
</div>
</div>
</body>
</html>
vh와 vw단위
화면 크기에 비례해서 너비(vw)와 높이(vh)를 부여하는 단위다. 1vw, 1vh는 화면 크기의 1/100이다.
즉, 만약 화면 너비가 1000px라면 1vw는 10px인 것이다. 그러나 이는 절대값이 아니기에 화면이 작아지거나 커지면 1vw의 크기도 작아지거나 커진다.
vw: 화면 너비에 대응되는 너비(width)값. 화면 크기에 따라 커지거나 작아진다. 1/100
vh: 화면 높이에 대응되는 높이(height)값. 화면 크기에 따라 커지거나 작아진다. 1/100
vmax : 화면 너비나 높이, 둘 중 큰값으로 선택.
vmin : 화면 너비나 높이, 둘 중 작은값으로 선택.
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- ex68 -->
<title>vh와 vw 단위</title>
<!-- 단위: px % em rem -->
<!-- % 단위 : 부모컨테이너에 비례, 100% = 부모컨테이너의 크기만큼 -->
<!-- v 단위 : viewport(화면크기)에 비례하는 너비/높이 -->
<!-- : 화면크기가 1000px(가로), 1000px(세로)이면, -->
<!-- 1vh : 높이 10px로 지정, 10vh : 높이 100px
1vw : 너비 10px로 지정, 20vw : 너비 200px -->
<!-- vmax : 화면 너비나 높이 중에서 큰 값으로 선택 -->
<!-- vmin : 화면 너비나 높이 중에서 작은 값으로 선택 -->
<style>
.box1 {
/* 화면너비에 비례, 1vw 1000px일때 10px, 500px */
width: 50vw;
/* 화면높이에 비례, 1vh 1000px일때 10px, 500px */
height: 50vh;
/* 화면너비에 비례, 1000일때 60px */
font-size: 6vw;
background-color: purple;
display: flex;
justify-content: center;
align-items: center;
}
.box2 {
/* vmax : 화면너비/높이중에 더 큰값을 선택 */
width: 50vmax;
height: 50vmax;
font-size: 6vw;
background-color: aqua;
display: flex;
justify-content: center;
align-items: center;
}
.box3 {
/* vmin : 화면너비/높이중에 더 작은 값을 선택 */
width: 50vmin;
height: 50vmin;
font-size: 6vw;
background-color: aqua;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<!-- <div class="box1">50vw, 50vh</div> -->
<!-- <div class="box2">50vmax</div> -->
<div class="box3">50vmin</div>
</body>
</html>
Transition - 변환 효과
특정 조건( hover,action등 )이 만족되어야 실행되는 속성들(색이 바뀌거나 크기가 늘어나거나 줄어들거나 하는 효과들)에 대해, 그 속성이 실행되기까지의 지연시간(delay), 변환시간(duration), 적용속성(property), 보간타입(timing-function) 을 설정한다.
적용가능한 속성들
위치속성: top left right bottom
크기속성: width height
박스속성: margin padding
테두리속성: border-width radius color sytle
색상속성: color background-color
투명도속성: opacity 0.0(투명)~1.0(불투명)
형태속성: transform(기울기,스케일-늘어나고줄어듬)
**display, visibility 는 적용 불가능.**
transition-delay: 지연시간. 얼마뒤 시행될지 정함. 초단위(s)로 쓴다.
transition-duration: 변환시간. 초단위로 쓰며, 그 시간에 맞춰 서서히 변한다.
transition-property: 변화를 줄 속성들(width, color 등)
transition-timing-function: 보간타입. 실행률을 y축, 소요 시간을 x축으로 잡고, 그에 따른 그래프를 그리는 것. 초반에 빠르 게 변하다 중간에 느려지고, 마지막에 다시 빨라지는 식으로, 시간에 따른 속성 적용 속도를 조 절할수 있다.
직접 눈으로 보는게 더 이해하기가 쉬우니 배지어 곡선 함수를 참조하자.
https://cruiseweb.tistory.com/entry/CSS-Transition
[CSS] Transition
transition 일반적으로 CSS 속성 값이 바뀔 때, 즉각적으로 바뀌어 렌더링되지만, transition 속성을 사용하여 새로운 CSS 속성 값으로의 전환을 구체적으로 정의할 수 있다. transition-property, transition-durat
cruiseweb.tistory.com
transition-timing-function의 속성들
ease: 기본값. 초반, 후반 빠르고 중반 무난. 가장 눈이 편하다.
그외 : liner, ease-in, ease-out, ease-in-out
cubic-bezier() : 사용자 설정값.
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- ex69 -->
<title>변환효과 - 트랜지션</title>
<!-- CSS 변환효과 Transition -->
<!-- 위치속성: top left right bottom -->
<!-- 크기속성: width height -->
<!-- 박스속성: margin padding -->
<!-- 테두리속성: border-width radius color sytle -->
<!-- 색상속성: color background-color -->
<!-- 투명도속성: opacity 0.0(투명)~1.0(불투명) -->
<!-- 형태속성: transform(기울기,스케일-늘어나고줄어듬) -->
<style>
.box {
width: 100px; height: 100px;
background-color: orange;
/* 변환효과 : 모든 속성 2초동안 */
transition: all 2s;
}
.box:hover {
width: 200px; height: 200px;
}
.box:active {
background-color: red;
opacity: 0.8;
border: 10px solid green;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<!-- ex70 -->
<title>transitoin 속성</title>
<!-- transition-delay : 지연시간(몇초있다가) -->
<!-- -duration : 변환시간 -->
<!-- -property : 어떤속성에 변형을 줄것인가 -->
<!-- -timing-function : 보간타입(시간 vs 변화량) -->
<!-- 보간 : 인터폴레이션(시간의 간격을 채우는 것) -->
<!-- 보간타입 : linear, ease(기본값), ease-in, ease-out, -->
<!-- ease-in-out -->
<!-- https://cruiseweb.tistory.com/entry/CSS-Transition -->
<style>
#graph {
width: 610px;
border: 3px solid black;
}
.bar {
width: 10px; height: 50px;
background-color: orange;
margin: 5px;
/* 변환시간 */
transition-duration: 3s;
/* 지연시간 */
transition-delay: 0.5s;
/* 변환속성 */
transition-property: width, background-color;
}
#graph:hover > .bar {
width: 600px;
background-color: red;
}
/* 보간타입 */
.bar:nth-child(1){ transition-timing-function: linear; }
.bar:nth-child(2){ transition-timing-function: ease; }/*기본값*/
.bar:nth-child(3){ transition-timing-function: ease-in; }
.bar:nth-child(4){ transition-timing-function: ease-out; }
.bar:nth-child(5){ transition-timing-function: ease-in-out; }
/* 베지어곡선함수 이용 cubic-bezier.com */
/* 베지어곡선 : 두 점의 좌표와 거리로 곡선을 정의 */
.bar:nth-child(6){ transition-timing-function: cubic-bezier(.11,.9,.73,.09); }
</style>
</head>
<body>
<h2>CSS3 bar</h2>
<div id="graph">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</body>
</html>
미디어 쿼리(Media Query)
화면 너비에 맞춰 반응하는 동적인 웹을 말한다. 컴퓨터에서 보던 화면을 스마트폰으로 볼때, 작은 화면으로도 보기 좋게 자동으로 배치가 변하는 것이 바로 이것이다. 높이에는 세로 스크롤이 존재하기에 따로 설정해줄 필요는 없으나, 너비는 설정해줘야만 한다.
모바일 웹을 따로 만드는 경우도 있으나, 그러지 않는다면 반응형으로 만들어줘야한다.
반응형 웹이 pc인지, 아니면 다른 기기인지 판단하는 기준은 아래와 같다.
pc화면: 가로 960px이상.
테블릿 화면: 가로 768px이상. 아이패드의 수직 너비상태다.
스마트폰 화면: 767px이하. 모바일 표준 가로 해상도다.
이 기능은 마치 java나 다른 프로그래밍 언어들의 오버라이딩 기술처럼 쓸수 있다. 기존의 속성이 먼저 적히고 미디어 쿼리문이 적혀야 옳게 작동한다. 반대는 뒤에 쓰인 속성이 다시 덮어쓰게 된다.
형식: @media screen and (조건) and (조건) 형식으로 쓴다.
@media screen and ( max-width: 767px ) and ( orientation: portrait ){ }
@media: 미디어 쿼리 시작선언.
screen: 속성을 해석하는 것이 screen기기라고 정함.
and: 조건문 and. 앞 뒤 모두 만족시켜야 한다는 의미.
( max-width: 767px ): 최대 너비가 0 ~ 767px일때. 스마트폰을 말함.
( orientation: portarait ): 세로모드일때.
{ }: 실행문이 들어갈 공간.
만약 크기를 보기 좋게 줄이고 싶다면 width, 색을 바꾸기 싶다면 color을 바꾸는 식으로 사용하면 된다. 그 외의 속성들은 앞서 적용한 그대로 유지 되기 때문에 다시 적지 않아도 된다.
<style>
/* 모바일 해상도일때 적용됨 */
/* 최대너비 0~767px에서, 세로모드일때 */
@media screen and ( max-width: 767px )
and ( orientation: portrait ){
body {
background-color: red;
color: white; font-weight: bold;
}
}
/* 최대너비 0~767px에서, 가로모드일때 */
@media screen and ( max-width: 767px )
and ( orientation: landscape ){
body {
background-color: cyan;
color: white; font-weight: bold;
}
}
/* 태블릿 해상도 */
/* 768px ~ 959px 까지의 너비일때 */
@media screen and ( min-width: 768px )
and ( max-width: 959px ) {
body {
background-color: green;
color: white; font-weight: bold;
}
}
/* PC해상도 */
@media screen and ( min-width: 960px ){
body {
background-color: plum;
color: white; font-weight: bold;
}
}
</style>pc, 스마트폰, 테블릿에 각각 대응해서 변하는 화면이다.
벤더 프리픽스
백앤드를 지향하는 우리가 깊게 알 필요는 없다. 신기술을 정식 지원하기 전, 벤더 프리틱스를 붙여 중간 시험단계로 적용한다. 일종의 임상시험? 과 비슷한 개념으로 이해하면 편하다.
트랜스폼 변형
굳이 알 필요는 없고, 그냥 이런 기능도 있구나, 하고 넘어가자.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ex75 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>트랜스폼 변형</title>
<!-- Transform : 변형 (크기,각도) -->
<!-- 2차원(XY평면), 3차원(XYZ평면) -->
<!-- 2차원 좌표계 : Left-Top이 0,0인 지점(스크린좌표계) -->
<!-- 3차원 좌표계 : 2차원좌표계 + z축 -->
<!-- Z+ 방향 : 모니터앞쪽, Z- 방향 : 사용자측 -->
<!-- rotate(각도값) : 회전 -->
<!-- translate(X,Y) : X,Y 위치로 이동 -->
<!-- translateX(X): X위치로 이동 -->
<!-- translateY(Y): Y위치로 이동 -->
<!-- scale(X,Y): 크기를 변경 1은 원본, 2는 2배, 0.5 절반크기 -->
<!-- scaleX(X): 가로 크기 변경 -->
<!-- scaleY(Y): 세로 크기 변경 -->
<!-- skew(X,Y 각도값) : 기울이기, X축방향,Y축방향으로 -->
<!-- skewX(X): X축 기준 기울이기 -->
<!-- skewY(Y): Y축 기준 기울이기 -->
<!-- transform-origin : 앵커값 회전기준값 -->
<style>
section {
width: 100px; width: 100px;
border: 5px solid black;
}
div {
width: 100px; height: 100px;
background: red;
/* transform: rotate(45deg); */
/*왼쪽 아래 기준*/
/* transform-origin: left top; */
/* 오른쪽 아래 기준 */
/* transform-origin: right bottom; */
/* 가로 30% 세로 60% 기준 */
/* transform-origin: 30% 60%; */
/* transform: translate(30px, 30px); */
/* transform: rotate(30deg); */
/* transform: translate(30px, 30px) rotate(45deg); */
/* transform: translate(100px, 200px) scale(2, 2); */
/* transform: skewX( 45deg ); */
/* transform: skewY( 45deg ); */
transform: skew( -15deg, 15deg );
}
</style>
</head>
<body>
<section>
<div></div>
</section>
</body>
</html>
'공부 > html --- css' 카테고리의 다른 글
| 36일차 -실전예제 (0) | 2023.01.02 |
|---|---|
| 26일차 복습 (0) | 2022.12.20 |
| 25일차 복습 (0) | 2022.12.19 |
| 24일차 복습 (0) | 2022.12.15 |
| 23일차 복습 (0) | 2022.12.14 |
