페이지 3 의 41234

HTML/CSS 기초 – 미니 웹사이트 만들기 9 – Float 속성을 이용한 레이아웃 2

이전 글에서 float와 clear의 기본적인 사용법을 알아보았습니다. 이번 글에서는 미니 웹사이트에서 실제로 어떻게 적용되는지 알아보겠습니다. 그리고 웹사이트 만드는데 있어서 사용되는 파일이 늘어나면 관리하기가 어려워지므로 폴더를 만들어 서로 비슷한 성격을 가진 파일을 한데 모아서 관리하면 편리하므로 파일관리시 반드시 사용하게 되는 절대주소와 상대주소에 대해서도 알아봅니다. cfile9.uf.161CCA404F1774B004EECF.zip 우선 이번 글에서 사용할 파일을 다운 받습니다. 이 파일에는 아래 이미지처럼 사진이미지가 있고 ...

HTML/CSS 기초 – 미니 웹사이트 만들기 8 – Float 속성을 이용한 레이아웃 1

이전 글에서 본문 영역에서 컨텐트와 사이드바를 좌우로 정렬할때 float: left;와 float: right; 라는 속성과 값을 사용하여 컨텐트 영역은 좌측에 사이드바 영역은 우측에 배치를 했습니다. float라는 말은 영어로 띄운다는 뜻으로 웹페이지상에서 이 속성을 사용하면 해당 요소는 붕 뜨게 되고 포지션에서 절대위치와 같은 효과가 나타납니다. 그래서 어떤 요소에 float를 사용한 경우 다른 요소와 겹치게 되는데 이를 방지하기 ...

HTML/CSS 기초 – 미니 웹사이트 만들기 7 – 절대위치(Absolute Position)와 고정위치(Fixed Position)

이전 글에서 상대위치(Relative Position)에 대해서 알아보고 제목타이틀에 상대위치를 적용해서 리본만들기를 해보았습니다. 이번 글에서는 포지션의 다른 속성인 절대위치(Absolute Position)를 이용한 포지션 방법과 고정위치(Fixed Position)을 이용해서 html 요소를 화면에 고정시키는 방법을 알아봅니다. cfile10.uf.193CA03B4F15219222DE9C.zip   1. 절대위치를 이용한 요소의 포지션 첨부파일을 열어보면 html부분과 CSS부분이 좀 바뀌었습니다. 1은 2부분을 스타일링한 것인데 마우스 스크롤시 화면이 이동되는 것을 보기위한 용도로 삽입한 것입니다. div#third 는 두개의 ...

HTML/CSS 기초 – 미니 웹사이트 만들기 6 – 상대위치(Relative Position)과 Border 속성을 이용한 글제목 스타일링하기

이번 글에서 만들 글제목 부분의 스타일입니다. 예전 글에서 CSS3에서 가능한 그림자효과를 주는 방법을 알아보았습니다 . 또한 글제목에 해당하는 <h1>태그에 대해서 배경을 검정색으로 하고 글자색을 흰색으로 하면 위와같이 나오게 됩니다. 그런데 문제는 양쪽 사이드에 있는 삼각형 모양입니다. 이러한 CSS를 이용한 모양을 리본이라고 합니다. 제경우는 제목부분과 그림자를 포토샵으로 만드는게 편해서 그냥 포토샵 이미지를 만들어 붙였는데 여기서는 CSS만을 ...

HTML/CSS 기초 – 미니 웹사이트 만들기 5 – 마진을 이용한 포지션, 상대위치(Relative Position)속성을 이용한 포지션(Position)

지금 진행하고 있는 글은 CSS에서 레이아웃에 관한 것이 주된 내용입니다. 지금까지를 정리해보면 우선 처음에 레이아웃에서 가장 기본인 블럭요소에 대해서 말씀 드렸고, 두번째로 이 블럭 요소를 타겟팅하는 방법, 세번째로 타겟팅을 효율적으로 하기 위해서는 외부 스타일 시트를 이용한다는 것, 네번째로 레이아웃에서는 빈상자인 <div>태그를 사용한다는 것, 다섯번째로 이 <div>태그라는 상자의 내용물(컨텐트)과 상자와 상자 간의 간격을 맞추기 위해서는 마진(Margin)과 ...

HTML/CSS 기초 – 미니 웹사이트 만들기 4 – 마진(Margin), 패딩(Padding), 보더(Border) 적용하는 방법

이전 글에서 마진과 패딩을 적용하는 방법을 간략하게 알아봤는데 이번 글에서는 마진, 패딩, 보더를 적용하는 자세한 방법을 알아보고 미니 웹사이트 작업을 계속 진행합니다. 마진과 패딩은 적용법이 간단하지만 보더의 경우는 장식을 위해서 사용하기 때문에 다양한 스타일이 있고 컬러도 적용할 수 있으므로 내용이 많습니다. 1. 마진과 패딩 적용하는 방법 기본적인 적용법은 마진의 상, 우, 하, 좌의 4면의 속성을 각각 설정하고 ...

페이지 3 의 41234