❄️ [UIUX] 1223 HTML + CSS Coding, 코딩 고급 19
✏️ 2024. 12월 23일 / html + css 언어, 코딩 고급 19
⛄ 계산식으로 값을 나타내는 속성에 대해 알아봅시다.
☁️ calc() : calc()함수는 calculation의 줄임말로 '계산기'를 뜻합니다.
이름 그대로 계산식을 사용하여 속성값을 적용합니다.
함수의 괄호 안에는 각도, 시간, 백분율, 숫자 등 다양한 단위를 사용하는 계산식이 들어갑니다.[기본형] 선택자 { 속성 : calc(계산식);
⛄ clamp 속성에 대해 알아봅시다.
☁️ clamp() : clamp()함수는 대상 2개를 물리적으로 고정하는 장치입니다.
특정 값의 범위를 '고정'하거나 '제한'할 때 사용합니다.
clamp()함수에는 최솟값과 최적값, 최댓값 이렇게 3가지 값이 들어갑니다.
3가지 값을 지정하면 화면 크기에 따라 값을 바꿀 수 있는데,
최솟값보다 작아질 수 없고 최댓값보다 커질 수 없습니다.[기본형] 선택자 { 속성 : clamp(최솟값, 최적값, 최댓값)
⛄ min(), max() 속성에 대해 알아봅시다.
☁️ 화면 넓이에 따라 속성값을 다르게 적용할 때 최솟값과 최댓값을 고려할 수 있습니다.
min()함수는 괄호안에 나열된 값 중에 가장 작은 값을 적용하고,
max()함수는 괄호안에 나열된 값 중에 가장 큰 값을 적용합니다.[기본형] 선택자 { 속성 : min(값1, 값2, 값3...); 속성 : max(값1, 값2, 값3...);
⛄ 반응형 웹에 대해 알아봅시다.
☁️ 반응형 웹 : pc, 테블릿, 모바일 환경에 맞춰 레이아웃을 바꿔 보여주는 웹 기술을 말합니다.
사용자가 어떠한 기기를 통해 웹 사이트에 접속하면 meta 태그의 viewport속성이
기기의 해상도 사이즈를 판단하여 그에 맞는 레이아웃을 보여줍니다.
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-width, device-height 값을 10으로 씁니다. 10=1=yes 세개는 모두 같은 값입니다. - 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 (min-width:320px) { } => 화면 사이즈 320px부터
☁️ 화면 중단점
레이아웃이 변경되는 지점을 말하며 미디어 쿼리 구문의 (조건)을 의미합니다.- 320px ~ 480px : 모바일 - 481px ~ 740px : 작은 태블릿 - 741px ~ 860px : 일반 태블릿 - 861px ~ 1024px : 작은 노트북 - 1025px ~ 1440px : 일반 노트북 - 1441px~ : pc
⛄ filter() 속성에 대해 알아봅시다.
☁️ 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() : 이미지의 채도를 변경시키는 속성값 입니다. 단위는 %를 사용합니다.
🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)
