학습 목표- 미디어 쿼리가 무엇인지 살펴봅니다.- 반응형 웹을 구현하는 방법을 이해합니다. Preview 현대 웹 브라우저는 '미디어 쿼리(Media Query)'기능을 지원합니다. 미디어 쿼리는 미디어 타입에 따라 CSS를 적용할 수 있는 기능입니다. 미디어 타입(Media Type)은 장치(Device)를 의미하는데 프린터, 데스크톱, 스마트폰, 태블릿PC, 시청각 장애인 등이 사용하는 특별한 웹 브라우저를 나타냅니다. 따라서 미디어 쿼리를 사용하면 프리넡, 데스크톱, 스마트폰, 태블릿PC, 시청각 장애인용 웹 사이트를 구축할 수 있습니다. 1. 반응형 웹 소개 반응형 웹은 웹 페이지 하나로도 데스크톱, 태블릿PC, 스마트폰에 맞게 디자인이 자동으로 반응해서 변경되는 웹 페이지를 의미합니다. 예를 들..
학습 목표- CSS3를 사용해 수평 정렬하는 방법을 알아봅니다.- CSS3를 사용해 중앙 정렬하는 방법을 알아봅니다.- CSS3를 사용해 One True 레이아웃을 구성하는 방법을 알아봅니다.- CSS3의 절대 좌표를 활용하는 방법을 알아봅니다. Preview 이 장에서는 웹 페이지 개발에 사용하는 주요 레이아웃 구성 방법을 정리합니다. 간단하게 정리하지만 응용할 수 있는 분야가 굉장히 많으므로 이 책에서 가장 중요한 내용이라고 생각합니다. 따라서 CSS3 응용 부분이라 수업 여건상 다루지 못하더라도 개인적으로 차근차근 살펴보고 여러 번 연습하기 바랍니다. 이 장은 응용 예제로만 구성되어 있습니다. 한 번씩 따라 해 보고, 필요한 기능을 찾아 용도에 맞게 변형해 사용합니다. 이해하기 어려운 부분이 있다면..
그레이디언트는 두 가지 이상의 색상을 혼합하는 채색 기능입니다. 예를 들어 [그림 6-36]의 네이버 메인 페이지 메뉴를 살펴봅시다. 위에는 밝은 초록색이고 아래는 어두운 초록색으로 색이 혼합된 형태입니다. [그림 6-36] 네이버 메인 메뉴 CSS3 이전의 웹은 그레이디언트를 지원하지 않아 [그림 6-37]처럼 포토샵과 그래픽 툴로 이미지를 그린 후 background-image 속성을 사용해 웹 페이지에 넣었습니다. TIP_[기본 예제 6-19]와 같으 ㄴ방식을 사용하면 웹 브라우저의 버전에 상관없이 그레이디언트를 생성할 수 있습니다. [그림 6-37] 네이버 메인 페이지 아이콘 (스프라이트) 하지만 CSS3부터는 그레이디언트 기능을 지원합니다. 약간 내용이 어려우므로 툴을 사용해 그레디언트를 만들고..
그림자 속성은 태그에 그림자를 부여합니다. 글자에 그림자를 부여하는 text-shadow 속성과 박스에 그림자를 부여하는 box-shadow 속성이 있습니다. 8.1 text-shadow 속성 text-shadow는 글자에 그림자를 부여하는 속성으로 [그림 6-33]의 형태로 값을 입력합니다.[그림 6-33]text-shadow: : 5px 5px 5px black 오른쪽 아래 흐림도 색상 8.2 box-shadow 속성 box-shadow는 박스에 그림자를 부여하는 속성으로 [그림 6-34]의 형태로 값을 입력합니다.box-shadow: 5px 5px 5px black 오른쪽 아래 흐림도 색상 NOTE_ 흐림도와 색상 사이애ㅔ inset 키워드를 넣으면 그림자가 태그 안쪽에 생성됩니다. 뒤에서 살펴보는..
float는 웹 페이지를 만들 때 가장 많이 사용하는 속성입니다. 원래는 부유하는 대상을 만들려고 개발했지만, 현대에는 레이아웃을 잡을 때 많이 사용합니다. 조금 어렵지만 정말 중요하므로 차근차근 살펴봅시다. float 속성에는 [그림 6-32]의 키워드를 입력할 수 있습니다. 다양한 키워드가 있지만 주로 [표 6-9]의 키워드만 사용합니다. img {float: hide, inherit, initial, intrude, left, multicol, next, none} 표 6-9 이 책에서 다루는 float 속성 키워드 키워드 설명left 태그를 왼쪽에 붙이기right 태그를 오른쪽에 붙이기 기본 예제 6-16 float 기본 속성 1. HTML 페이지 만들기 다음 코드를 실행하면 이미지와 글이 분리된..
프로그램을 개발 할 때 요소의 위친은 다음 두 가지 방법으로 설정 합니다.- 절대 위치 좌표 : 요소의 X좌표와 Y좌표를 설정해 절대 위치를 지정합니다.- 상대 위치 좌표 : 요소를 입력한 순서에 따른 상대 위치를 지정합니다. 지금까지 다룬 내용에는 태그의 X좌표와 Y좌푤ㄹ 직접 설정한 저이 없습니다. 즉, 상대 위치 좌표를 사용해HTML 페이지를 만든 것입니다. 이번에는 절대 위치 좌표를 사용하는 방법을 알아보겠습니다. NOTE_ 절대 위치 좌표와 상대 위치 좌표 좀 더 알아보기 위치 속성을 처음 접하면 머릿속이 약간 복잡할 테니 좀더 설명해보겠습니다. 저랟 위치 좌표는 드래그해서 만들 수 있으므로 상대 위치 좌표보다 개발하기 쉽습니다. 화면의 크기가 고정된 프로그램을 개발할 때는 절대 위치 좌표를 이..
HTML 페이지는 대학교에서 원격으로 논문을 제출하고 확인하려는 용도로 만들었습니다. 따라서 CSS에도 글자 속성이 굉장히 많습니다. 이 절에서는 글자 속성을 살펴봅니다. 5.1 font-size 속성font-size는 글자 크기를 지정하는 속성입니다. font-size 속성에는 크기 단윈아 [그림 6-20]의 키워드를 입력할 수 있습니다. [그림 6-20]font-size: inherit, initial, lare, larger,, medium, small, smaller, x-large, x-small 5.2 font-fmaily 속성 font-family는 글꼴을 지정하는 속성입니다. font-family 속성의 스타일 값에는 [그림 6-21] 처럼 사용자 컴ㅇ퓨터에 설치된 글꼴을 입력할 수 있습니..
[표 6-5] 속성 설명background-image 배경 이미지 지정background-size 배경 이미지의 크기 지정background-repeat 배경 이미지의 반복 형태 지정background-attachment 배경 이미지의 부착 형태 지정background-position 배경 이미지의 위치 지정background 한 번에 모든 배경 속성 입력 다음 배경 속성을 사용해 해다 ㅇ태그의 배경 이미지나 색상을 지정합니다. 4.1 background-image 속성background-image는 배경 이미지를 지어하는 속성으로 스타일 값에는 URL 단위나 그레디언트를 입력합니다. 그레디언트는 이후에 살펴보고 이번 내용에는 URL 단위를 사용합니다. 4.2 background-sizse 속성backg..
IT로 먹고사는 사람들의 IT 생활리뷰
