calc()
계산식으로 값을 나타내는 함수. calc()함수는 calculation의 줄임말로 '계산기'를 뜻한다.
이름 그대로 계산식을 사용하여 속성값을 적용한다. 함수의 괄호 안에는 각도, 시간, 백분율,
숫자 등 다양한 단위를 사용하는 계산식이 들어간다.
[기본형]
선택자{
속성 : calc(계산식);
clamp()
clamp()함수는 대상 2개를 물리적으로 고정하는 장치이다.
특정 값의 범위를 '고정'하거나 '제한'할때 사용한다.
clamp()함수에는 최솟값과 최적값, 최댓값 이렇게 3가지 값이 들어간다.
3가지 값을 지정하면 화면 크기에따라 값을 바꿀 수 있는데, 최솟값보다 작아질 수 없고
최댓값보다 커질 수 없다.
[기본형]
선택자{
속성 : clamp(최솟값, 최적값, 최댓값)
h1 {
/* 최솟값 : 1em(16px), 최적값: 브라우저 화면의 2%, 최댓값: 2em(32px) */
font-size: clamp(1em, 2vw, 2em);
}
filter
다양한 시각 효과를 줄때 사용하는 속성이다.
마치 포토샵으로 꾸민것 같은 효과를 준다.
[기본형]
filter : 함수(값);
[속성값]
- blur(흐림정도px)
: 선택한 이미지에 흐림 효과를 적용한다. 만약 부모에 적용되면 부모박스를 포함한
안쪽 컨텐츠까지 블러처리가 된다.
- brightness(밝기 정도)
: 선택한 이미지를 밝거나 어둡게 처리한다. 밝기 정도는 백분율이나 단위없이 숫자를 사용한다.
brightness(0%)또는 brightness(0)은 완전히 검정색으로 변하고,
brightness(100%)또는 brightness(1)은 현재 이미지 밝기를 유지하고,
brightness(200%)또는 brightness(2)는 밝기를 2배로 증가시킨다.
- contrast()
: 이미지의 밝기나 채도 대비를 지정한다. 단위는 %를 사용한다.
contrast(0%)은 대비가 전혀 없이 회색으로 표시된다.
contrast(100%)은 기존 이미지의 밝기와 채도를 유지한다.
contrast(200%)은 대비를 2배로 증가시켜 색상간의 차이를 더 뚜렷하게 한다.
- drop-shadow()
: 이미지의 윤곽을 따라 그림자를 처리한다. box-shadow와 동일하게
속성값을 적용한다.
drop-shadow(가로위치 세로위치 흐림정도 그림자색상)
- invert()
: 이미지의 색상을 반전 시킨다. 값은 0% ~ 100%사이의 값을 입력한다.
1% ~ 50%까지는 회색으로 이미지가 전체 처리되고, 50% 이상부터
색상이 반전된다. 100%가 완전한 색상 반전이다.
- sepia()
: 이미지를 세피아 톤으로 변경해서 표시한다. 세피아 톤이란
이미지나 사진에 색조를 추가하여 빈티지한 효과를 내는 필터이다.
%단위를 사용한다.
- grayscale()
: 이미지를 흑백사진으로 변환한다. 값은 %단위를 사용하고
100%에 가까워 질수록 점점 흑백 사진이 된다.
- opacity()
: 투명도를 조절한다. 0% ~ 100%값을 사용할 수 있다.
0%는 이미지를 완전히 투명하게 만들고, 100%는 원본이다.
- hue-rotate()
: hsl색상환을 사용하여 색상을 바꾸는 속성값이다.
각도의 단위인 deg을 사용한다.
- saturate()
: 이미지의 채도를 변경시키는 속성값이다. 단위는 %를 사용한다.
.blur img {
filter: blur(5px);
}
.brightness {
filter: brightness(3);
}
.contrast {
filter: contrast(200%);
}
.dropshadow {
filter: drop-shadow(-2px -4px 5px rgb(17, 17, 141));
}
.invert {
filter: invert(100%);
}
.sepia {
filter: sepia(100%);
}
.grayscale {
filter: grayscale(100%);
transition: 1s;
}
.grayscale:hover {
filter: grayscale(0%);
}
.opacity {
filter: opacity(50%);
}
.huerotate {
filter: hue-rotate(90deg);
}
.saturate {
filter: saturate(200%);
}
min(), max()
화면 넓이에 따라 속성값을 다르게 적용할때 최솟값과 최댓값을 고려할 수 있다.
min()함수는 괄호안에 나열된 값 중에 가장 작은 값을 적용하고,
max()함수는 괄호안에 나열된 값 중에 가장 큰 값을 적용한다.
[기본형]
선택자{
속성 : min(값1, 값2, 값3...);
속성 : max(값1, 값2, 값3...);
}
반응형 웹
pc, 태블릿, 모바일 환경에 맞춰 레이아웃을 바꿔 보여주는
웹 기술을 말한다.
사용자가 어떠한 기기를 통해 웹 사이트에 접속하면
meta태그의 veiwport속성이 기기의 해상도 사이즈를 파단하여
그에 맞는 레이아웃을 보여준다.
meta태그는 화면의 해상도뿐만아니라 검색엔진의 검색 키워드를
판별하여 검색어 엔진(robots)이 해당 게시물을 걸러서 보여주게끔
만드는 역할도 하며, 언어의 인코딩도 담당한다.
viewport
반응형 웹 디자인에서 기본적으로 알아두어야 하는 것이 바로
'뷰포트'이다. pc에 맞게 제작한 웹 사이트를 모바일 기기에서
접속해보면 모든 내용이 정비율로 줄어들어 작게 표시된다.
그 이유는 pc화면과 모바일 화면에서 표시되는 픽셀의 차이때문인데,
뷰포트를 지정하면 접속한 화면 기기에 맞춰 확대하거나 축소하여
표시할 수 있다. 이때 뷰포트란 스마트폰 화면에서 실제로 내용이
표시되는 영역을 말한다.
뷰포트는 <meta>태그를 <head>태그 안에 작성한다.
[기본형]
<meta name='viewport' content='속성1=값, 속성2=값....'/>
[뷰포트 속성 종류]
- width
: 뷰포트의 넓이. device-width또는 크기(px)를 값으로 사용한다.
기본값은 브라우저에서 설정한 기본값을 사용한다.
- height
: 뷰포트의 높이. device-height또는 크기(px)를 값으로 사용한다.
기본값은 width와 마찬가지로 브라우저에서 설정한 기본값을 쓴다.
- user-scalable
: 확대/축소 여부. 사용하는 값은 yes 또는 no를 사용한다.
기본값은 yes이고 yes는 1이라는 뜻이고, 1은 device-widthdhk
device-height값을 10으로 쓴다.
- initial-scale
: 초기 확대 축소값. 1~10까지의 값을 사용하고, 기본값은 1이다.
반응형 단위
뷰포트 개념이 등장하기 전까지는 CSS에서 크기를 지정할때 주로 px이나 %단위를
사용했다. 하지만 뷰포트 개념이 등장한 이후에는 vw, vh, vmin, vmax와 같은 단위를
함께 사용할 수 있다.
- vw(viewport width) : 1vw는 브라우저의 넓이를 백분율로 나눴을때 1%라는 의미이다.
- vh(viewport height) : 1vh는 브라우저의 높이를 백분율로 나눴을때 1%라는 의미이다.
(스크롤과 관계없이 브라우저 창 기준)
- vmin(viewport minimum) : 뷰포트의 넓이와 높이를 비교했을때 더 작은 값을 적용한다.
- vmax(viewport maximum) : 뷰포트의 넓이와 높이를 비교했을때 더 큰 값을 적용한다.
반응형 요소 만들기
============================================
반응형 웹은 화면 크기에 따라 문서에 있는 여러 요소의 배치도 바뀌고 크기도 바뀐다.
그렇다면 크기가 고정되어 있는 글자 크기나 이미지는 어떻게 조절하는지 요소를 반응형으로
만드는 방법을 알아보자
1. 상댓값으로 글자 크기를 지정하는 em, rem
------------------------------------------------
글자 크기를 지정할때 px단위를 많이 사용한다. 하지만 px은 브라우저 넓이 높이와는
관계없이 항상 고정된 고정단위로, 반응형을 작업할 때 화면 사이즈가 작아지면
글자 크기를 제어하기가 어렵다. 이럴때에는 em또는 rem단위를 이용하여 글자의 크기를
상대적으로 지정할 수 있다.
em
---------------
em단위는 부모요소에서 지정한 글꼴의 대문자 M의 넓이를 1em으로 놓고 상대적으로
값을 계산한다. 부모 요소에 글자 크기를 지정하지 않았다면 body요소의 기본 크기를
사용한다. body기본 글자 크기는 16px이고 이 값이 1em에 해당한다.
rem
-----------------
em에서 부모요소의 글자 크기 때문에 예상하지 못한 결과가 나오는 것을 막기위해
rem단위가 생겼다. rem은 root(html태그)에서 지정한 크기를 기준값으로 한다.
이렇게 rem단위를 쓰면 중간에 부모의 폰트나 사이즈가 바뀌더라도 root를 기준으로만
글자 크기를 설정하기 때문에 늘 유지된 스타일로 디자인을 할 수 있다.
가변 이미지
가변 이미지란 부모 요소 넓이에 따라 넓이와 높이가 바뀌는 이미지를
말한다. 이미지는 웹 문서에 불러올때부터 크기가 정해져 있으므로
브라우저 화면이 작아지면 이미지의 일부만 보일 수 있다.
또는 부모영역이 이미지 기존 사이즈보다 커지면 이미지가 늘어나면서
화질이 떨어질 수 있다.
이를 방지하기 위해 max-width나 object-fit을 사용하여 이미지를
제어할 수 있다.
이미지를 부모영역에 맞추는 다양한 방법
1. width : 100%로 설정하기
: 이미지의 넓이를 100%로 지정하면 이미지가 부모 요소의 넓이에
맞춰 항상 100%를 유지한다. 단, 부모영역의 높이가 더 높다면
빈 공간이 생길 수 있다.
2. max-width : 100%로 설정하기
: max-width를 100%를 사용하면 부모 요소의
크기에 따라 이미지가 커질때 원본 이미지만큼만 커진다.
즉, 부모요소가 아무리 커지더라도 사진의 원본사이즈보다 커질
수 없다.
미디어쿼리
미디어 쿼리는 반응형 웹 디자인에서 가장 기본적인 개념이다.
사이트에 접근하는 기기의 해상도에 따라 서로 다른 스타일
시트를 적용해주는 기능을 한다. 미디어 쿼리는 CSS모듈 중 하나로
접속하는 기기의 화면에 맞춰 다양한 레이아웃을 보여줄 수 있다.
[기본형(구문)]
@media only또는not 미디어유형 and (조건) and (조건){
선택자{ 속성 : 값; }
}
- only: 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어쿼리를
무시하고 실행하지 않음.
- not : not 다음에 지정하는 미디어 유형을 제외한다.
예를 들어 not tv라고 쓰면 TV유형은 제외한다.
only와 not은 생략할 수 있다.
- and : 조건을 연결하는 속성으로 앞뒤에 반드시 공백으로 구분되어
있어야 한다.
[미디어 유형]
- all : 모든 유형에서 사용할 css를 정의한다. 기본값.
- print : 인쇄 장치에서 사용할 css를 정의한다.
- screen★ : 컴퓨터 스크린에서 사용할 css를 정의한다.
스마트폰의 스크린도 포함한다.
- tv : 음성과 영상이 동시에 출력되는 tv에서 사용할 css를 정의한다.
- aural : 음성 합성장치(주로 화면을 읽어 소리로 출력해주는 장치)
에서 사용할 css를 정의한다.
- braille : 점자 표시장치에서 사용할 css를 정의한다.
- handheld : 패드(pad)처럼 손에 들고 다니는 장치를 위한 css를 정의한다.
- projection : 프로젝터를 위한 css를 정의한다.
- tty : 디스플레이 기능이 제한된 장치에 맞는 css를 정의한다.
이런 장치에서는 px단위를 쓸 수 없다.
- embossed : 점자 프린터에서 사용할 css를 정의한다.
[조건]
- min-width: 최소 해상도. '~ 사이즈 부터'라고 해석한다.
- max-width: 최대 해상도. '~ 사이즈 까지'라고 해석한다.
[예시]
@media screen and (min-width:320px) and (max-width:860px){ }
=> 화면 사이즈 320px부터 860px까지
@media screen and (max-width:480px)
=> 화면 사이즈 0px부터 480px까지
@media screen and (max-width:320px)
=> 화면 사이즈 320px부터
화면 중단점(=break point)
레이아웃이 변경되는 지점을 말하며 미디어 쿼리 구문의 (조건)을 의미한다.
- 320px ~ 480px : 모바일
- ~ 740px : 작은 태블릿
- ~ 860px : 일반 태블릿
- ~ 1024px : 작은 노트북
- ~ 1440px : 일반 노트북
- 1440px~ : pc
