본문 바로가기

html

(4)
TIL no.44 - SPA 란 ? SPA란 무엇인가 SPA란, Single Page Application 으로 단일 페이지로 구성된 웹 애플리케이션을 말합니다. 기존의 애플리케이션은 화면 이동 시에 클라이언트가 새로운 페이지에 대한 요청을 보내면 서버로부터 리소스를 전달받아서 이를 렌더링하는 방식으로 동작하였습니다. SPA는 정적인 파일들을 초기에 받아놓고 이후 필요한 비동기적 데이터 부분만을 서버에 요청합니다. 기존의 애플리케이션과 SPA의 간단한 정의만 놓고 보더라고 매번 모든 데이터를 다 주고받는 경우와 기본적인 페이지의 파일을 가지고 있고 필요한 데이터만 주고받는 것 중 SPA가 더 간단하고 발전된 경우라고 생각할 수 있을 것입니다. SPA는 페이지 이동 시 필요한 데이터 부분만 서버에 AJAX 로 요청하고 서버는 필요한 데이터의..
TIL no.29 - HTTP  공부 많이 안하신 분들도 HTTP는 어디선가 많이 본 듯한 익숙한 느낌이 드실 겁니다 인터넷 주소를 칠 때마다 매번 마주하기 때문일까요? HTTP = Hypertext Transfer Protocol html 문서와 같은 리소스들을 가져올 수 있게 해주는 프로토콜 입니다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 합니다. 정의: mozila - 프로토콜은 컴퓨터 내부에서 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙체계를 말합니다. 따라서, HTTP는 html 문서와 같은 리소스들을 통신하는데 지켜야 할 규약을 말합니다. HTTP의 특징으로는 Request / Response (요청 / 응답) HTTP 통신의 핵심은 요청과 응답입니다. Sta..
TIL no.15 - 왜 semantic web으로 만들어야 하는가 ? 이번에는 왜 sementic 하게 web html 을 작성해야 하는가 ? 에 대한 주제로 글을 작성해보려고 합니다 ! **html 마크업을 시멘틱하게 작성해야 하는 이유 html으로 웹의 구조를 잡을 때, container box들을 너무 의미를 담고 있지 않은 div들로만 구성할 경우 복잡성이 높습니다. 컴퓨터와 사람 모두가 이해하기 쉬운 언어로 작성하는 것이 중요합니다. 또한 검색엔진에서도 시맨틱하게 작성된 html 구조에 대한 효율성이 더 높습니다. 이 외에도 다양한 semantic elements 가 있습니다. 위의 태그들은 보다시피 어떠한 content를 담고 있을 지 단번에 알 수 있습니다. 사람만 그렇게 생각하는 것이 아니라 컴퓨터 또한 의미적으로 잘 나타난 시맨틱 언어들을 더 쉽게 읽어들입..
TIL no.1 - flexbox _ css 속성 정리 *flexbox는 container나 각각의 item에 적용 가능한 속성값이 존재합니다. display: flex; (아이템이 자동으로 왼쪽에서부터 오른쪽까지 정렬) flex-direction : row-reverse(반대로 수평) column-reverse(반대로 수직) flex-wrap : nowrap(기본값-한줄에) wrap(꽉차면 다음줄로) flex-flow : column nowrap; (두가지 속성을 묶어서 정의 할 수 있다. justify-content : flex-start(기본값) flex-end(오른쪽축으로 배치) center(가운데로) space-around(박스를 둘러싼다 스페이스로) space-evenly(같은 간격의 스페이스) *아이템을 어떻게 배치해 줄 것인지 align-ite..