[HTML]레이아웃,반응형 웹디자인,kbd,samp,code,var

layout

w3스쿨

• 헤더 - 문서또는 섹션의 헤더
• nav -  탐색링크세트
• 섹션 - 섹션
• article - 독립적인 콘텐츠제공
• aside - 사이드바
• footer -바닥글
• detaile - 사용자가 필요에 따라 열고 닫을 수 있는 추가세부정보
• summary - 디테일요소의 제목 

css프레임워크

w3.css

부트스트립 등

css float layout

Flexbox 레이아웃 모듈 이전에는 네 가지 레이아웃 모드가 있어야됨

• 차단, 웹 페이지 섹션의 경우
• 인라인, 텍스트용
• 테이블, 2차원 테이블 데이터용
• 위치 지정, 요소의 명시적 위치

플로트 또는 위치 지정을 사용하지 않고 유연한 반응형 레이아웃 구조를 보다 쉽게 ​​설계할 수 있습니다.

컨테이너<div>를 지정하고 그 외를 플렉스 컨테이너로 감쌈

• flex-direction = 컨테이너 쌓는 방향(column위,아래// column-reverse아래,위//row왼쪽오른쪽//row-reverse오른쪽왼족)
• flex-wrap = 래핑할꺼냐 (wrap하면 화면에 맞게 밑으로 내려감//nowrap 줄바꿈안됨//wrap-reverse역순래핑)
• flex-flow = (flex-directionflex-wrap두개 모두 설정하기 위한 설정)
• justify-content(플렉스항목정렬 center 중앙 flex-start 컨테이너 시작부분에서 플렉스항목정렬, flex-end 컨테이너 끝에 플렉스항목정렬 space-around 줄 앞, 사이, 뒤 공백이 있는 플렉스항목표시 space-between 줄사이 공백)
• align-items 플렉스 항목 정렬하게 만듬 baseline은 기준선과 같은 플렉스 항목 정렬
• align-content 플렉스 라인 정렬 stretch 나머지 공간을 차지하도록 플렉스라인을 늘림

CSS Flexbox Container

 

css 그리드

그리드 콘테이너 안에 그리드아이템

그리드콘테이너의 display를 grid로 설정하면 그리드 컨테이너가됨

행 - row 열 - column 그 사이 간격 - Colum Gap(열 간격) Row Gap(행 간격)

 

반응형웹다지인

모든 장치에 보기 좋은 웹페이지를 만드는 것

viewport설정

https://hyejin283.tistory.com/167

[HTML]iframe // script // 파일경로 //head요소(viewport)

반응형이미지

width, height를 100%설정시 이미지가 반응하고 확대, 축소됨

반응형텍스트

font-size를 뷰포트 너비인 vw단위로 설정가능

1vw = 뷰포트 너비의 1프로

 

kbd - 키보드입력할때

<kbd>Ctrl + a</kbd>

samp - 프로그램출력

code - 컴퓨터코드

var - 변수정의시