해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 CSS3 lesson 19~22의 내용인 반응형 레이아웃, flexbox, 수평/수직 중앙 정렬, image 요소 아래에 패딩된 여분의 공간 제거하기에 대해 알아보겠습니다. 19. 반응형 레이아웃(Responsive Web Design) Responsive Web Design 개요 사용자가 어떤 디바이스로 웹사이트를 방문할 지 알 수 없기 때문에 layout은 방문자의 화면 해상도를 고려해야 합니다. 반응형 웹 디자인은 화면 해상도에 따라 가로폭이나 배치를 변경해 가독성을 높여줍니다. viewport meta tag viewport는 웹페이지의 가시영역을 의미하며 디바이스에 따라 차이가 있습니다. 이를 이용하여 디바이스의..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 CSS3 lesson 15~18의 내용인 애니메이션, 트랜스 폼, 웹 폰트, 레이아웃에 대해 알아보겠습니다. 15. 애니메이션(Animation) HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다. 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어집니다. CSS 애니메이션을 사용하면 기존의 JavaScript 기반 애니메이션 실행과 비교하여 더 나은 렌더링 성능을 제공한다고 알려져 있습니다. 그러나 경우에 따라 세밀한 제어를 위해서는 JavaScript를 사용하는 것이 바람직합니다. @keyframes CSS 애..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 CSS3 lesson 11~14의 내용인 벤더 프리픽스, shadow, gradient, transition에 대해 알아보겠습니다. 11. 벤더 프리픽스(Vendor Prefix) CSS3 표준으로 확정되기 이전 or 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스를 사용해야 합니다. 구형 브라우저를 지원하기 위하여 벤더 프리픽스를 사용해야 할 필요가 있습니다. Can I use?에서 브라우저별 CSS 지원 정보를 제공하고 있으니 참고 바랍니다. Prefix Free 사이트에서 라이브러리를 다운로드하고 include 하기만 하면 이 후에는 벤더 프리픽스없이 모든 CSS를 사용할 수 있습니다. ..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 CSS3 lesson 8~10의 내용인 position, float, 상속, 캐스캐이딩에 대해 알아보겠습니다. 8. 요소의 위치 정의 (Position) position 프로퍼티 요소의 위치를 정의합니다. top, bottom, left, right 와 함께 사용됩니다. static (기본 위치) position 프로퍼티의 기본 값이며 좌표 프로퍼티는 같이 사용할 수 없습니다. 위 → 아래, 왼쪽 → 오른쪽 순서에 따라 배치됩니다. 부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치됩니다. relative (상대 위치) 기본 위치를 기준으로 좌표 프로퍼티를 사용해 위치를 이동시킵니다. static..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 CSS3 lesson 6, 7의 내용인 백그라운드와 폰트 & 텍스트에 대해 알아보겠습니다. 6. Background Background 관련 프로퍼티는 해당 요소의 배경으로 이미지 또는 색상을 정의합니다. background-image 프로퍼티 요소에 배경 이미지를 지정합니다. background-repeat 프로퍼티 배경 이미지의 반복을 지정하며 수직, 수평 또는 수직과 수평 모두의 반복을 지정할 수 있습니다. 설정된 이미지의 크기 < 화면의 경우, 자동으로 이미지가 반복 출력되어 화면을 채우게 됩니다. 이는 기본값이 repeat 으로 되어있기 때문입니다. x축으로만 배경 이미지를 반복할 경우에는 repeat-x, y축..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 CSS3 lesson 3~5의 내용인 CSS 프로퍼티 값의 단위와 Box model 그리고 display, visibility, opacity 프로퍼티에 대해 알아보겠습니다. 3. CSS 프로퍼티 값의 단위 CSS 프로퍼티에는 키워드, 크기 단위, 색상 표현 단위 등의 특정 단위를 갖는 값을 지정합니다. 키워드 각 프로퍼티에 따라 사용할 수 있는 키워드가 존재합니다. 예를 들어 display 프로퍼티의 값으로 사용할 수 있는 키워드는 block, inline, inline-block, none 가 있습니다. 크기 단위 대표적인 크기 단위는 절대값인 px, 상대값인 em, % 입니다. 대부분 브라우저의 폰트 사이즈 기본값은..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. CSS3 lesson 1, 2의 내용인 기본 문법과 셀렉터에 대해 알아보겠습니다. 1. CSS3 Syntax CSS(Cascading Style Sheets)는 HTML과 같은 구조화 된 문서에서 각 요소의 style(design, layout etc)을 정의하여 화면에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어입니다. HTML과 CSS는 각자의 문법을 갖는 별개의 언어이며, HTML은 CSS를 포함할 수 있지만 HTML 없이 단독으로 존재하는 CSS는 의미가 없습니다. 셀렉터 (Selector, 선택자) 셀렉터는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단입니다. 위와 같은 구문..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 HTML lesson 7~10의 내용인 목록 및 표 태그, 이미지 및 미디어 지원 태그, 폼 태그, 공간 분할 태그에 대해 알아보겠습니다. 6. HTML5 Tag - List & Table 목록(List) 목록 태그는 내비게이션 메뉴를 만들 때 자주 사용되며, 중첩으로 사용할 수 있습니다. 순서가 없는 목록은 태그를, 순서가 있는 목록은 태그를 사용합니다. type 어트리뷰트로 순서를 나타내는 문자를 지정할 수 있으며 가능한 값으로는 1, A, a, I, i 가 있습니다. start 어트리뷰트로 리스트의 시작값을 지정할 수 있습니다. reversed 어트리뷰트로 리스트의 순서값을 역으로 표현할 수 있습니다. 테이블(Tab..
해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다. 이번에는 HTML lesson 4~6의 내용인 기본 태그, 텍스트 관련 태그, 하이퍼링크에 대해 알아보겠습니다. 3. HTML5 Tag - Basic 웹 페이지를 구성하는 기본 태그는 다음과 같습니다. 문서 형식 정의 태그 (Document Type Definition, DTD) 출력할 웹 페이지의 형식을 브라우저에 전달합니다. 문서의 최상위에 위치해야 하며, 대소문자를 구별하지 않습니다. html 태그 모든 HTML 요소의 부모 요소이며 웹 페이지에 단 하나만 존재합니다. 특히 lang 어트리뷰트를 사용하는 경우가 많습니다. head 태그 메타데이터를 포함하기 위한 요소이며 웹 페이지에 단 하나만 존재합니다. 화면에 표시되지 않..
