본문 바로가기

📂 Web5

[CSS 단위] 아직도 헷갈린다면 이제는 확실히 알아두자. 0. CSS 단위 : length 자료형 CSS 단위는 CSS에서 사용되는 값들의 길이나 크기를 나타내기 위한 단위이다. 오늘은 CSS의 단위들 중, length 자료형에 속하는 단위들을 알아보겠다. length는 폰트 사이즈뿐만 아니라 width나 height와 같이 길이값을 나타내는 자료형이다. CSS에서는 길이값을 나타내기 위해서 px, rem, em등과 같은 다양한 단위들이 있는데 그 단위들은 크게 절대 길이 단위와 상대길이 단위로 나뉘게 된다. 절대 길이 단위는 px, inch, pt와 같이 고정된 크기를 가지는 단위고, 상대길이 단위는 em, rem, lh, vw, vh와 같이 특성 요소의 크기나 뷰포트의 크기의 상대적인 크기를 나타낼 수 있는 단위다. 상대적인 크기를 가지기 때문에 반응형 디.. 2023. 8. 27.

클라이언트의 액션에 따라 각기 다른 HTTP 요청을 서버로 보내고, HTTP 요청에 담아 보낸 단어를 소문자 또는 대문자로 응답을 받아 화면에 보여 주기 📜 Bare minimum requirements 클라이언트의 액션(버튼 클릭)에 따라 각기 다른 HTTP 요청을 서버로 보내고, HTTP 요청에 담아 보낸 단어를 소문자 또는 대문자로 응답을 받아 화면에 보여 줍니다. 💡 조건 Endpoint(URL) Method 기능 /lower POST 문자열을 소문자로 만들어 응답해야 합니다 /upper POST 문자열을 대문자로 만들어 응답해야 합니다 - POST에 문자열을 담아 요청을 보낼 때는 HTTP 메시지의 body(payload)를 이용합니다. - 서버는 요청에 따른 적절한 응답을 클라이언트로 보내야 합니다. - CORS 관련 헤더를 OPTIONS 응답에 적용해야 합니다. - 클라이언트의 preflight request에 대한 응답을 돌려줘야 합니다. .. 2023. 4. 4.

이제는 알아야겠다! CSR과 SSR의 차이점과 장단점 (SPA, MPA, SSG, Universal Rendering 까지) 1. SPA와 MPA의 차이점부터 짚어보기 본격적으로 CSR과 SSR 개념에 다루기 전에, SPA와 MPA에 대해 짚어보자. 오늘날 웹 애플리케이션을 개발한다고 하면 대부분 React, Angular, Vue와 같은 자바스크립트 기반 프레임워크를 사용해 SPA를 개발한다. ✔️ SPA 여기서 SPA란, Single Page Application의 약자로, 하나의 페이지로 구성된 웹 애플리케이션이다. SPA로 개발된 웹사이트에서는 카테고리에 있는 각 메뉴를 선택하면 보통 헤더는 고정되어 있는 상태로 메인화면 혹은 클릭한 부분만 바뀐다. ✔️ MPA 반면 MPA란, Multi Page Application의 약자로, 탭을 이동할 때마다 서버로부터 새로운 HTML을 새로 받아와서 페이지 전체를 렌더링 하는 전.. 2023. 3. 26.

HTML의 속성 이름과 속성 값의 차이는 무엇일까? 아래의 코드를 통해 HTML의 기초적인 구조를 알아보자. 1. 이 중 HTML 태그는 아래 두 가지다. HTML 요소의 태그는 보통 opening tag와 closing tag로 구성되어, 태그 사이에 컨텐츠를 넣어 구조를 표현한다. 여기서 주의할 점은 위에 표시 ‘HTML 요소’ 전체가 HTML 요소라고 판단하면 안 된다. 2. 이 중 HTML 속성 이름 (attribute name)은 ‘class’ 다. HTML의 속성(attribute)은 크게 두 가지로 구성되는데, 위의 이미지에서 속성 이름(attribute name)은 ‘class’ 다. 이는 속성 값(attribute value)인 ‘paragraph’와 분명히 구분되어야 한다. attribute name: 속성 이름 attribute val.. 2023. 2. 27.

HTML <div>태그와 <span>태그의 차이점 이해하기 HTML을 공부하다보면 태그들 사이에 차이점이 궁금한 것들이 있다. 대표적으로 와 인데, 표면적으로는 그게 그거 같아서 헷갈릴만하다. 가장 쉽게 이해하는 방법은 구글 크롬의 개발자 도구를 켜서 보는 것이다. 1. 한 줄 전체를 차지하는지 여부 차이 개발자 도구에서 영역에 마우스를 갖다 대면 한 줄 전체를 차지하고 있는 것을 볼 수 있다. 개발자 도구에서 영역에 마우스를 갖다 대면 한 줄 전체가 아닌, 컨텐츠(글자 수와 여백 등 포함)의 크기만큼만 차지하고 있는 것을 볼 수 있다. 2. 줄바꿈 가능 여부 차이 div 태그 영역 1 div 태그 영역 2 span 태그 영역1 span 태그 영역2 코드에서 두 단어를 과 태그로 똑같이 작성했는데 결과 화면을 보니 는 병렬적으로 배열되고, 은 한 줄에 나란히 배.. 2023. 2. 27.

이전 1 다음

티스토리툴바