Hi

em 단위는 부모 요소의 크기에 따라 자식 요소의 글자 크기가 바뀌기 때문에, em 수치가 계속 달라진다는 단점을 보완하기 위해 나온 단위 rem에서 r은 root를 뜻함. body {font-size: 16px;} 로 지정하면,rem은 항상 body의 폰트사이즈를 기준으로 폰트 크기를 변환한다.

justify-content : 주축 기준의 배치 방법 지정하기 justify-content: flex-start | flex-end | center | space-between | space-around align-items, align-self - 교차축 기준의 배치 방법 지정하기 align-items: stretch | flex-start | flex-end | center | baseline align-self 속성을 이용하면 플렉스 항목을 개별적으로 배치할 수 있음 align-self: auto | stretch | flex-start | flex-end | center | baseline

html의 naming convention 워낙 소스 코드가 많아지다 보니 네이밍 컨벤션(이름짓기)가 중요해서 이 기관에서 지정함

플렉스 항목 크기 조절하기 flex: [ ] | autu | initial 플렉스 항목의 너비를 얼마나 늘일지 숫자로 지정 플렉스 항목의 너비를 얼마나 줄일지 숫자로 지정 플렉스 항목의 기본 크기 지정. initial 항목의 width/height 값에 의해 크기가 결정되는데 플렉스 컨테이너의 공간이 부족할 경우, 최소 크기까지 줄입니다. auto 항목의 width/height 값에 의해 크기가 결정되지만 플렉스 컨테이너의 고간에 따라 늘이거나 줄입니다. 출처 : Doit! html5 + css3 웹표준의 정석

플렉스 항목의 배치 순서 바꾸기 order: 0 | 숫자 0이면 소스에 입력한 순서대로 배치.숫자로 하면 그 순서에 따라 배치. box1 box2 box3

플렉스 방향과 여러 줄의 배치를 한꺼번에 지정하기 flex-flow: flex-flow: row; /* 왼쪽에서 오른쪽으로, 한줄에 표시*/flex-flow: column wrap; /* 위에서 아래로, 여러 줄에 표시 */

flex-wrap: no-wrap | wrap | wrap-reverse 플렉스 항목을 한 줄 또는 여러 줄로 배치하기 속성 값 설명 no-wrap 플렉스 항목들을 한 줄에 표시합니다. 기본 값 wrap 플렉스 항목을 여러 줄에 표시 wrap-reverse 플렉스 항목을 여러 줄에 표시하되 기존 방향과 반대로 배치 #container { width: 500px; height: 300px; margin: 0 auto; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; border: 2px solid black; }

플렉스 방향 지정하기 플렉스 컨테이너를 지정했다면 플렉스 항목을 배치할 방향을 알려주어야 함. flex-direction: row | row-inverse | column | column-inverse 1 2 3

display: flex | inline-flex 속성 값 설명 flex 플렉스 박스를 박스 레벨 요소로 정의 inline-flex 플렉스 박스를 인라인 레벨 요소로 정의 출처 : Doit! html5 +css3 웹표준의 정석

css 파일 삽입하기ex)

요소 쌓는 순서 정하기 요소 위에 요소를 쌓을 때 쌓는 순서를 지정 z-index:

요소를 보이게 하거나 보이지 않게 하기 visibility: visible | hidden | collapse 속성 값 설명 visible 보임(기본 값) hidden 감춤. 크기를 그대로 유지하기 때문에 배치에 영향을 미침 collapse 서로 만날 때 겹치게 하기. 그 외에서는 hidden 처리

의미 없는 html 문장 만드는 사이트한글 Lorem Ipsumhttp://guny.kr/stuff/klorem/#/p-html

