Header
-
div 태그공부-6 속성 값과 의미IT 배우기/컴퓨터, 스마트폰 활용 2010. 10. 16. 13:47
div태그 강좌 마지막 시간입니다 알아두면 좋을 태그 속성과 그 의미들입니다. 표로 그리려고 했는데 넘 불편해서^^ id 레이어의 고유한 이름 position absolut : 브라우저의 좌측 상단을 기준으로 지정한 거리만큼 떨어진 곳에 레이어가 놓입니다.(절대 좌표) relative : 상위 태그의 오른쪽 상단 위치를 기준으로 지정한 거리만큼 떨어진 곳에 레이어가 놓입니다.(상대좌표) top X좌표(단위를 생략하면 픽셀로 인식) left Y좌표(단위를 생략하면 픽셀로 인식) width 너비를 지정합니다.(단위를 생략하면 픽셀로 인식) height 높이를 겹칠 경우, 값이 큰 개체가 더 앞쪽에 위치하게 됩니다. z-index 개체들이 겹칠 경우, 값이 큰 개체가 더 앞쪽에 위치하게 됩니다. overflo..
-
div 태그공부-5IT 배우기/컴퓨터, 스마트폰 활용 2010. 10. 15. 13:42
기초 틀 잡는 것은 오늘 마지막 시간입니다. 사실 지난번 시간까지만 잘 이해하셨다면 오늘 것은 얘기안해도 벌써 하신분들이 많이 있을 겁니다~ 그래도 다른 속성 태그가 어떻게 사용되는지 볼겸 한번 설명해 볼까요~~ 본문 출력 부분 content 레이어 가로 크기를 580px로 하고, 배경색을 흰색으로 지정합니다. width:580px; background-color:#FFFFFF; 가독성을 위해서 본문의 배경은 흰색을 추천합니다. 좌측으로 오게 하기 위해 float 속성을 줍니다. width:580px; background-color:#FFFFFF; float:left 좌측으로 위치시키기 위해서 'float:left'를 입력하였습니다. 우측에 오게 할 때는 'float:right'를 입력하면 됩니다. co..
-
div 태그공부-4IT 배우기/컴퓨터, 스마트폰 활용 2010. 10. 14. 13:35
오늘은 상단 레이어인 header의 속성을 설정해 봅시다. 세로 크기를 200px로 하고, 배경색을 넣습니다. height:200px; background-color:#555555; 글씨색을 하얗게 해줍시다. height:200px; background-color:#555555; color:#FFFFFF 배경을 짙은 색으로 주었기 때문이지요. header의 완성된 속성을 style.css에 아래와 같이 입력합니다. 지난번 시간에 배운거 기억하고 계시죠^^ #레이어이름{속성:수치;속성:수치; ~~~} --------------------------------------------------------- #header {height:200px; background-color:#555555; color:#FF..
-
div 태그공부-3 레이어속성 정하기IT 배우기/컴퓨터, 스마트폰 활용 2010. 10. 13. 13:30
상단레이어 좌측레이어 우측레이어 위 태그는 1강 때 설명한 것입니다 이제 각 레이어의 속성을 정해보는 연습을 해보겠습니다 (참고로 div로 잡히는 것이 레이어 입니다) 위 태그에는 container, header, content, sidebar 4가지의 레이어가 있습니다 먼저 감싸는 레이어인 container부터 설정해 보겠습니다 전체 틀을 이야기 하는 것입니다. 가로 크기 800px로 하고 width:800px; 가운데 정렬이 되게 합니다. width:800px; margin:20px auto 'margin'은 바깥 여백을 뜻합니다. 안쪽 여백은 'padding'입니다. '20px auto' 는 위 아래에 각각 20px 여백을 주고, 좌 우에는 자동으로 동일하게 주라는 말입니다. 고로 가운데 정렬이 되..
-
div 태그공부-2 cssIT 배우기/컴퓨터, 스마트폰 활용 2010. 10. 12. 13:17
div 태그의 매력은 css에 있다고 해도 과언이 아닐 듯 합니다. 오늘 시간은 css를 본격적으로 배우기 전 기본 이해로 보면 될 거 같네요~ 기존 HTML 태그는 하나의 파일에 모든 것이 들어가 있었습니다. 물론 변형해서 사용하기도 했지만 기본은 [이름.HTML] 파일만 있으면 디스플레이까지 다 되었지요~ 그러나 div 태그를 사용할 경우 따로 css파일이 필요합니다 예를 들면 일반적으로 작업할 경우 skin.html 과 style.css 이렇게 두가지로 저장합니다. 그리고 css 파일의 경우 여러개가 생길 수도 있기때문에 image 폴더를 만들어서 이미지들을 관리하는 것처럼 css 폴더를 만들어서 관리하기도 합니다. css 파일에 기본적으로 들어가는 소스는 아래와 같습니다 --------------..
-
div 태그공부-1IT 배우기/컴퓨터, 스마트폰 활용 2010. 10. 11. 13:49
요즘은 테이블을 짜는 것보다 div를 더 많이 사용하지요 티스토리 블로그도 마찬가지이구요~ 그래서 div를 배워야할 필요가 생겼습니다. 간단하게 몇가지만 정리해 보려고 합니다 가장 기초적인 것이라 할 수 있는 … 먼저 틀짜기부터~~ 상단(타이틀) 본문 사이드바 가장 기초적인 위와 같은 형태를 짠다고 생각하겠습니다 기본 태그는 아래와 같습니다. 상단레이어 좌측레이어 우측레이어 이것이 그대로 디스플레이 되면 위와 같이 보이지요~~ 이게 무슨 틀이나고요^^ div 태그는 css와 같이 사용되어지기 때문에 위와 같이 보입니다 css를 설정하지 않으면 그냥 순서대로 저렇게 보이지요~~ 전체를 감싸는 container 잡아준 것은 틀이 안깨지기 위해 잡아준다고 생각하시면 됩니다 테이블 태그로 짜보신분들은 아마 바로..