정원

모든 HTML태그는 디폴트로 block와 inline이라는 속성을 가진다 ​ ​ block 특성 항상 새로운 라인에 표시된다. 화면 너비전체를 차지하며 자동으로 width: 100% height: auto 가 된다. 프로퍼티 설정 가능 (widht,height,margin,padding) 블럭요소안에 인라인 요소 포함 가능하다. 주요 태그는 div,h1-h6,p,ol,ul,li,hr,table,form ​ ​ inline 특성 새로운 라인으로 시작하지 않는다 같은 라인에 위치가능 요소너비만큼 가로폭 차지 프로퍼치 설정 불가 (상하여백은 line-height로 가능하다) inline 특성을 가진요소뒤 엔터,스페이스있을경우 4px정도 공백이 생김 인라인 특성요소안에 블럭특성 요소 포함되지않는다. 주요태그 s..

상속 부모요소의 프로퍼티를 상속받고싶다면 명시적으로 inherit 값 지정 - 자식까지 상속되는 프로퍼티 . . . - 상속되지않는 프로퍼티 width, height, margin, display, border 선택자 *: "*" 와일드 카드라 불림, 전체선택자를 사용하면 페이지에 해당하는 모든 요소에 영향 타입선택자: HTML요소 이름을 선택자로 사용 id선택자: id속성에 지정한 값을 이용해 스타일 지정, id앞에 '#'을 붙여 작성 페이지당 하나만 가지는 단일값으로 정확하게 일치하는 단일요소에만 지정하고 싶을때 사용 class선택자: 요소에 스타일을 지정하는 가장 일반적인 방법, class앞에 '.'을 붙여 작성 여러요소에 값은 class값을 지정해 동일한 스타일 지정할 수 있음 속성(attribu..

transform element변형시 사용 요소의 회전, 크기조절, 기울이기, 이동효과를 부여하는 함수 제공 transform: transform 함수; 함수 설명 함수 인자 값 translate(x,y) 요소위치를 가로로x, 세로로y만큼 이동 css기본단위 translateX(n) 요소위치를 가로로 x만큼 이동 css기본단위 translateY(n) 요소위치를 세로로 y만큼 이동 css기본단위 sclae(x,y) 요소크기를 가로로 x배, 세로로 y배 확대또는 축소 0또는 양수 sclaeX(n) 요소크기를 가로로 x배 확대또는 축소 0또는 양수 sclaeY(n) 요소크기를 세로로 y배 확대또는 축소 0또는 양수 skew(x-angle,y-angle) 요소를 가로로 x각도만큼, 세로로 y각도 만큼 기울임 ..

박스모델 콘텐츠 및 크기 박스는 dispaly 값, 설정된 치수 및 박스 안에 있는 내용에 따라 다르게 동작함 콘텐츠는 부모콘텐츠의 크기 제어 가능 오버플로 콘텐츠가 박스에 비해 너무 큰 것 overflow속성을 사용하여 요소가 오버플로 콘텐츠를 처리하는 방법을 관리할 수 있음 Selector 선언은 선택자와 일치하는 요소에 스타일을 적용하는 속성 및 값 쌍이다 CSS규칙은 원하는 만큼 선언과 선택기 가질 수 있음! 단순 선택기 범용 Selector : 페이지의 모든 html요소에 적용 { color: pink; } 유형 Selector : 모든 섹션 요소에 적용 section { padding: 2em; } 클래스 Selector, ID Selector .my-class { color:red; } #m..