📌calc()
계산식을 사용하는 속성값을 적용한다(calculation). 함수의 괄호 안에는 각도, 시간, 백분율,숫자 등 다양한 단위를 사용하는 계산식이 들어간다.
[기본형]
선택자{ 속성 : calc(계산식); }li {
width: calc(100% / 3);
height: 100%;
}
📌min(), max()
min()함수는 괄호안에 나열된 값 중에 가장 작은 값을 적용하고,
max()함수는 괄호안에 나열된 값 중에 가장 큰 값을 적용한다.
[기본형]
선택자{
속성 : min(값1, 값2, 값3....);
속성 : max(값1, 값2, 값3....);
}div {
width: min(100%, 700px);
background-color: blanchedalmond;
}
h1 {
font-size: max(3vw, 2em);
text-align: center;
}📌clamp()
특정 값의 범위를 '고정'하거나 '제한'할때 사용한다.
최솟값, 최저값, 최댓값 3가지 값을 지정하면 화면 크기에 따라 값을 바꿀 수 있는데, 최솟값보다 작아질 수 없고 최댓값보다 커질 수 없다.
[기본형]
선택자{속성: clamp(최솟값, 최적값, 최댓값)}h1 {
/* 최솟값 : 1em(16px), 최적값 : 브라우저의 2% 최댓값 : 2em(32px) */
font-size: clamp(1em, 2vw, 2em);
}
📌filter
- 마치 포토샵으로 꾸민것 같은 시각 효과를 줄때 사용하는 속성이다.
[기본형]
filter : 함수(값);✔️ blur
부모한테 주면 부모박스의 테두리까지 블러
이미지한테 주면 부모박스안 이미지만 (잘린듯한 느낌)
img {
filter: blur(2px);
}
✔️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(가로위치 세로위치 흐림정도 그림자색상)
.dropshadow {
filter: drop-shadow(-2px -4px 5px gray);
}
✔️invert
: 이미지의 색상을 반전 시킨다. 값은 0%~100% 사이의 값을 입력한다.
1%~50% 까지는 회색으로 이미지가 전체 처리되고, 50% 이상부터 색상이
반전된다. 100%가 완전한 색상 반전이다.
10%, 60%, 100% 
✔️sepia
: 이미지를 세피아 톤으로 변경해서 표시한다. %단위 사용.
.sepia {
filter: sepia(100%);
} 
✔️grayscale
: 이미지를 흑백사진으로 변환한다. 값은 %단위를 사용하고 100% 가까워 질수록 점점 흑백 사진이 된다.
.grayscale {
filter: grayscale(100%);
} 
✔️opacity
: 투명도를 조절한다. 0% ~ 100%값을 사용할 수 있다.
0%는 이미지를 완전히 투명하게 만들고, 100%는 원본이다.
.opacity {
filter: opacity(50%);
} 
✔️hue-lotate
: hsl 색상환을 사용하여 색상을 바꾸는 속성값이다. 각도의 단위인 deg을 사용한다.
.hue-lotate {
filter: hue-rotate(320deg);
} 
✔️saturate
: 이미지의 채도를 변경시키는 속성값이다. 단위는 %를 사용한다
0% 완전 흑백 100% 원본
.saturate {
filter: saturate(200%);
}
반응형 웹
pc, 태블릿, 모바일 환경에 맞춰 레이아웃을 바꿔 보여주는 웹 기술을 말한다.
meta태그는 화면의 해상도뿐만 아니라 검색엔진의 검색 키워드를 판별하여 검색어 엔진(robots)이 해당 게시물을 걸러서 보여주게끔 만드는 역할도 하며, 언어의 인코딩도 담당한다.
📌viewport
뷰포트를 지정하면 접속한 화면 기기에 맞춰 확대하거나 축소하여 표시할 수 있다.
이때 뷰포트란 스마트폰 화면에서 실제로 내용이 표시되는 영역을 말한다.
뷰포트는 태그를 태그 안에 작성한다.
[기본형]
<meta name='viewport' content='속성1=값, 속성2=값...'/>📍[뷰포트 속성(content) 종류]
✔️ width
: 뷰포트의 넓이. device-width 또는 크기를 값으로 사용한다.
기본값은 브라우저에서 설정한 기본값을 사용한다.
접속하는 기기의 넓이를 기준으로 하겠다.(pc로 접속하면 pc사이즈 모바일은 모바일 사이즈) ✔️ height
: 뷰포트의 높이. device-height 또는 크기를 값으로 사용한다.
기본값은 width와 마찬가지로 브라우저에서 설정한 기본값을 쓴다.
height설정할 일 거의 없음, 하이트 설정하면 찌그러짐 ✔️ user-scalable
: 확대.축소 여부. 사용하는 값은 yes 또는 no를 사용한다.
기본값은 yes이고 yes는 1이라는 뜻이고, 1은 device-width와 device-height값을 10으로 쓴다.
확대축소 못하게 할때만 no, 거의 쓸일없음 ✔️ initial-scale
: 초기 확대 축소값. 1~10까지의 값을 사용하고, 기본값은 1이다.
원비율로 보여주겠다.📌반응형 단위
- vw(viewport width) : 1vw는 브라우저의 넓이를 백분율로 나눴을때 1%라는 의미이다.
- vh(viewport height) : 1vh는 브라우저의 높이를 백분율로 나눴을때 1%라는 의미이다.
(스크롤과 관계없이 브라우저 창 기준)
- vmin(viewport minimum) : 뷰포트의 넓이와 높이를 비교했을때 더 작은 값을 적용한다.
- vmax(viewport maximmum) : 뷰포트의 넓이와 높이를 비교했을때 더 큰 값을 적용한다.📌반응형 요소 만들기
1. 상댓값으로 글자 크기를 지정하는 em, rem
: px은 항상 고정된 고정단위로, 반응형을 작업할 때 화면 사이즈에 따라 글자 크기를 제어하기가 어렵다. em 또는 rem단위를 이용하여 글자의 크기를 상대적으로 지정할 수 있다.
✔️em
em단위는 부모요소에서 지정한 글꼴의 대문자 M의 넓이를 1em으로 놓고 상대적으로 값을 계산한다. 부모 요소에 글자 크기를 지정하지 않았다면 body요소의 기본 크기를 사용한다. body기본 글자 크기는 16px이고 이 값이 1em에 해당한다. 부모의 넓이를 따른다.
✔️rem
em에서 부모요소의 글자 크기 때문에 예상하지 못한 결과가 나오는 것을 막기 위해 rem단위가 생겼다. rem은 root(hrml태그)에서 지정한 크기를 기준값으로 한다.
이렇게 rem단위를 쓰면 중간에 부모의 폰트나 사이즈가 바뀌더라도 root를 기준으로만 글자 크기를 설정하기 때문에 늘 유지된 스타일로 디자인을 할 수 있다.
가변이미지
가변 이미지란 부모 요소 넓이에 따라 넓이와 높이가 바뀌는 이미지를 말한다. 이미지는 화면이 작아지면 이미지의 일부만 보일 수 있고 부모영역이 이미지 기존 사이즈보다 커지면 화질이 떨어질 수 있다. 이를 방지하기 위해 max-width나 object-fit을 사용하여 이미지를 제어할 수 있다.
📌이미지를 부모영역에 맞추는 다양한 방법
-
width : 100%로 설정하기
: 이미지의 넓이를 100%로 지정하면 이미지가 부모 요소의 넓이에 맞춰 항상 100%를 유지한다. 단, 부모영역의 높이가 더 높다면 빈 공간이 생길수 있다. -
max-width : 100%로 설정하기
: width속성과 함께 max-width를 100%를 사용하면 부모 요소의 크기에 따라 이미지가 커질때 원본 이미지만큼만 커진다.
즉, 부모요소가 아무리 커지더라도 사진의 원본사이즈보다 커질수 없다.
📌미디어쿼리
사이트에 접근하는 기기의 해상도에 따라 서로 다른 스타일시트를 적용해주는 기능을 한다.미디어 쿼리는 css모듈 중 하나로 접속하는 기기의 화면에 맞춰 다양한 레이아웃을 보여줄 수 있다.
[기본형(구문)]
@media only/not(생략가능) 미디어유형 and (조건) and (조건){
선택자 { 속성 : 값; }
} @media
only :
not : 무언가 제외할 미디어 유형이 있을 때
and : 미디어유형과 조건을 이어주는 선택자
and 앞뒤로 반드시 공백들어가야함
전부 속성이기 때문에 공백이 되어있어야 출력가능-
only : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어쿼리를
무시하고 실행하지 않음 -
not : not다음 에 지정하는 미디어 유형을 제외한다.
ex) not tv라고 쓰면 tv유형은 제외한다.(only와 not은 생략가능)
-
and : 조건을 연결하는 속성으로 앞뒤에 반드시 공백으로 구분되어 있어야 한다.
📍[미디어 유형]
- all : 모든 유형에서 사용할 css를 정의한다. 기본값
- print : 인쇄 장치에서 사용할 css를 정의한다.
- screen : 컴퓨터 스크린에서 사용할 css를 정의한다.
스마트폰의 스크린도 포함한다. - tv : 음성과 영상이 동시에 출력되는 tv에서 사용할 css를 정의한다.
- aural : 음성 합성장치(주로 화면을 읽어 소리로 출력해주는 장치)
에서 사용할 css를 정의한다. - braille : 점자 표시장치에서 사용할 css를 정의한다.
- handheld : 패드(pad)처럼 손에 들고 다니는 장치를 위한 css를 정의한다.
- projecton : 프로젝터를 위한 css를 정의한다.
- tty : 디스플레이 기능이 제한된 장치에 맞는 css를 정의한다.
이런 장치에서는 px단위를 쓸수없다. - embrossed : 점자프린터에서 사용할 css를 정의한다.
[예시]
@media screen and (min-width:320px) and (max-width:860px){
[조건]
- 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 (min-width:320px)
=> 화면 사이즈 320px부터 📍화면 중단점
레이아웃이 변경되는 지점을 말하며 미디어 쿼리 구문의(조건)을 의미한다.
-
320px ~ 480px : 모바일
-
~ 740px : 작은 태블릿
-
~ 860px : 일반 태블릿
-
~ 1024px : 작은 노트북
-
~ 1440px : 노트북
-
1440px ~ : pc
기준 잡기 어렵다면 bootstrap
