이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS, Holy Grail Layout
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, flex-basis와 grow 그리고 shrink 이 포스팅은 PC로 작성되었습니다. 모바
gogogameboy.tistory.com
지난 포스트에는 플렉스 Flex를 이용한 Holy Grail Layout을 잡는 방법을 배웠습니다.
이번에는 Flex의 미처 다 설명하지 못한 여러가지 유용한 속성들을 배워보겠습니다.
!DOCTYPE html 에러
!DOCTYPE html
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 HTML 문서의 기본 구조 이 포스팅은 PC로 작성되었습니다. 모바일로 보
gogogameboy.tistory.com
위의 글을 쓰면서 언급을 했던 <!DOCTYPE html> 오류의 내용이 이번에 공부할 내용에 적용이 됩니다.
위의 실습 영상을 따라하면 영상과는 다르게 적용이 되지 않을 수도 있습니다.
<!DOCTYPE html>을 넣으면 BODY에 FLEX속성이 없어진다고 합니다.
어떤 분이 BODY에 FLEX속성은 HTML5에 있는거란 생각이 들어 <!DOCTYPE html5>로 하니까 되더라고 하더군요.
html을 빼고 <!DOCTYPE> 으로만 해도 HTML5로 인식한다고 합니다.
소스 코드
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
지난 포스트와 소스 코드가 달라진 점들을 정리하겠습니다.
body의 모든 콘텐츠가 가운데로 정렬되게 하기 위해 body{ } 를 추가했고, 그 안에 display: flex;와 align-items: center;와
justify-content: center;를 넣었습니다.
.container{ } 에는 width:800px;을 추가해서 container의 가로 사이즈를 800픽셀로 지정해줬고, body 전체에 테두리를 주기위해 border:1px solid gray; 를 넣었습니다.
검색엔진이 body의 상위에 오는 정보가 중요한 정보라고 인식할지도 모르니 body의 main이 먼저 오게 하고싶을지도 모릅니다.
하지만 레이아웃은 여전히 메뉴가 왼쪽으로 오게 하고 싶다면 nav{ order:-1; } 을 넣어줘서 메뉴를 메인보다 먼저 오게 할 수 있습니다.
flex - CSS
CSS의 flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구입니다. 지금까지 레이아웃과 관련된 다양한 속성들이 있었지만 그리 효과적이지 않았습니다. flex를 이용하면 레이아웃을 매우 효과
opentutorials.org
강의 영상에 나와있는 생활코딩의 웹페이지는 위의 링크를 통해 가실 수 있습니다.
다음 포스트
CSS 신문을 보는 것 같은 레이아웃
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, Flex 기타 속성들 이 포스팅은 PC로 작성되었습니다. 모바일로 보시
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 반응형 웹을 만들기 위한 Media Query 기초 (0) | 2021.01.06 |
|---|---|
| CSS 신문을 보는 것 같은 레이아웃 (0) | 2021.01.05 |
| CSS, Holy Grail Layout (0) | 2021.01.03 |
| CSS, flex-basis와 grow 그리고 shrink (0) | 2021.01.03 |
| CSS 웹사이트 레이아웃 기초 (0) | 2021.01.03 |
댓글