일촉측발! 건딜지마! ::

« 2012/05 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

'그래픽 / 웹언어 ▦ ━/┗ 노려라 Tistory!!'에 총 3개의 글이 있습니다.

2012/02/25 [Tistory] 2. 주로쓰는 CSS 명령어 모음 - 1
2012/01/26 [Tistory] 1. 레이아웃 구성하기 (7)

2012/02/25 21:44 article by: 임시점검 상태의 Rorolena 카테고리: 그래픽 / 웹언어 ▦ ━/┗ 노려라 Tistory!!

노려라 Tistory!!를
작성하겠다고 한지 꾀지나 버렸습니다.

공증이 아닌 일은 우선순위가 쉽게 밀려버려서
정말 말씀드리기가 그지 없지만
혹시 만약 기다리셨던 분들에게는
죄송하다는 말씀을 드리며

자 이번 포스팅은
주로쓰는 CSS 명령어에대한 기본모음 입니다.
티스토리 스킨을 쉽고 편하고 재미있게 만들려면
CSS를 사용하실수 있어야 합니다.

재미있는 CSS 명령어도 많지만
지금부터 작성하는 것은 가장 주로쓰이고
가장 기본적인것만 골라 간략이 작성했습니다.

덤으 저번에 소개했던 CSS 명령어도
포함해서 다시 소개하도록 하겠습니다.

[선택자]
먼저 선택자에 관한 설명입니다.

html {}
body {}

이 2문구는 CSS를 적용한
전채 스크립트의 최상단에 먹이는
옵션같은 문구 입니다.

중괄호 안에 CSS 코드를 삽입해 주시면
전체적으로 옵션이 들어갑니다.
참고로 html{}은 IE6에서 작동이 안됩니다.

#name {}
.name {}

여기 2가지의 선택자가 있습니다.
전자는 #이 붙어서 ID라 하며
후자는 .이 붙어서 class라고 합니다.

이용상에 큰차이는 없으나
ID는 고유한것이고
class는 여러종류에 걸칩니다.

무슨 이야긴가 하면
ID를 쓰게 되면 그아이가 적힌 대상만 적용되는 반면
class는 그 이름이 들어간 모든것에 영향을 미칩니다.
자세한 설명을 하기엔 너무 복잡할수 있으니

기회가 되면 그때가서 설명하며

class와 id는 동시에 가실수 있으며
우선순위는 id가 더 높음을 먼저 알려드립니다.

[출력/정돈 엘레먼트]
지금부턴 출력과 정돈에 사용되는
인자에 관하여 설명 드리겠습니다.

#test {display: (인자);}
/* inline, block, inline-block, none */

display는 출력 형태를 담당 합니다.

inline: 대상을 인라인 박스로 만듭니다.
- 특징 -
- 줄바꿈되지 않고, 자동 left 정렬
- margin, padding, width, height 사용불가
- <span> 태그는 기본 inline 속성 이지만
float을 줄경우 margin, padding, width, height 사용가능

block: 대상을 블록 박스로 만듭니다.
- 특징 -
- 자동 줄바꿈
- margin, padding, width, height 사용가능
- margin: 0 auto;로 중앙정렬 가능

inline-block: 블록박스로 만들어지지만
인라인 박스처럼 작동
- 특징 -
- margin, padding, width, height 을 쓰면서도
태그와의 상호작용은 inline처럼 작동

none: 대상을 출력하지 않습니다.
- 특징 -
주로 가리기 할때 씁니다.

#test {clear: both;}

clear는 전방향에 걸린 float속성을 해제 시킵니다.
(float 바로 아래서 소개)

#test {float: (인자);}
/* left, right, none */

float은 대상을 정렬 하는데 사용됩니다.
- 특징 -
left: 왼쪽으로 정렬합니다.
right: 오른쪽으로 정렬합니다.
none: 정렬하지 않습니다.

#test {position: (인자);}
/* static relative absolute fixed */

postion은 대상의 정렬기준을 정하는데 사용됩니다.
- 특징 -
static: default값으로 일반적 표시흐름 입니다.
상단과 자측에서 거리를 지정할 수 없습니다.
relative: static과 비슷 하게 일반적 흐름 표시이지만
상단과 자측에서 거리를 지정할 수 있으며
가장 보편적으로 사용 됩니다.
absolute: 자신의 상속 개로부터의 절대 위치입니다.
absolute가 지정한 위치는 변함 없이 그곳에 있으며
이는 위치를 지정해서 사용하실 수 있습니다.
fixed: 고정 적으로 이용 한다인데
absolute와 비슷하면서도 다릅니다.

