-

Flex항목을 행이나 열로 배열하는 레이아웃 방법float나 position을 사용하지 안혹도 유연한 반응형 레이아웃 구조를 쉽게 디자인할 수 있음flex의 기본 조건flex는 항상 부모 요소(flex container)와 자식 요소(flex items)로 구성됨부모요소에 기본적으로 display: flex가 설정되어야 함flex의 특징flex를 무시하려면 자식요소에 postion:absolute를 활용flex container와 flex item에 정의하는 속성으로 나누어 짐자식요소는 행으로 배치된다(축으로 정렬)Flex container 모든 요소는 부모 요소에 disply:flex/inline-flex 설정을 기본으로 함flex container 속성은 전체적인 정렬이나 흐름에 관련된 속성 설정 :..

text-decoration글자를 꾸며주는 속성원하는 색이나, px로 선 굵기 조정 가능선 모양속성설명wavy물결선dotted점선dashed파선 선 위치속성설명underline아래overline위line-through중간Lorem.Lorem 2Lorem 3s

font-sizefont-size 속성 단위 : px, %, em, rem, pt%, em, rem : 부모 요소의 크기에 비레해서 나타남단위설명예%- 부모요소 크기 * (% / 100)- 120% : 부모크기의 1.2배- 90% : 부모크기의 0.9배em- 부모요소 크기 * em- 1em : 부모요소 크기 * 1- 2em : 부모요소 크기 * 2rem- 가장 상위 부모, html의상대적 크기를 가짐, 요소 중첩에 영향을 받지 않음- html 기본 크기 * 글자 크기- html {font-size:14px} 인경우 1.2rem : 14 * 1.2rem pt- 웹사이트를 종이로 인쇄할 경우 결과물의 글자 크기를 결정- 1인치/72, 프린트할 컨텐츠에 사용- 인쇄하는 상황에서 사용되는 글자 단위로, 일반..

CSS 적용 방법인라인 스타일 (inline style) 방식HTML 문서의 태그가 있는 라인 마다 style 속성으로 CSS 코드를 작성공통 속성을 부여하지 못하며, css 코드 분리가 되지 못해 유지보수 적합하지 않음임베디드(Embedded) 방식, 내부 스타일 시트 (internal style sheet) 방식 태그 안에 태그를 두고 CSS 코드를 작성코드 양이 많지 않거나, 해당 페이지에만 적용되는 스타일을 적용할 때 유용링킹 스타일 시트 (linking style sheet) 방식HTML과 CSS를 분리하여 link로 연결하여 사용가장 널리 사용

• 가상 요소 선택자 ::first-letter - 첫번째 글자 요소에만 적용 - 블록이나 문단요소에만 사용 가능(inline 요소 불가능) * 적용가능한 protperty 제한 사항 - 폰트 속성 전체 - 배경 속성 전체 - text-decoration 속성 전체 - 인라인 레이아웃 속성 전체 - border 속성 전체 - box-shadow - color - opacity ::first-line - 첫번쨰 줄에만 적용 - 블록이나 문단요소에만 사용 가능 (inline 요소 불가능) * 적용가능한 protperty 제한 사항 - font 속성 전체 - 배경 속성 전체 - margin 속성 전체 - padding 속성 전체 - border 속성 전체 - text-decoration 속성 전체 - colo..

• 상태 가상클래스 :enabled - 활성화 상태인 폼요소등의 UI 요소를 가리킴 - 입력할 수 있는 요소 :disabled - 활성화 상태인 폼요소등의 UI 요소를 가리킴 - 입력할 수 있는 요소 :checked - 선택된 상태인 라디오 버튼이나 체크박스를 가리킴 - 사용자가 선택했거나 문서의 기본값이 선택된 상태여도 가능 :indetermi-nate - 선택된 상태도, 선택되지 않은 상태도 아닌 라디오 버튼이나 체크박스 - 사용자 입력에 따른 상태가 아닌 DOM 스크립트를 통해서만 만들 수 있음 :default - 기본값으로 선택되어 있는 라디오버튼, 체크 박스 등 :vaiid - 사용자가 입력한 내용이 사용자 입력란에 정해진 기준을 모두 만족하는 상태 :invalid - 사용자가 입력한 내용이 사..