안녕하세요 로로레나입니다.
드디어 2주? 만에 노려라 Tistory!!의
포스팅을 시작했습니다.
음...(이하 필전 잡담)
그럼 포스팅 시작하겠습니다.
======================================================================
[레이아웃이란 무엇인가!?]
웹 소스를 만지시다 보면
레이아웃이라는 말을 많이 들어보셨을 겁니다.
이 레이아웃이란건 별것 아니고
작성한 내용을 싣기 위한 어떠한
공간 들을 말하는 겁니다.
레이아웃을 구성한다는것은
이런 공간을 알맞은 위치로
배치한다라는 말이 되겠구요
레이아웃을 구성하기 위해선
3가지 방법이 존재 합니다.
여튼 우리가 주목할것은
이 3번 div의 규격입니다.
본 레이아웃 구성하기 포스팅은
이 div를 사용할 것이기 때문이죠
그럼 여기서 div에 관해서 굳이 표현하자면
div를 사용한다는 것은 도화지 위에
색종이들을 붙이는 것과 비슷한
느낌으로 사용된다고 할 수 있겠습니다.
그럼 이제부터 간단한 레이아웃을
구성해보도록 하겠습니다.
참고로 재가 작성 하는 모든 내용은
간략하고 핵심적으로 전부 이곳에도 기술되어 있습니다.
http://www.tistory.com/manual/skin/?_top_tistory=navi_manual_skin
[오늘 실습할 소스]
(항상 그렇듯이 작성된 소스 파일은 맨아래 준비되어있습니다.)
위의 소스를 각각
skin.html과 style.css에
작성후 저장을 해보시면
다음과 같은 모습이 나옵니다.
뭔가 쓴거에 비해서 참간단한 출력물이죠?
자 이런 소스를 조목조목 정리하면 다음과같습니다.
[선언부]
[작성부]
[style.css]
드디어 2주? 만에 노려라 Tistory!!의
포스팅을 시작했습니다.
음...(이하 필전 잡담)
그럼 포스팅 시작하겠습니다.
======================================================================
[레이아웃이란 무엇인가!?]
웹 소스를 만지시다 보면
레이아웃이라는 말을 많이 들어보셨을 겁니다.
이 레이아웃이란건 별것 아니고
작성한 내용을 싣기 위한 어떠한
공간 들을 말하는 겁니다.
레이아웃을 구성한다는것은
이런 공간을 알맞은 위치로
배치한다라는 말이 되겠구요
레이아웃을 구성하기 위해선
3가지 방법이 존재 합니다.
1. Frame 분할
2. Table로 구성한 레이아웃
3. div와 같은 것으로 구성된 레이아웃
설명을 드리면
1번은 페이지 자체를 분할한 방식며
주로 대분할을 할때 쓰이며 최근에는 거이
bgm과 같이 페이지가 변해도 유지가
필요한것들을 위해 사용됩니다.
2번은 표를 사용해서 레이아웃을 구성한 방법입니다.
하지만 최근에는 표를 이용한 방식은 잘사용되지 않고있습니다.
뭐 그렇다고 표가 나쁘다는 것이 아닙니다.
직관적이고 충돌이 적다는 점에서 표도 좋습니다.
다만
최근의 웹환경은 좀더 엑티브한점 이라던가
수정의 용의성때문에 표를 지양하는 추세 인것입니다.
3번은 div와 같은 것으로 구성된 레이아웃으로
대다수의 사람들이 주로 div로 작성됩니다.
개인적으로도 써본 소감상 가장 편하거든요
2. Table로 구성한 레이아웃
3. div와 같은 것으로 구성된 레이아웃
설명을 드리면
1번은 페이지 자체를 분할한 방식며
주로 대분할을 할때 쓰이며 최근에는 거이
bgm과 같이 페이지가 변해도 유지가
필요한것들을 위해 사용됩니다.
2번은 표를 사용해서 레이아웃을 구성한 방법입니다.
하지만 최근에는 표를 이용한 방식은 잘사용되지 않고있습니다.
뭐 그렇다고 표가 나쁘다는 것이 아닙니다.
직관적이고 충돌이 적다는 점에서 표도 좋습니다.
다만
최근의 웹환경은 좀더 엑티브한점 이라던가
수정의 용의성때문에 표를 지양하는 추세 인것입니다.
3번은 div와 같은 것으로 구성된 레이아웃으로
대다수의 사람들이 주로 div로 작성됩니다.
개인적으로도 써본 소감상 가장 편하거든요
여튼 우리가 주목할것은
이 3번 div의 규격입니다.
본 레이아웃 구성하기 포스팅은
이 div를 사용할 것이기 때문이죠
그럼 여기서 div에 관해서 굳이 표현하자면
div를 사용한다는 것은 도화지 위에
색종이들을 붙이는 것과 비슷한
느낌으로 사용된다고 할 수 있겠습니다.
그럼 이제부터 간단한 레이아웃을
구성해보도록 하겠습니다.
참고로 재가 작성 하는 모든 내용은
간략하고 핵심적으로 전부 이곳에도 기술되어 있습니다.
http://www.tistory.com/manual/skin/?_top_tistory=navi_manual_skin
[오늘 실습할 소스]
(항상 그렇듯이 작성된 소스 파일은 맨아래 준비되어있습니다.)
위의 소스를 각각
skin.html과 style.css에
작성후 저장을 해보시면
다음과 같은 모습이 나옵니다.
뭔가 쓴거에 비해서 참간단한 출력물이죠?
자 이런 소스를 조목조목 정리하면 다음과같습니다.
[선언부]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<title>[Tistory] 1. 레이아웃 구성하기</title>
</head>
1. !DOCTYPE 머시기
이녀석은 녀석은 웹표준 언어를 쓰기위한 일종의 규격입니다.
깊이 들어가면 복잡하니 꼭써주시면 되겠습니다.
2. meta 머시기
이녀석은 설정으로써 문자열이나 컨탠트 같은 것입니다.
이것도 깊이 들어가면 복잡하니 꼭 써주시고요
3. link 머시기
이건 skin.html에 사용할 style.css를 불러오는 문구입니다.
이것도 꼭 써주시면 되겠습니다.
4. title 머시기
이것은 꼭 쓸필요는 없지만
페이지 상단에 보시면 나오는
페이지 타이틀로 <title>과 </title>
사이에 글이 제목으로 출력됩니다.
여기서 /##_title_##/ :: /##_page_title_##/"는 티스토리 제공 치환자로
(※주: 여기서 슬러쉬 / 는 각각 대괄호로 바꿔주셔야 합니다.)
블로그 정보에서 작성해주시는
문자열로 출력이됩니다.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<title>[Tistory] 1. 레이아웃 구성하기</title>
</head>
1. !DOCTYPE 머시기
이녀석은 녀석은 웹표준 언어를 쓰기위한 일종의 규격입니다.
깊이 들어가면 복잡하니 꼭써주시면 되겠습니다.
2. meta 머시기
이녀석은 설정으로써 문자열이나 컨탠트 같은 것입니다.
이것도 깊이 들어가면 복잡하니 꼭 써주시고요
3. link 머시기
이건 skin.html에 사용할 style.css를 불러오는 문구입니다.
이것도 꼭 써주시면 되겠습니다.
4. title 머시기
이것은 꼭 쓸필요는 없지만
페이지 상단에 보시면 나오는
페이지 타이틀로 <title>과 </title>
사이에 글이 제목으로 출력됩니다.
여기서 /##_title_##/ :: /##_page_title_##/"는 티스토리 제공 치환자로
(※주: 여기서 슬러쉬 / 는 각각 대괄호로 바꿔주셔야 합니다.)
문자열로 출력이됩니다.
[작성부]
작성부에서는 2가지만 보시면 되는데요
바로 주석과 div 입니다.
주석이란 무엇인가?)_
먼저 주석이란걸 설명드리면
소스에 반영되지 않는
단지 소스를 보는 사람의
편의를 위한 메모같은것 입니다.
html문에서 주석을 사용하실때에는
다음과 같은 형식으로 작성 해주시면됩니다.
<!-- 이부분에 내용 -->
div는 의구성)_
먼저 div의 구성을 설명드리면
다음과 같은 구성입니다.
<div id="sidebar">
</div>
여기기서 id 라는 부분은
아래의 css에서 스타일을 선별적으로
지정하기위한 식별자 입니다.
이런 구성을 가진 div는 다음과 같이
쓸 수 있는데 그전에 먼저 한가지
프로그래밍에 관해 설명을 드리자면
프로그래밍이란것은 순차적인 문건입니다.
즉 저처럼 소스를 주욱 적으시면
컴퓨터는 맨위의 소스부터
한줄 한줄 읽으며 그대로
실행해서 내려온다는 이야기 입니다.
이점을 꼭 기억 해주시고요
div를 사용 하기위해선 앞서
색종이와 같더라 라고 말씀 드렸었습니다.
div를 작성하실때
<div>
<div>
</div>
<div>
이런 형태로 작성을 하시면
div 안에 새로운 div가
들어있는 형태가 됩니다.
바로 주석과 div 입니다.
주석이란 무엇인가?)_
먼저 주석이란걸 설명드리면
소스에 반영되지 않는
단지 소스를 보는 사람의
편의를 위한 메모같은것 입니다.
html문에서 주석을 사용하실때에는
다음과 같은 형식으로 작성 해주시면됩니다.
<!-- 이부분에 내용 -->
div는 의구성)_
먼저 div의 구성을 설명드리면
다음과 같은 구성입니다.
<div id="sidebar">
</div>
여기기서 id 라는 부분은
아래의 css에서 스타일을 선별적으로
지정하기위한 식별자 입니다.
이런 구성을 가진 div는 다음과 같이
쓸 수 있는데 그전에 먼저 한가지
프로그래밍에 관해 설명을 드리자면
프로그래밍이란것은 순차적인 문건입니다.
즉 저처럼 소스를 주욱 적으시면
컴퓨터는 맨위의 소스부터
한줄 한줄 읽으며 그대로
실행해서 내려온다는 이야기 입니다.
이점을 꼭 기억 해주시고요
div를 사용 하기위해선 앞서
색종이와 같더라 라고 말씀 드렸었습니다.
div를 작성하실때
<div>
<div>
</div>
<div>
이런 형태로 작성을 하시면
div 안에 새로운 div가
들어있는 형태가 됩니다.
[style.css]
css에 관하여 설명을 드릴것이 정말 많지만
본 포스팅에서 작성된 문구만 먼저 설명드리겠습니다.
/* 레이아웃 구성 */
#header {
clear: both;
position: relative;
margin:0 auto;
width: 1000px;
height: 200px;
background-color: #ff9090;
}
예로 다음과같은 css 문이있습니다.
하나하 설명을 드리면 다음과 같습니다.
/* 레이아웃 구성 */)_
앞서 skin에서 말씀 드렸던
주성중 하나입니다.
html과 달리 css에선
주석을 /* */와 같이 답니다.
<!-- --> 주석과 달리
/* */주석은 다음과같이
/*
주석입니다.
히히
//히히
//히히
*/
이런식으로 복문으로
사용하실수도 있습니다.
#header)_
div의 id 식별자 명입니다.
동일한 id를 가진 div는
이 css문으로 스타일이 정렬됩니다.
clear)_
clear는 앞선 레이어의 설정을
클리어 해주는 문장입니다.
이해가 잘 안되신다면
footer 부분의
clear: both;
부분을 삭제 하시면 다음과같이 출력됩니다.
보시면 content 부분의 레이어와
footer 부분의 레이어가 겹쳐진것을
확인하실수 있습니다.
이와같이 앞선 레이어의
정렬과같은 옵션을
clear 해주는 기능 입니다.
position)_
position은 해당 div의
포지션을 정해주는 옵션입니다.
position 옵션은 3가지가 있습니다.
1. static
2. relative
3. absolute
static은 고정입니다.
한번 주신 설정대로 지정되며
변함이 없습니다.
relative는 상대적입니다.
한번 주신 설정외에도
가변적으로 값을 입력하면
그에 맞추어 출력됩니다.
absolute는 절대적 입니다.
이는 해당 페이지의 0점을 기준으로
설정해준대로 출력됩니다.
margin)_
여백이라고 볼수있습니다.
이곳에 설정된 값만큼 div 주변으로
여백이 생깁니다.
위와같이 margin:0 auto;로 작성해주시면
div는 페이지의 가운대로 정렬됩니다.
padding)_
패딩은 기술이 안되어있지만
설명을 미리 드리자면 내부 여백으로써
주로 현재 위치로부터 특정 거리 만큼의 지점으로
내용물을 밀어 배치할때 주로 이용합니다.
width)_
가로 사이즈 입니다.
height)_
세로 사이즈 입니다.
background-color)_
배경 색상으로 대입값은 16 진수입니다.
참고로 16진수 색상표를 잘 모르시는
분들을 위하여 설명을 드리자면
16진수는 다음과 같이 사용합니다.
#FFFFFF
여기서 F 6자리중
2자리씩 RGB가 되며
순서대로 RGB의 대입값이 됩니다.
16진수는 0~F 까지로 16자리이며
FF 두자리는 256 가지의 값을 가집니다.
000000은 검은색이며
FFFFFF는 흰색입니다.
본 포스팅에서 작성된 문구만 먼저 설명드리겠습니다.
/* 레이아웃 구성 */
#header {
clear: both;
position: relative;
margin:0 auto;
width: 1000px;
height: 200px;
background-color: #ff9090;
}
예로 다음과같은 css 문이있습니다.
하나하 설명을 드리면 다음과 같습니다.
/* 레이아웃 구성 */)_
앞서 skin에서 말씀 드렸던
주성중 하나입니다.
html과 달리 css에선
주석을 /* */와 같이 답니다.
<!-- --> 주석과 달리
/* */주석은 다음과같이
/*
주석입니다.
히히
//히히
//히히
*/
이런식으로 복문으로
사용하실수도 있습니다.
#header)_
div의 id 식별자 명입니다.
동일한 id를 가진 div는
이 css문으로 스타일이 정렬됩니다.
clear)_
clear는 앞선 레이어의 설정을
클리어 해주는 문장입니다.
이해가 잘 안되신다면
footer 부분의
clear: both;
부분을 삭제 하시면 다음과같이 출력됩니다.
footer 부분의 레이어가 겹쳐진것을
확인하실수 있습니다.
이와같이 앞선 레이어의
정렬과같은 옵션을
clear 해주는 기능 입니다.
position)_
position은 해당 div의
포지션을 정해주는 옵션입니다.
position 옵션은 3가지가 있습니다.
1. static
2. relative
3. absolute
static은 고정입니다.
한번 주신 설정대로 지정되며
변함이 없습니다.
relative는 상대적입니다.
한번 주신 설정외에도
가변적으로 값을 입력하면
그에 맞추어 출력됩니다.
absolute는 절대적 입니다.
이는 해당 페이지의 0점을 기준으로
설정해준대로 출력됩니다.
margin)_
여백이라고 볼수있습니다.
이곳에 설정된 값만큼 div 주변으로
여백이 생깁니다.
위와같이 margin:0 auto;로 작성해주시면
div는 페이지의 가운대로 정렬됩니다.
padding)_
패딩은 기술이 안되어있지만
설명을 미리 드리자면 내부 여백으로써
주로 현재 위치로부터 특정 거리 만큼의 지점으로
내용물을 밀어 배치할때 주로 이용합니다.
width)_
가로 사이즈 입니다.
height)_
세로 사이즈 입니다.
background-color)_
배경 색상으로 대입값은 16 진수입니다.
참고로 16진수 색상표를 잘 모르시는
분들을 위하여 설명을 드리자면
16진수는 다음과 같이 사용합니다.
#FFFFFF
여기서 F 6자리중
2자리씩 RGB가 되며
순서대로 RGB의 대입값이 됩니다.
16진수는 0~F 까지로 16자리이며
FF 두자리는 256 가지의 값을 가집니다.
000000은 검은색이며
FFFFFF는 흰색입니다.
어찌어찌 기술하고 보니까
포스팅이 꾀길어졌습니다.
뭐 보기에 엄청 길지만 사실 별내용은 없습니다.
하나 재미있는 말을 해드리자면
시작이 반이라고하죠?
웹디자인할때 반은
레이아웃 구성에서 시작됩니다.
그러니 지금 여러분들은
반과 반에 반이니 도합 75%를 해치운 것입니다.
사실 웹언어 정말 별거 없습니다.
뭔가 감이 오신분들은 벌써
앞으로 어떻게 할지또한
감이 확확 오셨을겁니다.
포스팅을 맺으며
웹프로그래밍을 하기위해서
필요한 편의 프로그램으로
저번에 포스팅했던 드림위버를 추천해드리며
http://rorolena.tistory.com/1518
지금 보여드리는 과정은 모두
포스팅 때마다 업그레이드 되어
아래 주소에서 완성된 모습을 확인하실수 있습니다.
http://natelier.tistory.com/
레이아웃 구성.zip'보관소 ▦ ━━ > 작업 기록' 카테고리의 다른 글
| [Tistory] 2. 주로쓰는 CSS 명령어 모음 - 1 (2) | 2012.02.25 |
|---|---|
| [C/C++] 6. printf와 scanf (2) | 2012.01.30 |
| 2012/01/14 노려라 Tistory!! 포스팅 시작! (2) | 2012.01.14 |
| [API] 리소스 활용 (4) | 2012.01.13 |