Flexbox 와는 다르게 레이아웃을 두 방향으로 배치가 가능하다. Flexbox를 완전 대체할 수는 없다. 구조 flex와 같이 container와 item으로 이루어져있다. 용어 grid track grid의 행 또는 열 grid cell grid item을 담고 있는 한 칸 grid line grid cell을 구분하는 선 grid number grid line의 각 번호 grid gap grid cell 사이의 간격 grid area grid line으로 둘러싸인 사각형 영역, 그리드 셀의 집합임 속성 초록색은 컨테이너 노랑색은 아이템 grid-template-rows grid-template-columns 컨테이너의 grid track의 크기를 지정하는 속성 여러가지 단위 사용 가능. 섞어 쓸 ..

flexbox 레이아웃 배치 시 좀 더 유연하도록 고안된 기능. 기존 inline-block, float으로 레이아웃을 배치하는 것보다 유연하다고 하는데 얼마나 그런지 살펴보자 1차 학습 후 정리 메인 축 또는 교차 축 기준으로 어떻게 정렬하는지 등의 설정에 따라 아이템들이 배치가 되어 유연하다고 생각. 2차 학습 후 정리 아이템에 적용할 수 있는 속성을 배운 후 왜 유연하단건지 깨달음. 설정한 값에 따라 아이템들이 유연하게 늘었다 줄었다 하기 때문.. 총 정리하자면 메인축 또는 교차축을 기준으로 어떻게 정렬이 되는지 등의 설정에 따라 아이템들이 유연하게 배치되는 기능이다. 구조 flex container와 flex item으로 나뉘어져 있음 컨테이너가 아이템을 포함하는 구조. 플렉스 아이템들이 설정된 ..

특정 미디어 또는 화면의 크기가 특정 픽셀일 경우 따로 설정한 css를 사용하도록 하는 소프트웨어 모듈이다.

해당 속성이 설정된 요소를 설정된 방향으로 두고 감싸는 모양이 되도록 한다. float이 설정되어있으면 해당 요소의 자식 요소들을 품고 있지 않은 것처럼 인식된다. 따라서 가상요소나 clear: both 를 가진 요소를 적재적소에 추가하여 정상적으로 인식되도록 해야한다.

브라우저마다 다르게 설정된 요소의 서식을 초기화하여 똑같이 보이도록 하는 작업이다. *를 쓸 수도 있지만 모든 태그에 작업을 할 경우 처리량의 차이가 있기에 보통은 다른 사람이 작성해놓은 코드를 사용한다고 함.

html 요소들은 위와 같은 box model을 가지고 있다. box-sizing 속성의 값은 두 가지로 나눌 수 있다. content-box: width속성의 값이 내용(content)에만 적용된다. border-box: width속성의 값이 내용 + padding + border 값 만큼 적용된다. 따라서 content의 크기는 width - padding + border 값으로 설정된다.

가장 많이 쓰이는 display속성은 다음과 같은 4가지이다. block, inline, inline-block, none block: 박스형태로 표시됨. 다른 요소가 수평으로 붙지 않고 줄바꿈으로 표시됨 inline: 내용(content)만큼만 표시됨. 또한 박스형태를 가지고 있지 않기 때문에 width 등의 속성이 적용되지 않음 inline-block: 박스형태로 표시되는데 다른 요소가 수평으로 붙을 수 있음 none: 표시 안함

HTTP HyperText Transfer Protocol의 약자로 컴퓨터가 문서를 요청할 때 사용하는 규약입니다. HTTP is stateless HTTP는 통신을 할 때마다 그 상태를 기억하지 않습니다. 따라서 각 요청들은 서로 독립적이죠. 브라우저의 LocalStorage, 세션, 쿠키 등을 이용해 기억을 못하는 단점을 해결할 수 있습니다. HTTPS TLS 를 통해 HTTP 요청과 응답이 암호화되어 통신하는 프로토콜입니다. 따라서 신용카드 정보나 기타 유출되어서는 안되는 개인 정보등을 통신해야할 때 이용됩니다. HTTP는 요청과 응답은 Header와 Body로 나뉘어져 있습니다. Body 서버가 HTML문서를 응답할 때 HTTP Body에 텍스트를 입력하여 응답합니다. 또 form 데이터를 담아 ..

1. 인터넷 표준화된 프로토콜들에 따라 서로 통신하기 위해 연결된 전세계적 컴퓨터 네트워크(연결망)를 의미한다. 아래의 동영상은 인터넷과 정보전달에 관해 이해하기 쉽게 설명한 동영상이다. 그 동안 정확한 뜻을 모르고 사용했던 Bandwidth (대역폭) 라던가 그 측정 단위인 bit rate, latency 등의 개념을 누구나 이해하기 쉽게 표현하여 유익했던 것 같다. 2. 프로토콜 기계들의 상호 간 통신을 위해 정해진 규칙 또는 표준의 집합들을 의미한다. 이런 규칙과 표준들이 있기에 모두가 원활하게 의사소통을 할 수 있게 된다. 인터넷의 창시자인 Vint Cerf는 인터넷의 가장 중요한 점이 프로토콜들을 표현하는 디자인 철학이라고 얘기한다. 물리적으로 인터넷이 어떻게 구현되어지는가보다 각각의 통신 목적..