3
8월

반응형 웹

학습 목표- 미디어 쿼리가 무엇인지 살펴봅니다.- 반응형 웹을 구현하는 방법을 이해합니다. Preview 현대 웹 브라우저는 '미디어 쿼리(Media Query)'기능을 지원합니다. 미디어 쿼리는 미디어 타입에 따라 CSS를 적용할 수 있는 기능입니다. 미디어 타입(M...

CSS3 응용과 레이아웃

학습 목표- CSS3를 사용해 수평 정렬하는 방법을 알아봅니다.- CSS3를 사용해 중앙 정렬하는 방법을 알아봅니다.- CSS3를 사용해 One True 레이아웃을 구성하는 방법을 알아봅니다.- CSS3의 절대 좌표를 활용하는 방법을 알아봅니다. Preview 이 장에...

그레이디언트

그레이디언트는 두 가지 이상의 색상을 혼합하는 채색 기능입니다. 예를 들어 [그림 6-36]의 네이버 메인 페이지 메뉴를 살펴봅시다. 위에는 밝은 초록색이고 아래는 어두운 초록색으로 색이 혼합된 형태입니다. [그림 6-36] 네이버 메인 메뉴 CSS3 이전의 웹은 그레...

그림자 속성

그림자 속성은 태그에 그림자를 부여합니다. 글자에 그림자를 부여하는 text-shadow 속성과 박스에 그림자를 부여하는 box-shadow 속성이 있습니다. 8.1 text-shadow 속성 text-shadow는 글자에 그림자를 부여하는 속성으로 [그림 6-33]의...

float 속성

float는 웹 페이지를 만들 때 가장 많이 사용하는 속성입니다. 원래는 부유하는 대상을 만들려고 개발했지만, 현대에는 레이아웃을 잡을 때 많이 사용합니다. 조금 어렵지만 정말 중요하므로 차근차근 살펴봅시다. float 속성에는 [그림 6-32]의 키워드를 입력할 수 ...

위치 속성

프로그램을 개발 할 때 요소의 위친은 다음 두 가지 방법으로 설정 합니다.- 절대 위치 좌표 : 요소의 X좌표와 Y좌표를 설정해 절대 위치를 지정합니다.- 상대 위치 좌표 : 요소를 입력한 순서에 따른 상대 위치를 지정합니다. 지금까지 다룬 내용에는 태그의 X좌표와 Y...

글자 속성

HTML 페이지는 대학교에서 원격으로 논문을 제출하고 확인하려는 용도로 만들었습니다. 따라서 CSS에도 글자 속성이 굉장히 많습니다. 이 절에서는 글자 속성을 살펴봅니다. 5.1 font-size 속성font-size는 글자 크기를 지정하는 속성입니다. font-siz...

배경 속성

[표 6-5] 속성 설명background-image 배경 이미지 지정background-size 배경 이미지의 크기 지정background-repeat 배경 이미지의 반복 형태 지정background-attachment 배경 이미지의 부착 형태 지정background...

티스토리툴바