한빛미디어

더 빠르고, 더 잘 읽히는 웹사이트 구축을 위한 모든 것,

이 책은 기본적인 프런트엔드 웹 개발 지식을 갖춘 개발자를 대상으로 합니다.

라고 소개하고 있는 <더 나은 웹 개발을 위한 가이드> 책 입니다.

​

목차 입니다.

1장 웹은 어디에 있나

2장 웹 개발을 위한 라이프 사이클

3장 더 나은 HTML 개발

4장 더 나은 CSS 개발

4.1 CSS는 무엇인가?

4.2 W3C 표준화 제정 단계

4.3 CSS 선택자

4.4 CSS 박스 모델과 요소 크기

4.5 레이아웃을 만들기 위한 CSS

4.6 반응형 웹

4.7 사용자 지정 CSS 속성 사용하기

4.8 공간 시스템 디자인

4.9 CSS 네이밍 컨벤션

5장 더 나은 자바스크립트 개발

6장 타입스크립트: 자바스크립트에 타입을 더하다

7장 사용자 기기에 따른 고려사항

8장 더 나은 웹 개발자 되기

9장 개발 환경 구성

​

목차에서는 관심있는 4장 더 나은 CSS 개발에서 <레이아웃을 만들기 위한 CSS>을 먼저 읽어 봤습니다.

flexbox 레이아웃

flexbox는 웹 화면의 공간 분할과 콘텐츠가 담길 공간의 크기 및 배분 그리고 콘텐츠에 대한 배치 순서를 빠르고 쉽게 정의해주는 레이아웃 모델입니다.

flexbox를 다루려면 flexbox를 구성하는 2개의 축인 주축과 교차축을 먼저 이해해야 합니다.

flexbox를 적용하기 위해서는 스타일 속성 중 display의 속성 값을 flex로 사용합니다.

.container{

display: flex;

}

.container{

display: flex;

flex-direction: column;

}

grid 레이아웃

css 그리드 레이아웃은 2차원 형태의 구조입니다. flexbox가 한 방향, 즉 가로면 가로, 세로면 세로만 할 수 있는 1차원 레이아웃 시스템 이라면, 그리드 레이아웃은 행과 열을 동시에 배치할 수 있는 2차원적인 레이아웃 시스템입니다. 그리드 레이아웃에서 하나의 그리드는 여러 개의 열과 여러 개의 행으로 구성되며 각 행과 행 사이, 열과 열 사이에 있는 공백을 gutter라고 합니다.

float 레이아읏

float 레이아읏을 사용해서 웹 페이지의 레이아웃을 만드는 방법은 가장 오랫동안 사용되었습니다.

flexbox, 그리드 레이아웃이 CR 단계이기 때문에 아직까지는 float를 사용해서 만든 코드를 많이 접하게 됩니다.

​

시맨틱 요소를 사용한 레이아읏

시맨틱 요소란 요소 자체가 의미를 갖는 요소입니다.

header, nav, section, footer 등

웹 표준에 맞게 웹피이지를 제작하기 위해서 시맨틱 태그를 사용하고 있습니다.

​

flat 레이아웃과 시맨틱 요소를 사용한 레이아웃을 많이 사용하고 있는데 좀 더 간편한 flexbox 레이아웃을 적용해 보는 것도 좋을 것 같습니다.

알고 있는 지식에 <더 나은 웹 개발을 위한 가이드>를 읽어 보니 개념도 잘 잡히고 활용해 볼 수 있는 내용도 많아서 도움이 될 것 같습니다.

​

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."