분류 전체보기

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

Container에 적용되는 속성 값 display flex-direction flex-wrap flex-flow justify-content align-items align-content Item에 적용되는 속성 값 order : 순서 지정 flex-grow flex-shrink flex align-self 중심축main axis (수평) → (수직) ↓ 반대축cross axis (수직) ↓ (수평) → div*10 + Tab div.container>div.item.item${$}*10 + Tab : 아래와 같은 body 손쉽게 작성 가능 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 CSS .container{ background: beige; height: 100vh;..

Display HTML 1 2 3 CSS div, span { width: 80px; height: 80px; margin: 20px; } /*한 줄에 하나씩 나옴*/ div{ background: red; display: inline-block; /* inline: 한 줄에 여러개가 진열될 수 있는 상자 span과 같이 한 줄에 여러개씩 나옴. 사용자가 정의한 박스 크기대로 화면에 표시 */ /* display: inline; inline: 물건 span과 같이 아무런 내용이 없으면 화면상에 표시되지 않음. 사용자가 정의해 놓은 사이즈는 무시하고 컨텐츠 크기에 따라 달라짐. */ } /*한 줄에 여러개씩 나옴.*/ span{ background: blue; display: block; /*div와 같이..

Universal * type Tag ID #id Class .class State : Attribute [] selector{ property: value; } 기본적인 선택자 구성 * { color: green; } 전체 태그 글자색 변경 li { color: blue; } 태그의 글자색 변경 li#special { color: pink; } 태그 중 id가 special인 태그의 글자색 변경 .red { width: 100px; height: 100px; background: yellow; } class가 red인 태그의 속성 변경 button:hover { color: red; background: beige; } 태그에 마우스를 올렸을 때 속성 변경 a[href="naver.com"]{ colo..

보호되어 있는 글입니다.