CSS

CSS란 HTML(마크업 언어)을 꾸며주는 표현용 언어 문서를 보기 좋게 디자인 CSS는 보통 마크업 언어인 HTML과 같이 묶어서 사용 CSS 구문 선택자(selector) - "h1" 속성(property) - "color" 값(value) - "yellow" 선언(declaration) - "color: yellow", "font-size: 2em"...

CSS 정의와 구문 CSS Reference를 통해 확인 가능한 사항들 CSS 단위 절대 길이 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않음 px 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적 여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조 디자인 의도가 많이 반영된 웹사...

타이포그래피의 구조 모든 폰트는 em박스를 가지고 있고 위 그림과 같은 구조로 이루어짐 font-family 글꼴을 지정하는 속성 한글을 지원하지 않는 디바이스일 경우 해당 한글 폰트를 불러올 수 없으므로 영문명으로도 선언해 주어야 함 자식 요소에서 font-family를 재선언하면 부모에 generic-family가 선언되어있어도 다시 선언해주어야 합...

display 요소의 렌더링 박스 유형을 결정하는 속성 display와 box model의 관계 | display | width | height | margin | padding | border | :---: | :---: | :---: | :---: | :---: | :---: | | block | ㅇ | ㅇ | ㅇ |ㅇ | ㅇ | | inline |...

미디어쿼리 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해줌 이전의 정적인 고정 레이아웃 웹 사이트에서 동적으로 반응하는 반응형 웹 사이트로 패러다임이 새롭게 변화 @media(at media) 미디어 타입 우리가 알아야 할 타입은 al...

float이 끼치는 영향 float해제 방법1 - 부모요소 height 부여 그림과 같이 좌우로 플로팅 된 요소를 가지고 있는 부모 요소를 파란 점선으로 표시. 플로팅 된 자식 요소의 높이 값만큼을 부모 요소에게 높이 값으로 부여해 공간을 늘려 마치 플로팅 된 내용이 해제된 것처럼 보이는 효과를 줌 하지만 이는 전체의 흐름을 방해하지 않도록 하는 방법...

GIF 최대 256 색상을 지원하며 비 손실 압축 포맷으로 구현이 간편함 압축률이 낮아 이미지 용량이 크고, 브라우저 성능(fps) 저하 발생 MP4 손실 압축 포맷으로 용량이 적고 스트리밍 재생이 가능함 알파 채널이 지원되지 않아 배경색을 포함한 콘텐츠를 제작해야 함 CSS & JS 인터렉션 UI 애니메이션에 적합하고, 부드러운 애니메이션 제공 ...