CSS

https://edu.gcfglobal.org/en/basic-css/the-css-box-model/1/ 이미지 참고. Box Model? HTML 구조의 모든 요소는 '박스'형태로 이루어져 있기에 '박스 모델'이라고 한다. 박스 모델의 구성 요소 conten

CSS의 자료형 length MDN percentage MDN 절대길이 절대길이는 어떤 상황에서든 항상 고정된 길이를 나타내는 단위를 말한다. 절대길이는 거의 'px'(픽셀)만 사용함. 픽셀은 절대값을 사용하는 단위이며, 1px는 항상 1px이다. 픽셀을 사용하

색상 - HEX, rgb, rgba 주로 이 세 가지 방식을 통해 색상을 표현한다. HEX 오른쪽의 코드가 바로 'hex' 코드. 16진수로 표현된다. >16진수 >>10진수 : 0 ~ 9 + ABCDEF 16진수는 0이 제일 작은 값, F가 가장 큰 값.

'display' 속성은 요소를 화면에 어떻게 나타낼지를 결정한다.display 속성 값none : 화면에 보이지 않음. (레이아웃에서 무시, 코드 상에는 존재)↑ display : none 적용 전 상태.↑ 녹색 박스에 display : none 속성을 준 것. 화면

폰트 색상 지정.폰트 크기를 조정하지 않는다면 font-size의 기본값은 16px.글꼴의 스타일을 지정하는 속성으로 대부분 'Italic'체(기울임꼴)를 적용한다.font-weight은 폰트의 굵기를 설정하는 속성이다.기본값은 400이며, 100 ~ 900까지 적용

flexbox 'flexbox'는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식이다. 'flexible'이라는 단어처럼 유연한 레이아웃을 구성할 수 있으며, flex-container, fl

'transition'은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. transition은 자연적으로 발동되는 것이 아니다. 예를 들어 ':hover'와 같은 가상 클래스 선택자(Pseudo-Cl

'transform'은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여할 수 있다.PoiemaWeb 참고.img의 width를 200px로 설정한 경우.scale(0.5) -> 절반이 줄어듦.x축, Y축 다르

'animation' 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다.'transi