태그
-
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 잡아준 것은 틀이 안깨지기 위해 잡아준다고 생각하시면 됩니다 테이블 태그로 짜보신분들은 아마 바로..
-
[기초태그강좌] 클릭하면 파일다운 받기IT 배우기/컴퓨터, 스마트폰 활용 2010. 10. 11. 11:04
오늘 강좌는 파일을 다운 받을 수 있게 하는 방법입니다. 기본적으로 링크를 활용해서~ 일정한 웹공간에 파일을 올려놓고 그 파일의 주소를 확인해서 링크를 걸어주는 방법입니다. 동영상, 음악, 자료, 압축파일, 프로그램 등 다양한 파일들이 가능합니다. (이것 역시 용량제한 같은 것이 없으면 바로 올리시는 것이 좋습니다) [파일다운 기본 태그] 파일다운받기 아주 쉽죠~ 그냥 링크 태그랑 똑같다고 보시면 됩니다. 그러나 여기서 중요한 포인트 하나!!!!! 멀티미디어 파일(음악,동영상 등)의 경우 클릭하면 바로 실행이 된다는 것이지요 멀티미디어 파일 위와 같이 사용할 경우 클릭하면 바로 실행~~ ㅜㅜ 다운받으려면 어떻게 해야할까요? 알집같은 압축프로그램으로 압축해서 올려야 합니다^^ 가끔 게시판같은 곳에서도 멀티..
-
[기초태그강좌] 이메일링크 방법IT 배우기/컴퓨터, 스마트폰 활용 2010. 10. 11. 11:04
이번 시간에는 클릭하면 이메일을 보낼 수 있는 방법을 소개하겠습니다. 개인적으로는 아웃룩 익스프레스를 잘 사용 안해서리 필요없는 태그이지만.. 그래도 좀 공신력 있는 곳은 이렇게 이메일 받을 수 있게 만들어야겠죠^^ 우리나라에서는 아웃룩을 거의 안써서 실제로는 사용하는 사람이 별로 없죠 ㅜㅜ [이메일 링크 태그] 글자 또는 그림 여기서 중요한 것은 'mailto:' 라는 명령어 입니다. 다른 것은 기본 링크 명령어들이죠~~ 이 'mailto:'라는 속성에 의해 사용자가 링크된 곳을 클릭하면 자동으로 전자우편을 보내는 작성창이 뜹니다. 간단하죠? ^^ 뒷 부분의 글자나 그림은 필요에 따라 사용하시면 됩니다. 오늘은 몸이 좀 안좋아서~~ 간단하게 마칩니다^^ 2009/10/04 - [IT강좌/태그(HTML)..