반응형 HTML, CSS, WEB 기술8 CSS에서 VH, VW 와 %에 대한 이해 오늘은 CSS에서,상대적인 사이즈를 계산하도록 도와주는,VH, VW와 %에 대해서 정리해 보겠습니다. 1. VHVH는 Viewport Height 에 대한 약자입니다.현재 브라우저 창의 높이를 기준으로 하는 상대적인 단위인데요.1vh는 뷰포트 높이의 1%를 의미합니다.100vh라고 하면 뷰포트의 전체 높이와 같습니다. 예를 들어 아래와 같은 html이 있다고 가정해 보겠습니다. 전체 높이절반 높이 css를 아래와 같이 해주면 쉽게 전체 높이 또는 절반 높이에 대해서 그리는 것이 가능합니다. .full-height { height: 100vh; background-color: #f0f0f0;}.half-height { height: 50vh; background-color: #d0d.. 2024. 9. 17. FlexBox 로 구현하는 모던 CSS 테이블이나,float, position등을 이용한 CSS는,디자이너들의 복잡한 요구사항을 구현하는데 많은 어려움이 있었습니다.반응형이 기본이 되어버린 시대에,점점 더 구현이 어려워지게 되었는데요. 이러한 문제들을 해결하기 위한 방법으로,Flexbox가 등장하였고,2017년경부터는 대부분의 브라우저에서 지원을 하고 있습니다.오늘은 이 Flexbox에 대해서 정리해 보도록 하겠습니다. 1. FlexBoxFlexBox는 반응형 웹 디자인을 구현하거나, 복잡한 레이아웃을 간단하게 만드는 데 매우 유용한데요.컨테이너가 그 자식 요소들(flex items)의 크기와 순서를,동적으로 조정해 줄 수 있기 때문입니다. 블럭요소나 inline요소를 이용해 css를 구성하는 경우가 많은데요.하지만 flex로 모든 것을 구성.. 2024. 9. 17. HTTP 메시지 구조를 이해해 보자 오늘은 HTTP 메시지 구조에 대해서 정리해 보도록 하겠습니다. 메시지 구조에 대해 알아보기 전에, HTTP에 대해서도 간단히 알아보고 가겠습니다. 1. HTTP 1-1. HTTP의 의미 HTTP(HyperText Transfer Protocol)는, 네트워크 위에서 데이터를 주고받는 방식을 정의합니다. 웹 브라우저에 URL을 입력할 때마다 HTTP가 동작해서, 원하는 웹 페이지의 데이터를 요청하고 받아오는 것이죠. 심플하면서도 다양한 데이터 형식을 지원하고, 새로운 기능을 쉽게 추가할 수 있어서, 빠르게 변하는 인터넷 환경에 잘 적응할 수 있었는데요. 이로인해 HTTP는 웹 통신의 표준으로 자리 잡았습니다. 모든 웹 브라우저와 서버가 이 프로토콜을 사용하여 정보를 주고받기 때문에, 웹의 보편적인 언어라.. 2023. 12. 19. CSS Selector 와 함께 사용하는 Document API 정리 # textContent innerText querySelector 오늘은 CSS Selector 와 이를 활용해서 자주 사용하는 Document Elements API 에 대해서 정리 해 보도록 하겠습니다. 1. CSS Selector Selector를 볼 때, element, class, id, attribute에 대해서 잘 구분해 보아야 합니다. 특정한 모듈을 사용할 때 API에 항상 친절하게 설명되어 있지는 않기에, 부족한 부분은 검색을 해야 하는데요. 이 때 정확한 명칭을 알고 있으면 좀 더 빠르게 정보를 얻을 수 있습니다. Selector 타입 예 의미 .class .infoArea class가 infoArea .class1.class2 .info1.info2 class attribute에 name1과 name2가 들어간 것을 찾는다. #id #tab1 id가.. 2022. 11. 3. HTTP Caching에 대해서 정리해 봅니다. #Cache 오늘은 HTTP Caching에 대해서 정리해 보도록 하겠습니다. 1. HTTP Caching? 매번 Server에 같은 파일에 대해서 요청하는 것은, Server에 부담이 될 뿐만이 아니라, 다운로드 되는 속도때문에 매번 로딩하는 시간이 걸리게 됩니다. 그래서, 리소스의 복사본을저장해 놓고, 같은 파일에 대해 Request를 할 때, 다시 똑같은 요청을 하지 않고 기존의 저장된 파일을 이용하도록 하는 기술이, Caching인데요. 2. HTTP Caching 설정하는 방법 Http Caching를 설정하기 위해서는, 아래와 같이 Cache-Control 헤더를 사용해 주면 되는데요. 설정할 수 있는 값들에 대해서 알아보도록 하겠습니다. Cache-Control: no-store 2-1. Cache사용여.. 2020. 5. 13. HTTPS와 SSL, 그리고 공개키에 관한 총정리 #TLS #공개키 #대칭키 오늘은 웹기술에 있어서 매우 중요한 HTTPS를 이해하기 위해서, HTTPS와 TLS/SSL 그리고 이에 사용되는 공개키 알고리즘에 대해서 정리해 보도록 하겠습니다. 1. HTTP HTTP는 Hyper Text Transfer Protocol의 약자인데요. Protocol이라는 것은 네트워크를 통해서 컴퓨터간에 데이터를 이용해 정보를 주고 받을 때, 정해진 순서나 문법을 말합니다. 여기에 사용되는 HTTP메세지는 크게 두가지가 있는데요. Request와 Response가 바로 그것입니다. Request와 Response의 과정을 좀 더 구체적으로 보면, 만약 유저가 특정주소를 입력하면, 브라우저는 해당 페이지에 필요한 컨텐츠를 보여주기 위해, 아래와 같은 HTTP GET리퀘스트를 보내구요. 서버는 이에 .. 2020. 5. 4. DNS(Domain Name System)에 대한 총정리 #IP주소 #DNS Server 오늘은 Web의 DNS(Domain Name System)라는 것에 대해서 정리해 보도록 하겠습니다. 1. DNS 세상에 존재하는 모든 컴퓨터들은 그것이 작은 스마트 폰이던 거대한 서버컴퓨터 이던, 인터넷에 연결되어 있다면, 하나의 host라고 할 수 있습니다. 이 host들이 서로 커뮤니케이션 하기 위해서는 숫자를 이용합니다. 이 넘버들이 바로 IP주소(예> "3.242.23.132")라고 하는 것 인데요. 그런데 이 넘버들은 사람이 일일히 기억하고 구분하기 어렵습니다. 마치 홍길동씨 전화번호를 등록하고 홍길동씨로 검색하여 찾아서 전화를 걸듯이, 컴퓨터도 찾아갈때, 숫자로 구성된 IP주소보다는 "test.com"과 같이 Domain Name을 이용하도록 한 것이지요. 2. 본인의 컴퓨터에서 DNS구현 .. 2020. 4. 30. Google Font이용해서 CSS에서 Import하는 방법 #웹폰트 오늘은 GoogleFont를 이용해서, 여러 종류의 무료 폰트들을 CSS에서 Import해서 사용하는 방법에 대해서 정리해 보도록 하겠습니다. 1. Google Font 사이트 Google Font를 이용하면, 저작권이 오픈된 폰트들에 대해서 CSS에서 import 해서, 사용하는 것이 가능한데요. 대표적으로 배달의 민족으로 유명한 우아한 형제들의 주아체, 도현체 같은 폰트 그리고, 네이버에서 제공하는 나눔 고딕이나 명조같은 폰트들이 있겠습니다. 먼저 검색창에서 아래와 같이 검색을 합니다. 저는 Jua체를 검색해 보았네요. 나온 리스트 중에 Jua체를 선택해 주면 아래와 같은 UI를 보게 되는데요. 리스트에 보면 해당 폰트에서 선택 가능한 스타일들이 나옵니다. 우측에 Select this style을 선.. 2020. 4. 3. 이전 1 다음