이것은 브라우저의 위치에 고정이 된다는 말로
스크롤이 일어나도 항상 그곳에 있습니다.

종전의 IE(특히 IE6)는 버그로
인해서 인지 작동이 안되었지만
현재의 IE는 작동합니다.

단 최근 안드로이드에서 실험결과
안드로이드는 fixed가 작동하지 않습니다.

[크기/이동/정렬 엘레먼트]
지금부턴 크기와 이동, 정렬에 사용되는
인자에관하여 설명드리겠습니다.

#test{margin: 100px auto};
/* 상 좌 하 우 */

margin는 외부여백입니다.
- 특징 -
인자는 4개까지 들어가며
각각 상 좌 하 우의 px값이 들어갑니다.

참고로 위에 100px auto는
대상을 가운대 정렬해주는
기능을 가지고 있습니다.

#test {padding: 30px 70px 20px}
/* 상 좌 하 우 */

padding은 내부 여백입니다.
- 특징 -
margin과 똑같이 인자는 4개까지 들어가며
각각 상 좌 하 우의 px값이 들어갑니다.

참고로 padding은 중앙정렬 기능 없습니다.

추가사항: margin, padding속성의
인자를 하나 혹은 두개만 입력하시면
하나 입력한경우는 전체가 그속성으로
둘만 입력한경우 상하 좌우가 대칭으로
속성이 적용됩니다.

#test {
	left: 30%;
	right: 30%;
	top: 50px;
	bottom: 150px;
}

위의 4가지 속성은
각각 그방향으로 부터
대상을 인자만큼 이동시킵니다.

주로 특정 비율만큼 이동이나
혹은 중앙정렬을 위해서 사용됩니다.

#test {width: 100px; height: 100px;}
/* %도 가능 */

이 속성들은 각각
가로 세로의 크기지정 입니다.
인자로 %도 전달이 가능한대
주로 가변을 위해서 100% 인자를
자주 씁니다.

다만 이 100% 인자를 세로에 쓰실때
주의 하셔야 할점이 있다면

100%는 정해진 공간에서만
세로로 100% 출력이 됩니다.

즉 외부에 다른 매체가 세로가 500px이고
그안에 다른 매체를 만들어 세로 를 100% 주셨다면
500px만큼 세로가 늘어나지만

만약 body안 에서 세로를 100% 주면
표시가 안되거나 약 100px 미만정도의
세로모습만을 보여줍니다.

팁: 이런세로를 100%를 주시려면
다음 세가지 경우중 하나에 가능합니다.

1. 세로가 정해진것의 안에 있을경우
2. 비 웹표준(웹표준 犬무시)
3. position: absolute상황

이번 포스팅에선
선택자와 출력, 정돈, 정렬, 크기, 이동
엘레먼트와 그 인자에 관해 알아 보았습니다.

다음 포스팅 때는 나머지
기본적 CSS에 관해 소개후
그다음 포스팅은

스킨 치환자를 설명해
드리도록 하겠습니다.

트랙백 0 댓글 0 위로↑

2012/01/26 18:41 article by: 임시점검 상태의 Rorolena 카테고리: 그래픽 / 웹언어 ▦ ━/┗ 노려라 Tistory!!

[Tistory] 1. 레이아웃 구성하기

안녕하세요 로로레나입니다.
드디어 2주? 만에 노려라 Tistory!!의
포스팅을 시작했습니다.

음...(이하 필전 잡담)

그럼 포스팅 시작하겠습니다.

======================================================================
[레이아웃이란 무엇인가!?]

웹 소스를 만지시다 보면
레이아웃이라는 말을 많이 들어보셨을 겁니다.

이 레이아웃이란건 별것 아니고
작성한 내용을 싣기 위한 어떠한
공간 들을 말하는 겁니다.

레이아웃을 구성한다는것은
이런 공간을 알맞은 위치로
배치한다라는 말이 되겠구요

레이아웃을 구성하기 위해선
3가지 방법이 존재 합니다.

1. Frame 분할
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></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가
들어있는 형태가 됩니다.