배치 방법 지정하기 웹 문서 안의 요소들을 자유자재로 배치해 주는 속성 텍스트나 이미지를 나란히 배치, 여러개의 요소를 가로나 세로로 원하는 위치에 배치 가능 position : static | relative | absolute | fixed 속성 값 설명 static 요소를 문서의 흐름에 맞추어 배치합니다. float 속성으로만 이용해 좌우로 배치할 수 있음 relative 이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있음 .box1{ float:left; width:100px; background:#ffd800; margin-right:10px; padding:20px; } .box2 { position:relative; left:-50px; top:30px; width:300px; b..

float 속성 해제하기 float 속성을 사용하고, 그 다음에 넣는 다른 요소들에도 똑같이 속성이 전달되기 때문에, float 속성이 유용하지 않다는 것을 알려주는 속성 clear : none | left | right | both 박스1 박스2 박스3 박스4

왼쪽이나 오른쪽으로 배치하기 웹 요소를 문서 위에 떠 있게 만듬.-> 왼쪽 구석이나 오른쪽 구석에 요소가 배치 float: left | right | none 속성 값 설명 left 해당 요소를 문서의 왼쪽으로 배치 right 해당 요소를 문서의 오른쪽으로 배치 none 좌우 어느쪽으로 배치하지 않음 박스1 박스2 박스3 박스4 출처 : Doit! html5 + css3 웹표준의 정석

속성 값 설명 content-box width 속성 값을 콘텐츠 영역 너비 값으로 사용 (기본값) border-box width 속성 값을 테두리까지 포함한 박스 모델 전체 너비 값으로 사용 box-sizing = "content-box" box-sizing = "border-box"

콘텐츠 영역과 테두리 사이 여백 설정하기 padding : 테두리 안쪽의 여백 padding-top: | | autopadding-right: | | autopadding-bottom: | | autopadding-left: | | autopadding: | | auto

요소 주변 여백 설정하기 마진(margin) : 현재 요소 주변의 여백 margin-top: | | automargin-right: | | automargin-bottom: | | automargin-left: | | automargin: | | auto

선택한 요소에 그림자 효과 내기 box-shadow : none | [, ]*; = inset 수평거리와 수직거리는 필수, 다른건 옵션. 속성 값 설명 양수 값: 요소의 오른쪽, 음수 값: 요소의 왼쪽 에 그림자 만듬 양수 값: 요소의 아래쪽, 음수 값: 요소의 위쪽 에 그림자 만듬 기본 값 0 : 진한 그림자. 값이 커질수록 부드러운 그림자 양수 값: 모든 방향으로 퍼져 나감(박스보다 크게 표시) , 음수 값: 모든 방향으로 축소되어 보임. inset 안쪽 그림자로 그림 출처 - Doit! html5 + css3 웹표준의 정석

박스 모서리 둥글게 만들기 border-top-left-radius: | border-top-right-radius: | border-bottom-right-radius: | border-bottom-left-radius: | border-radius: | div { width: 300px; /* 너비 */ height: 200px; /* 높이 */ margin : 20px; /* 영역간 마진 */ display: inline-block; /* 가로로 배치 */ } .round { border:2px solid red; /* 2px짜리 빨강 실선 */ border-radius:20px; /* 모서리 20px 만큼 라운딩 */ } 타원 형태로 둥글게 만들기 border-top-left-radius: bor..

테두리 스타일과 두께, 색상 등의 속성들을 묶어 표현할 수 있다. border-top: | | border-right: | | border-bottom: | | border-left: | | border: | | 박스 모델 박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(border), 그리고 여러 박스 모델 간의 여백인 마진(margin) 등의 요소로 구성되어 있습니다.

테두리 색상 지정하기 border-top-color: border-right-color: border-bottom-color: border-left-color: border-color: border-color 속성만 사용해서는 화면에서 결과를 확인할 수 없음.사전에 border-width 속성과 border-style 속성을 미리 적용해야함. 출처 : Doit html5 + css3 웹표준의 정석

테두리 두께 지정하기 border-top-width: | thin | medium | thickborder-right-width: | thin | medium | thickborder-bottom-width: | thin | medium | thickborder-left-width: | thin | medium | thickborder-width: | thin | medium | thick .box1 { border-width:2px; } 네방향의 테두리 굵기를 모두 2px로 표시합니다..box2 { border-width: thick thin; } 위와 아래는 thick(굵게), 왼쪽과 오른쪽은 thin(가늘게)으로 표시합니다..box3 { border-width: 5px 10px 15px 20px; ..

테두리 스타일 지정하기 border-style: none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid

width, height 속성 - 콘텐츠 영역의 크기 (padding 안의 내용) width: | | height: | | display 속성 - 화면 배치 방법 결정하기블록 레벨 요소 -> 인라인 레벨 요소인라인 레벨 요소 -> 블록 레벨 요소 display: none | contents | block | inline | inline-block | table | table-cell 등 1) block 속성 값 : 인라인 레벨 요소 -> 블록 레벨 요소#block img { display:block; margin:10px; } 2) inline 속성 값 : 블록 레벨 요소 -> 인라인 레벨 요소nav ul li { display: inline; } 애완견 종류 입양하기 건강돌보기 더불어살기 3) inli..

linear-gradient( to , color-step, [color-stop,..]); 방향 키워드속성 값 설명 to top 아래에서 시작해 위로 그라데이션이 만들어짐 to left 오른쪽에서 시작해 왼 쪽으로 to right 왼쪽에서 시작해 오른쪽으로 to bottom 위에서 시작해 아래로 * 각 브라우저마다 차이가 있을 수 있음. 원형 그라데이션radial-gradient( at , color-step, [color-stop...]) 원형 그라데이션 위치 조정.grad { background: blue; background: -webkit-radial-gradient(10% 10%, circle, white,blue); background: -moz-radial-gradient(10% 10%, ..

속성 하나로 배경 이미지 제어하기 ex)background:url('images/bg3.jpg') no-repeat fixed right bottom; 속성 속성 값 background-image url('images/bg3.jpg') backgound-repeat no-repeat background-attachment fixed background-position right-bottom background-clip border-box background-origin padding-box background-size auto

배경 이미지 고정하기 background-attachment: scroll | fixed scroll : 화면 스크롤과 함께 배경 이미지도 스크롤됩니다. (기본값)fixed : 화면이 스크롤되더라도 배경 이미지는 고정됩니다.

배경 이미지 배치할 기준 조절하기 background-origin: border-box | padding-box | content-box border-box : 박스 모델의 가장 외각인 테투리(border)가 기준이 됩니다.padding-box : 박스 모델에서 테두리를 뺀 패딩(padding)이 기준이 됩니다.content-box : 박스 모델에서 내용 부분이 기준이 됩니다.