소스
-
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 잡아준 것은 틀이 안깨지기 위해 잡아준다고 생각하시면 됩니다 테이블 태그로 짜보신분들은 아마 바로..
-
티스토리 본문쪽 소스 위치블로그를 위한 공간/블로그 꾸미기, 활용 2009. 9. 8. 11:00
티스토리 본문 쪽에는 따로 배치기능을 지원하지 않기 때문에 소스를 분석해봐야 된다. 조금은 귀찮지만 한번 정리하고 나면 나중에 편하다. 아래쪽 소스들을 유심히 살펴보자~ 기본적으로 소스는 CTRL + F를 눌러서 검색하면 된다. ..........................................중 략 ............................................. 복사한 소스 삽입 위치 ..........................................중 략 ............................................. 복사한 소스 삽입 위치 (원래는 가 아니고 []이다 - 화면 출력이 안되서 앞과 같이 표시함) 복사한 소스 삽입 위치 .........
-
티스토리 RSS구독버튼을 정리해보자블로그를 위한 공간/블로그 꾸미기, 활용 2009. 8. 29. 09:47
블로그 발행자라면 RSS구독버튼을 정리하고 싶은 생각이 들것이다. 필자도 여러 RSS구독버튼은 깔끔하게 본문 글이 끝나는 지점에 배치하고 싶었다. 한RSS의 경우 자체로 소스를 제공하기 때문에 먼저 삽입을 했다. 그러나 다른 여러 RSS의 경우 필자가 잘 사용안 하는 것도 있지만 어쨋던 좀 어려웠다. 여러브로그들을 방문한 결과 구독 버튼 / 메타블로그 버튼 / 추천 버튼 등을 모아서 디스플레이 하는 경우가 많았다. 일단 이번 포스팅에서는 구독버튼을 정리해 본다. (지금은 구독버튼이 필요하기에~ 이후에는 아마 다른 모든 버튼을 정리하고 싶어질 것 같다^^) 여러방법이 있을지 모르나 봐도 어렵고 해서 티스토리 본래 기능을 활용한 내 나름대로 방법을 하나 찾았다. 티스토리 사이드바 하단에 보면 아래와 같은 버..