[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는 흰색입니다.

어찌어찌 기술하고 보니까
포스팅이 꾀길어졌습니다.

뭐 보기에 엄청 길지만 사실 별내용은 없습니다.

하나 재미있는 말을 해드리자면
시작이 반이라고하죠?

웹디자인할때 반은
레이아웃 구성에서 시작됩니다.

그러니 지금 여러분들은
반과 반에 반이니 도합 75%를 해치운 것입니다.

사실 웹언어 정말 별거 없습니다.
뭔가 감이 오신분들은 벌써
앞으로 어떻게 할지또한
감이 확확 오셨을겁니다.

포스팅을 맺으며
웹프로그래밍을 하기위해서
필요한 편의 프로그램으로
저번에 포스팅했던 드림위버를 추천해드리며
http://rorolena.tistory.com/1518

지금 보여드리는 과정은 모두
포스팅 때마다 업그레이드 되어
아래 주소에서 완성된 모습을 확인하실수 있습니다.
http://natelier.tistory.com/

레이아웃 구성.zip

트랙백 0 댓글 7 위로↑

루키하루 2012/01/26 21:18
addr edit/del reply

나중에 찬찬히 읽어봐야겠는데요....
- 투지의 로로레나 2012/01/26 21:21
  addr edit/del
  
  전지금 고민이 심각합니다.
  재가 안지 얼마 안된것들은
  세세하게 가르켜드릴수 있지만
  습득한지 오래된 지식들은
  
  도통 무엇을 얼마만큼 어디서부터
  어떻게 설명하면 좋을지
  갈피를 잘 못잡겠내요 ㅠㅠ
ksodien 2012/01/26 21:46
addr edit/del reply

언제나 기본에 충실할 수 있어야 한다는 문구를 종종 접하게 되는데, 이 것이야말로 간단하면서도 지키기 쉽지 않은 부분인 것 같습니다.

시각적으로 관심을 끌 수 있는 기교 부분 보다도, 기본 골격이 되는 레이아웃이 정말 중요하지요~

어떻게본다면 다소 추상적인 개념이라 설명하기 쉽지 않은 내용인데, 체계적으로 잘 정리해주셔서 처음 접하시는 분들께 틀림 없이 도움이 될 거예요! ~_~)b
- 투지의 로로레나 2012/01/26 23:32
  addr edit/del
  
  정말 수많은 분야중에도
  PC공학의 소프트웨어 부분만큼은
  정할 절실할정도로 맞는 말입니다.
  
  한참 뒤지고 쑤시고 다니다가
  나중에 알고보니 별거아닌대
  그녀석들이 대부분
  
  기초적인 부분을 서술 해놓은곳에서
  기초적인 설정관련으로 주로 접하게 되니까요
  
  원래 블로그 제작 포스팅에 관해서
  적고 싶은것이 많았는대
  현재 지금 블로그를 일단
  완성해서 보여주는 쪽으로
  6~8챕터 정도 작성하고
  나머지는 팁을 모아서
  하나씩 작성하려고 생각중입니다.
저기.. 2012/02/03 01:03
addr edit/del reply

댓글쓰는 칸에 이미지 넣는거 어떻게 해요?
- 저기.. 2012/02/03 19:03
  addr edit/del
  
  와~ 친절한 답변 감사합니다 ^^ 즐거운 하루되세요
- 투지의 로로레나 2012/02/03 21:43
  addr edit/del
  
  질문주셔서 감사합니다.
  혹시 앞으로 이런 질문거리가 있으시면
  그래픽 / 웹언어의
  질문과 요청 카테고리에
  덧글 부탁드리며
  
  저의 소스를 기준으로 설명하면 다음과 같은데...
  .commentWrite textarea {
  background:url(./images/text6_2ver.jpg) no-repeat right;
  width: /*@post-width:-62*/ 544px /*@*/;
  height: 100px;
  padding: 5px;
  font: 12px "돋움", Dotum, sans-serif;
  color: #707d8a;
  border: 1px solid #a5b7c8;
  background-color: #f9fafb;
  line-height: 14px;
  }
  
  여기서 주목하실점은 맨위의
  textarea 라고 적힌 부분입니다.
  
  css에 이런 이름이 언급된 부분은
  글상자와 관련된 부분입니다.
  
  질문 주신 배경을 교체하시려면
  
  1. style.css 에서
  2. 해당 textarea를 찾으신후
  3. background:url(./images/text6_2ver.jpg) no-repeat right;
  와 같이 background:url(경로/이미지명.확장자)
  반복 여부 정렬위치;
  로 입력해주시면 됩니다.
  
  참고로 반복 여부는
  1. 안적음: 사방으롭 반복
  2. repeat-x 가로로 반복
  3. repeat-y 세로로 반복
  4. no-repeat 반복안함
  
  정렬은
  
  좌우정렬 상하정렬 순으로 입력이 가능하며
  left center right
  top center bottom
  등으로 입력이 가능합니다.
  
  좋은 블로깅 되세요 ^^

1 2

티스토리 툴바