Front-end/CSS4 [CSS] 이미지 스프라이트 (Image Sprite) 이미지 스프라이트 (image sprite)란? 스프라이트(sprite)는 컴퓨터 그래픽스 용어로 비트맵 이미지나 애니메이션을 합성하는 기술을 뜻한다. 웹에서 이미지 스프라이트란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 것을 의미한다. 즉 여러 사진들을 붙여서 하나의 이미지를 만든다는 것이다. 아래 사진은 네이버에서 사용 중인 스프라이트 이미지 파일이다. 원리 이미지 스프라이트는 스프라이트 이미지에서 사용할 이미지의 정확한 width, height를 알아야하며, 스프라이트 이미지 상에서의 position 값도 알아야한다. 이후 적절한 background-position값과 width, height값을 적용하면 필요한 이미지만을 출력할 수 있다. 장점과 단점 장점 여러 이미지를 하나의 이미지로 .. 2022. 5. 13. [CSS] 반응형 웹 디자인 (Responsive Web Design) 반응형 웹 디자인 (Responsive Web Design)이란? 반응형 웹 디자인은 HTML과 CSS를 이용하여 구현할 수 있는 기술이다. 웹 페이지를 시청하는 사용자의 기기의 크기에 맞게 콘텐츠를 조정하는 것을 반응형 웹 디자인이라한다. Viewport (뷰포트) viewport (뷰포트)는 웹 페이지에서 사용자가 볼 수 있는 영역이다. 즉 데스크탑에서는 브라우저 창의 크기, 모바일 화면에서는 해당 기기 화면의 크기이다. HTML5에서는 meta태그를 통하여 viewport를 제어 할 수 있다. width=device-width : 기기의 화면 너비에 따르도록 웹 페이지의 width를 설정한다. initial-scale=1.0 : 페이지가 로드될 시 확대/축소 수준을 설정한다. 위 사진은 동일한 HT.. 2022. 5. 1. [MDN][CSS] MDN Web Docs CSS 링크 CSS: Cascading Style Sheets | MDN Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌 developer.mozilla.org 1. CSS first steps CSS first steps overview What_is_CSS? Getting_started with CSS How_CSS_is_structured How_CSS_works Using_your_new_knowledge 2. CSS building blocks CSS building_blocks overview Casca.. 2022. 4. 17. [CSS] CSS 레이아웃 (normal flow, display, flex box, grid, float, position, table, multiple column) CSS 레이아웃(CSS Layout)이란? CSS 레이아웃이란 웹 페이지에 포함될 요소들을 기본값 위치 기준과 부모 컨테이너, 또는 메인 뷰 포인트 및 메인창과 비례해 어느 위치에 놓일 것인지 제어하는 것을 의미한다. 즉 블록 레벨 요소들을 원하는 위치에 배열하는 것이다. 레이아웃에 사용되는 기술은 다음과 같다. normal flow display 속성 flexbox grid floats positioning 테이블 레이아웃(table layout) 다단 레이아웃(multiple-column layout) normal flow normal flow란 보통 흐름을 뜻하며, 페이지 레이아웃을 제어하지 않았을 경우 브라우저가 요소들을 기본값으로 배치하는 것을 의미한다. 첫 번째 줄입니다. 두 번째 줄입니다. .. 2022. 1. 5. 이전 1 다음
