천천히 성장하기

html>                 class="box1">          class="box2">          class="box3 height100">

text

1. 기능 : 레이아웃을 똑같이 유지하도록 자동 재정렬할 때 이용 2. flex box 구성 요소 : flex container + flex item 3. 예제 브라우저 창의 크기를 조정하십시오. "flex-wrap : nowrap;"이있는 컨테이너 그 아이템을 포장하지 않습니다. 참고 : Flexbox는 Internet Explorer 10 이전 버전에서는 지원되지 않습니다. 4. comment : .flex-container{ display: flex; } 하면 자식요소들(items)은 수평 축으로 자동정렬. flex-direction: column; 이 추가되면 items 수직정렬로 바뀜. 5. flex box 속성들 * 참고: tcpschool.com, w3schools.com

The display Property 1. Block-level Elements 블록은 항상 새 줄에서 시작하여 사용 가능한 전체 너비를 차지합니다 (가능한 한 왼쪽과 오른쪽으로 확장) 1.1. 블록이 기본값으로 적용되는 태그 - 2. Inline Elements 인라인은 새 줄에서 시작되지 않으며 필요한만큼만 폭을 차지합니다. 2.1 인라인이 기본값으로 적용되는 태그 3. Display: none; 일반적으로 JavaScript와 함께 사용하여 요소를 삭제하거나 다시 만들지 않고 요소를 숨기고 표시합니다. 가 기본적으로 diplay: none; 입니다. 4. Hide an Element - display:none or visibility:hidden? display 속성을 none으로 설정하여 요소를 ..

링크의 4가지 상태 : a : link-방문하지 않은 일반 링크 a : visited-사용자가 방문한 링크 a : hover-사용자가 마우스를 가져갈 때의 링크 a : active-클릭 순간의 링크 링크 스타일링 - CSS 속성들을 가지고 링크의 스타일을 지정할 수 있다. 사용 예제 1) Text Decoration - 링크에서 밑줄을 제거하는데 주로 사용 ex) a: hover{ text-decoration : underline;} 2) Background color - 링크 content의 배경색 지정에 사용 ex) a: link { background-color : yellow;} 3) Link Buttons ex) a:link, a:visited { background-color: #f44336;..

font-family font-size font-style font-variant property values - normal, small-caps, initial, inherit font-weight

1. CSS Outline Style dotted - Defines a dotted outline dashed - Defines a dashed outline solid - Defines a solid outline double - Defines a double outline groove - Defines a 3D grooved outline ridge - Defines a 3D ridged outline inset - Defines a 3D inset outline outset - Defines a 3D outset outline none - Defines no outline hidden - Defines a hidden outline 2. CSS Outline Properties outline-sty..

1. CSS 문법 Selector {declaration ; declaration} -> Selector {property: value; property: value;} 2. CSS 선택자 표기 Selector Example Exaple Description .class .intro "intro"라는 클래스명을 가진 선택자 전체 #id #firstname "firstname"이라는 id명을 지난 선택자 전체 * * 전체 요소를 선택자로 가짐 element p p태그(요소) 전체 선택 element, element, ... div, p div, p 태그 전체 선택 3. 3가 CSS 삽입 방법 (웹문서에 CSS 추가 방법 : 브라우져가 스타일 시트를 읽어 드릴때 스타일시트에 정보에 따라 html 문서를 포맷..