천천히 성장하기

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으로 설정하여 요소를 ..

Table Borders - CSS에서 표 테두리를 지정하려면 border 속성을 사용 table, th, td { border: 1px solid black; } Collapse Table Borders - 테이블 테두리를 단일 테두리로 축소할지 여부를 설정 table { border-collapse: collapse; } Hoverable Table - 마우스를 올렸을때 테이블 행렬을 강조할때 사용 tr:hover {background-color: #f5f5f5;} Striped Tables - 줄무늬 테이블 생성, nth-child() 선택기를 사용해 테이블 행에 배경색 지정 tr:nth-child(even) {background-color: #f2f2f2;} Responsive Table - ov..

list-style-type - 목표 표시 아이템 모양 스타일 지정 ex) ul.a { list-style-type: circle; } ul.b { list-style-type: square; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; } list-style-image ul { list-style-image: url('sqpurple.gif'); } list-style-position ul.a { list-style-position: outside; } ul.b { list-style-position: inside; }

링크의 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

color : 텍스트의 색상 지정 direction : 텍스트 방향/쓰기 방향 지정 letter-spacing : 문자 사이 간격 조절 line-height : 줄간격 조절 text-align : 수평 정렬 text-decoration : 꾸미기 추가 text-indent : 단락 첫 번째줄의 들여쓰기 지정 text-shadow : 그림자 효과 지정 text-tranform : 대문자 지정 text-overflow :overflow(표시영역을 벗어나는 것)된 컨텐츠 표시 방법 지정 unicode-bidi : 속성과 함께 사용하여 동일한 문서에서 여러 언어를 지원하도록 텍스트를 재정의할지 여부를 지정하거나 반환 vertical-align : 수직 정렬 지정 white-space : 내부의 공백 처리 방법 ..

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..