CSS

CSS 가상 셀렉터(Pseudo Selector) :active, :hover, :focus, :link, :visited 가상 셀렉터 :hover를 이용하면 마우스가 해당 요소 위에 있을 때 요소의 스타일 변경할 수 있습니다. 밑에 보이는 예제의 입력창에 마우

px은 고정적인 절대값의 단위입니다. 반면 em과 rem환경에 따라 변하는 단위입니다 em 과 rem은 가변단위로서 브라우저 환경에서 px로 변환됩니다.em은 같은 엘리먼트에서 지정된 font-size를 기준으로 px로 바뀌어 화면에 표시됩니다. 같은 엘리먼트에 설

flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식입니다. flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게

요소(element)를 원하는 위치에 배치하기 위해서 사용하는 CSS의 position 속성에 대해서 알아보겠습니다.top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성이 요소를 배치할 최종 위치를 결정합니다.기본값은 static 입니다.sta

box-sizing 속성은 CSS의 테두리 영역의 크기를 결정합니다. box-sizing 속성값에는 content-box와 border-box가 있습니다.content-box : 지정한 CSS width 및 height를 컨텐츠 영역에만 적용합니다. border, pa

모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다.하나의 박스는 네 부분(영역)으로 이루어집니다.박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(con