HTML/CSS 레이아웃 연습

개요
HTML/CSS 레이아웃을 사용하는 연습 과제입니다.
어떤 포석이든 5분 안에 스크래치부터 베이스를 조립하는 연습을 해야 한다.

HTML 구조(의미,div가 아니라 헤더,asaid 등의 의미를 의식하여 표시)

레이아웃은 먼저 순수 CSS만 사용

설명하면서 편성한다.현장 코딩 발표풍.

만약 판면 설계를 할 수 있다면, 웹 페이지를 모사하기 시작할 것이다.
사이트 축소판 그림

id를 사용하지 않습니다.최대한 클라스 스타일로.

javascirpt의 id 검색은 빠르지만class 검색은 느립니다.id는 하나만 사용할 수 있기 때문에javasript를 위해 미리 엽니다.css의 렌더링 성능도 문제없기 때문입니다.

BEM의 CSS 설계를 인식합니다.(FLOCSS와 같은 것이 아니라 우선 기본 BEM)

uloltable 등의 아이(li 등)에게class를 주지 않는다.상급 라벨에서 온 아이 선택기로 스타일링을 합니다.(정합성)

배치의 편성 방법
flat->flex-box->grid를 사용하여 각각 작성하는 방법이 있습니다
flex-box와grid를 미리 사용하여 조합합니다.
flex-box:
임의의 블록 요소에서 상자를 만들고 그 중에서row방향이나column방향으로
순서를 유연하게 진행하다.
최신 현대 브라우저는 거의 모두 대응한다.
IE 6-9 또는 이전 버전은 지원되지 않으며, IE 10에는 공급업체 접두어가 필요합니다.
96% 이상 공급업체 접두어가 없습니다.
https://caniuse.com/flexbox
grid
레이아웃 조정이 가능한 열과 줄을 포함하는 다차원 레이아웃 시스템
flex-box처럼 레이아웃을 구성하는 부모 요소와 포장성의div 라벨을 만들 필요가 없다.
HTML 레벨을 얕게 설정하기 쉽습니다.행/열의 레이아웃을 동시에 조정하고 싶을 때 사용합니다.
최신 현대 브라우저는 거의 모두 대응하지만 flex-box에 비해 커버율이 낮다.
공급업체 접두사 없이 93% 이상 덮어씁니다.
https://caniuse.com/css-grid
느낌(flat/flex-box/grid)
기본적으로 flat는 레이아웃 목적에 사용되지 않습니다.
flex-box,grid 중 임의의 것을 사용하여 큰 프레임의 레이아웃을 구성합니다.
큰 상자의 레이아웃에서 먼저 grid의 사용을 고려합니다.
행 방향과 열 방향을 동시에 조정하여 HTML 구조를 얕게 유지할 수 있기 때문입니다.
페이지 간격을 포함한 조정이 더욱 유연하다. (레이아웃 요소의 각margin 지정을 줄일 수 있다.)
브라우저의 커버율을 높이려면 flex-box 레이아웃으로 전체적인 레이아웃을 고려하십시오.
간단하게 말하면 사이트 구조는 2차원(매트릭스)을 향한 것이 아니라 1차원 구조 상황에서도 flex-box를 고려한다.
전체적인 큰 테두리를 결정한 후의 세부 조정에 관하여 flex-box(내선 배열 요소의 경우)를 주축으로 조정한다.
총괄적으로 말하면 큰 상자는grid이고 디테일은flex-box입니다.
브라우저 덮어쓰기 요구 때문에grid를 사용할 수 없는 경우, 큰 상자도flex-grid로 대응합니다.
전통적인 업무 시스템 수정 안건 등에서 브라우저의 하위 호환성을 확보하고자 하는 경우 flat(clearflex)를 활용해 노력한다.
다음은 매우 이해하기 쉬운 해설이다.
https://coliss.com/articles/build-websites/operation/css/grid-for-layout-flexbox-for-components.html
역 문자 레이아웃
헤드, footer,main에 사이드바를 설정합니다.

키워드:

컨테이너를 사용하여 중앙 정렬

Body의 Margin을 0

으로 재설정

margin 0 auto

flexbox를 사용하여main 분할하기

display:flex (flex:1,2)

L자 출력 대칭 이동
위에서 떨어지는 줄.
전역 내비게이션 (머리).왼쪽에는 탐색 모음의 유형이 있습니다.
(업무 도구, 특히 슬랙이나 채팅 시스템 등)
성배 배치

용도
많은 디스플레이를 구분할 수 있습니다.내용이 많고 페이지가 많은 사이트를 대상으로 하다.
left를 내비게이션에 할당하고, 센터를 메인 내용, rigth를 하위 내용 표시에 사용합니다.
뉴스 사이트, EC 사이트 등.
성배를 세로 화면으로 펼치다
키워드:
-min-height를 100vh로 설정
- flex-direction column
-flex분할은 1, 3, 1 또는 양측 고정, 100px, 1(flex), 200px 등이다.
회전식 지원
스펀지 패드에 대응할 때 중앙의 3분단 부분을 세로로 배열한다.

미디어 조회를 사용하여 max-width에서 끊깁니다.

중앙부분의 flex-direction을row(가로)에서column으로 전환합니다.

width 100%(페이지 간격 없이 전체 화면 사용)

main 요소의 순서가 위로 가져오면order-1에 들어간다.

응용 프로그램
성배 레이아웃에서 바닥글 부분을 빼고 역U자 레이아웃을 형성하는 경우도 늘고 있다.
스마트폰의 무한 스크롤 대응 등으로 바닥글 자체를 사용하지 않는 경우가 늘었다.
이런 경우 바닥글 요소를 간소화한 후 좌우의 어느 하부로 많이 가져간다.페이스북 등.
단렬판식

스마트폰이 보급되면서 모바일 1위 사이트도 늘고 있다.PC와 모바일 레이아웃의 기본 구조는 변화가 없다
단열 구조는 현재 이미 주류 중의 하나가 되었다.
키워드
-container 클래스(margin 0 auto;)공백 관리.
-flex-directon column과row의 조합.전체적으로 세로 스택, 전 세계 내비게이션 시스템 등 일부 가로 스택
회전식 지원
일정 화면 아래에 다음과 같은 대응을 넣고 미리 연습하세요.

미디어 조회를 이용해 내비게이션 메뉴 등을 햄버거 메뉴 등으로 설정했다.

수정 등은 일정한 화면 너비 이하에서 가로로 일렬로 배열된 내용을 2단계로 전환한다.

주변의 공백을 없애고width:100% 등으로 만든다.

격자판식
더 많은 여백 레이아웃
컨테이너로 메인을 싸서 가운데 한 자리에만 놓는다.
그 중에서 영역을 분리하여 내용을 배열하다.
사진과 내용 자체를 더욱 돋보이게 하려는 경우.충격을 주고 싶은 상황.
LP 등에 사용됩니다.