stuffstory

글쓰기 3단계

stuffstory — Mon, 30 Nov 2009 05:00:00 +0900

전에 듣고 메모해 두었던 글쓰기의 3단계 입니다. 정말 간단합니다.

1. 일단 쓰고 싶은 것을 쓴다

2. 50%를 잘라낸다. (내용중심)

3. 남은것에서 10~20%를 추가로 잘라낸다. (주로 스타일)

끝.

Background [style.css]

stuffstory — Fri, 30 Oct 2009 07:00:00 +0900

backgorund 는 배경을 지정해주는 태그
사용형태는 {background : url(이미지경로) 반복형태 고정유무 시작위치}

background-color : 배경색상
background-image : 배경이미지
background-repeat : 배경의 반복
background-position : 배경의 위치
background-attachment : 배경의 고정유무

배경색상, 이미지, 반복등 사용형태는 다음과 같이 사용이 됩니다.

body   { /*@background-image=background-image:*/ background-image: none /*@*/;
          /*@background-image-position=background-position:*/ background-position: left top /*@*/;
          /*@background-image-repeat=background-repeat:*/ background-repeat: repeat-x /*@*/;
          /*@background-color=background-color:*/ background-color: #FFFFFF /*@*/; }

body { background:url(./images/icon_left_page.gif)

background-repeat : 배경의 반복 형태는

background-repeat: no-repeat : 반복없음
background-repeat: repeat-x : 가로로 반복
ackground-repeat: repeat-y : 세로로 반복
ackground-repeat: repeat : 배경반복 바둑판 모양 (기본)

background-position : 배경의 위치

background-position: left top

시작위치는 좌표를 써줄 수도 있고 직접 위치를 지정해 줄 수도 있다.
예를 들어 왼쪽 제일 위쪽부터 시작하고 싶다면 left top이라고 입력해 준다.

left top	center top	right top
left center	center center	fight center
left bottom	center bottom	right bottom

background-attachment : 배경의 고정유무

고정유무는 배경이 스크롤에 따라서 이동할 것인지 설정해 준다.

background-attachment: scroll : 배경이 스크롤됨 (기본)
background-attachment : fixed : 배경이 스크롤의 움직임에 따라 이동하지 않고 고정됨
background-attachment: inherit : 상위 요소의 성질을 그대로 물려 받음.

background 속성들 한번에 써주기

background:색상 url(“이미지경로”) 반복유무 X축위치 Y축위치 고정유무 ;

twitter 140자로 소통하는 新인터넷 혁명

stuffstory — Sat, 26 Sep 2009 07:00:00 +0900

요즘 트위터가 한창 유행이라고 할까요. 여기저기서 얘기들이 많이 나오고 트위터 관련 책들도 많이 나오고 있습니다.

9월초에 트위터에서 @hongss 님께서 진행하신 이벤트에 덜컥 당첨이 되어 받은 책입니다.

twitter 140자로 소통하는 新인터넷 혁명 트위터

이 책에는 소셜미디어란 무엇인가 부터 트위터는 무엇인지, 어떻게 시작해야 하는지, 활용은 어떻게 해야 하는지등
트위터를 상세하게 설명해 주고 있습니다.

트위터를 처음 접하시는 분들은 유용한 책이라 생각 됩니다. 이리저리 찾아 다니지 않아도 될 것입니다.

트위터를 어떻게 해야 하는지 가장 잘 표현한 말인것 같습니다. 그리고 공감가는 말입니다.

즐겨라!!!

덧1) 먼저 follow 해보세요. 그리고 먼저 말걸어 보세요

스타일시트(CSS)란?

stuffstory — Thu, 17 Sep 2009 06:50:00 +0900

CSS는 Cascading Style Sheet 의 약자이며 Style Sheet 라고도 합니다.

스타일시트는 한글이나 워드에서의 스타일처럼 html 작성시 반복적으로 사용되는 글꼴, 글자크기, 색상등 서식을 미리
지정하는 데 사용됩니다. html 문서를 작성하면서 각 부분별로 일일이 글꼴, 글자크기 등을 지정하는 것은 매우 번거롭
고 불편합니다. 하지만 스타일을 한번만 정해놓고 문서 내용에 적용을 한다면 매우 편리해 지는 것입니다.
이런 역할을 하는 것이 Style Sheet 입니다.

CSS의 기본구성 (선언방법)

① Inline Style Sheet (태그방식)
② Embedded Style Sheet (head에 삽입 문서전체 관리)
③ External Style Sheet (외부문서를 불러와 적용하는 방식) ◀ Linking Style Sheet
④ Imported Style Sheet (외부 스타일시트 불러오기)
이중에서 가장 많이 사용하는 방식은 Embedded Style Sheet 라고 합니다.

선택자{속성:속성 값; 속성:속성 값:}

a { font-size:9px; color:#999;}

먼저 선택자 a를 적어주고, 선택자에 대한 설명은 중괄호( { } )안에 적어 줍니다.
중괄호 안에 있는 내용은 선언문 이라고 합니다.

선택자는 하나 또는 여러 개의 선언문으로 구성됩니다. 선언문은 속성과 값으로 구성되는데, font-size와 color는
속성이라 하며, 9px와 #999는 속성에 대한 값이라고 합니다.

속성(font-size:9pt)과 속성(color:red)은 세미콜론(;)으로 구분하며, 속성과 값은 콜론(:)으로 구분을 합니다

선택자로 사용할 수 있는 요소들

HTML 태그(HTML Selector)
CLASS(CLASS Selector)
ID(ID Selector)
문장 (Contextual Selector)

선택자에 따른 간단한 사용 예로 차이점은 다음과 같습니다.

#a { font-family:굴림; color:red; font-size:20pt;}
.a { font-family:굴림; color:black; font-size:15pt;}
a { font-faminly:굴림; color:blue; font-size:12pt;}

위에서 어떤 것은 앞에 점( . )이 찍혀있고, 어떤 것은 앞에 샾( # )이 붙어있고, 아무것도 안 붙은 것도 있습니다.
#a 에서 a는 ID로 속성이 부여된 스타일 이름입니다.
.a 에서 a는 CLASS로 속성이 부여된 스타일 이름입니다.
아무것도 붙지 않은 a는 html 태그 중 <a>로 부여된 스타일 이름입니다.

스타일시트가 왜 필요한가 한다면, 반복적으로 사용되는 태그들을 더 이상 적지 않아도 됩니다
글자색을 변경할 때도 스타일 지정부분에서 color 값을 바꿔주기만 하면 전체에 적용이 되므로 수정 작업을 할 때도
매우 편리합니다.

티스토리는 링크 방식으로 스타일이 지정되어 있으므로 지정방식에는 신경을 안 써도 됩니다.
간혹 사이드바 설정이나 html 배너출력에 정렬을 한다든지 할 때 인라인 방식이 유용하게 사용이 됩니다.
어떻게 사용이 되는지 방법만 알고 있다면 스킨 수정시 유용하게 사용이 될 것입니다.

보통 전문적이지 않은 스킨을 수정하는 정도만 한다면 간단한 내용만 알고 있으면 될 듯 합니다.
그리고 알고자 하는 내용이 어디에 있는 지만 안다면 활용은 그리 어렵지 않을 것입니다.

스킨 수정시 자주 접하는 font, border (style.css)

stuffstory — Mon, 31 Aug 2009 23:30:00 +0900

1.font

font 태그는 글자에 대한 속성을 지정해 주는 태그입니다

font-family : 글꼴
font-size : 폰트 크기
font-style : 폰트 스타일
font-weight : 폰트 굵기
line-height : 줄간격
letter-spacing : 글자 간격(가로)
color : 폰트 색상

사용 예

#notice h3 { font-family: Verdana; font-size: 11px; font-weight: normal; color: #666;
border-bottom: 1px solid #f5f5f5;}

글꼴과 폰트크기를 한번에 쓰기

font: 굵기 스타일 사이즈/줄간격 글꼴

사이즈와 글꼴은 반드시 적어주어야 하며, 다른 속성은 적어주지 않을 경우 모두 normal 로 적용됩니다.
(순서불변)

사용 예

h3 {font: 11px Verdana}

html 에서 사용시 사용법

사용 예

2. border

border는 선을 지정해 주는 태그다.
기본 사용 방법은 {border: 굵기 속성 색상} 이다.

속성의 종류

none 선 없음
solid 실선
dotted 조밀한 점선
dashed 긴 점선
double 이중실선
groove 테두리가 들어간 것 같은 효과
ridge 테두리가 튀어나온 것 같은 효과
inset 박스가 들어간 효과
outset 박스가 튀어나온 효과

사용 예

#notice { border: 1px solid #ececec; }

border 한 부분만 따로 지정해 주기

border-top: 위쪽
border-right: 오른쪽
border-bottom: 아래쪽
border-left: 왼쪽

사용 예

#category li a { border-bottom: 1px solid #f5f5f5; }

덧1)외울 필요는 없습니다. 그냥 메모해 놓고 쓸대 꺼내보면 될 듯 합니다.
정보가 어디에 있다는 것만 알면 언제든지 사용할 수 있습니다. (=_=)

색상코드표

stuffstory — Fri, 21 Aug 2009 23:50:00 +0900

Day's Mini Daily Story DayWeb님께서 소스를 공개해 놓으셨네요
약간 수정을 했습니다. 스킨 변경시 유용하게 사용 됩니다.

색상코드표 - 원하시는 색상 위에서 클릭하시면 복사됩니다.
#93DAFF	#98DFFF	#9DE4FF	#A2E9FF	#A7EEFF	#ACF3FF	#B0F7FF	#B4FBFF	#B9FFFF	#C0FFFF
#87CEFA	#91D8FA	#A5D8FA	#AFDDFA	#B9E2FA	#C3E7FA	#CDECFA	#D7F1FA	#E1F6FA	#EBFBFF
#00BFFF	#0AC9FF	#14D3FF	#1EDDFF	#28E7FF	#32F1FF	#3CFBFF	#46FFFF	#96FFFF	#C8FFFF
#00A5FF	#00AFFF	#00B9FF	#00C3FF	#00CDFF	#00D7FF	#00E1FF	#00EBFF	#00F5FF	#00FFFF
#1EA4FF	#28AEFF	#32B8FF	#3CC2FF	#46CCFF	#50D6FF	#5AE0FF	#6EE0FF	#6EEAFF	#78F3FF
#1E90FF	#289AFF	#32A4FF	#3CAEFF	#46B8FF	#50C2FF	#5ACCFF	#64D6FF	#6EE0FF	#78EAFF
#96A5FF	#A0AFFF	#AAB9FF	#B4C3FF	#BECDFF	#C8D7FF	#D2E1FF	#DCEBFF	#E8F5FF	#F4FFFF
#86A5FF	#90AFFF	#9AB9FF	#A4C3FF	#AECDFF	#B8D7FF	#CCE1FF	#E0EBFF	#EBF5FF	#F9FFFF
#6495ED	#6E9FED	#78A9ED	#82B3ED	#8CBDED	#96C7ED	#A0D1F7	#AADBFF	#B4E5FF	#BEEFFF
#0078FF	#0A82FF	#148CFF	#1E96FF	#28A0FF	#32AAFF	#3CB4FF	#46BEFF	#50C8FF	#5AD2FF
#0064FF	#0A6EFF	#1478FF	#1E82FF	#288CFF	#3296FF	#3CA0FF	#46AAFF	#50B4FF	#5ABEFF
#0000FF	#3232FF	#5050FF	#646EFF	#6478FF	#6482FF	#648CFF	#6496FF	#64A0FF	#64AAFF
#4169E1	#4B73E1	#557DE1	#5F87E1	#6991E1	#739BE1	#7DA5E1	#87AFEB	#91B9F5	#9BC3FF
#0064CD	#0A6ECD	#1478CD	#1E82CD	#288CD2	#3296D7	#3CA0E1	#46AAEB	#50B4F5	#5ABEF5
#5A5AFF	#6464FF	#6E6EFF	#7878FF	#8282FF	#8C8CFF	#A0A0FF	#B4B4FF	#C8C8FF	#D2D2FF
#7B68EE	#8572EE	#8F7CEE	#9986EE	#A390EE	#AD9AEE	#B7A4EE	#C1AEEE	#CBB8EE	#D5C2EE
#6A5ACD	#7E6ECD	#8878CD	#9282CD	#9C8CCD	#A696CD	#B0A0CD	#BAAAD7	#C4B4E1	#CEBEE1
#0000CD	#2828CD	#4646CD	#6464CD	#6E6ED7	#7878E1	#8282EB	#8C8CF5	#9696FF	#A0A0FF
#00008C	#14148C	#28288C	#3C3C8C	#50508C	#646496	#7878AA	#8C8CBE	#A0A0C8	#B4B4DC
#483D8B	#52478B	#5C518B	#665B8B	#70658B	#7A6F95	#84799F	#8E83A9	#988DB3	#A297BD
#000069	#1E3269	#323C73	#3C467D	#3C5087	#3C5A91	#46649B	#506EA5	#5A78AF	#6482B9

#3DFF92	#47FF9C	#51FFA6	#5BFFB0	#65FFBA	#6FFFC4	#79FFCE	#75FFCA	#7AFFCF	#7FFFD4
#55EE94	#5FEE9E	#69EEA8	#73EEB2	#7DEEBC	#87EEC6	#91F8D0	#9BFFDA	#A5FFE4	#AFFFEE
#66CDAA	#70D2B4	#7AD7BE	#84DCC8	#8EE1D2	#98EBDC	#9DF0E1	#A2F5E6	#A7FAEB	#ACFFEF
#AAEBAA	#B4F0B4	#BEF5BE	#C8FAC8	#D2FFD2	#DCFFDC	#E1FFE1	#E6FFE6	#EBFFEB	#F0FFF0
#80E12A	#8AE634	#94EB3E	#9EF048	#A8F552	#B2FA5C	#BCFF66	#C1FF6B	#C6FF70	#CBFF75
#52E252	#5CE75C	#66EC66	#70F170	#7AF67A	#84FB84	#89FB89	#8EFB8E	#93FB93	#98FB98
#64CD3C	#6ED746	#78E150	#82EB5A	#8CF064	#96F56E	#9BFA73	#A0FA78	#A5FA7D	#AAFA82
#13C7A3	#18CCA8	#1DD1AD	#22D6B2	#27DBB7	#2CE0BC	#31E0C1	#36E0C6	#3BE0CB	#40E0D0
#46B4B4	#50BEBE	#5AC8C8	#64D2D2	#6EDCDC	#73E1E1	#78E6E6	#7DEBEB	#82F0F0	#87F5F5
#20B2AA	#2ABCB4	#34C6BE	#3ED0C8	#48DAD2	#52E4DC	#57E9E1	#5CEEE6	#61F3EB	#66F8F0
#5F9EA0	#69A8AA	#73B2B4	#7DBCBE	#87C6C8	#91D0D2	#96D5D7	#9BDADC	#A0DFE1	#A5E3E6
#3CB371	#46BD7B	#50C785	#5AD18F	#64DB99	#6EE5A3	#73EAA8	#78EFAD	#7DF4B2	#82F9B7
#2E8B57	#389561	#429F6B	#4CA975	#56B37F	#60BD89	#65C28E	#6AC793	#6FCC98	#74D19D
#228B22	#2C952C	#369F36	#40A940	#4AB34A	#54BD54	#5EC75E	#63CC63	#68D168	#6DD66D
#497649	#538053	#5D8A5D	#679467	#719E71	#7BA87B	#80AD80	#85B285	#8AB78A	#8FBC8F
#006400	#0A6E0A	#147814	#1E821E	#288C28	#329632	#3CA03C	#41A541	#46AA46	#4BAF4B
#008C8C	#0A9696	#14A0A0	#1EAAAA	#28B4B4	#32BEBE	#37C3C3	#3CC8C8	#41CDCD	#46D2D2
#008080	#0A8A8A	#149494	#1E9E9E	#28A8A8	#32B2B2	#37B7B7	#3CBCBC	#41C1C1	#46C6C6

#FFB6C1	#FFBBC6	#FFC0CB	#FFC5D0	#FFCAD5	#FFCFDA	#FFD4DF	#FFD9E4	#FFDEE9	#FFE3EE
#FFAAAF	#FFB4B9	#FFBEC3	#FFC8CD	#FFD2D7	#FFDCE1	#FFE1E6	#FFE6EB	#FFEBF0	#FFF0F5
#FF9E9B	#FFA8A5	#FFB2AF	#FFBCB9	#FFC6C3	#FFD0CD	#FFD5D2	#FFDAD7	#FFDFDC	#FFE4E1
#FF7A85	#FF848F	#FF8E99	#FF98A3	#FFA2AD	#FFACB7	#FFB1BC	#FFB6C1	#FFBBC6	#FFC0CB
#FF5675	#FF607F	#FF6A89	#FF7493	#FF7E9D	#FF88A7	#FF92B1	#FF9CBB	#FFA6C5	#FFB0CF
#FF82FF	#FF8CFF	#FF96FF	#FFA0FF	#FFAAFF	#FFB4FF	#FFBEFF	#FFC8FF	#FFD2FF	#FFDCFF
#FF7DB4	#FF87BE	#FF91C8	#FF9BD2	#FFA5DC	#FFAFE6	#FFB4EB	#FFB9F0	#FFBEF5	#FFC3FA
#FF69B4	#FF73BE	#FF7DC8	#FF87D2	#FF91DC	#FF9BE6	#FFA5F0	#FFAAF5	#FFAFFA	#FFB4FF
#FF1493	#FF1E9D	#FF28A7	#FF32B1	#FF3CBB	#FF46C5	#FF50CF	#FF5AD9	#FF64E3	#FF6EED
#DB7093	#DB7A9D	#DB84A7	#E08EB1	#E598BB	#EAA2C5	#EAB1D4	#EFACCF	#F4BBDE	#F4B6D9
#D7567F	#DC6089	#E16A93	#E6749D	#EB7EA7	#F088B1	#F592BB	#FA9CC5	#FFA6CF	#FFB0D9
#C71585	#C71F8F	#C73399	#C73DA3	#CC47AD	#D151B7	#D65BC1	#E065CB	#EA6FD5	#F479DF
#CD1039	#CD1F48	#CD2E57	#CD3861	#CD426B	#D24C75	#D7567F	#DC6089	#E16A93	#E6749D
#B9062F	#B91A4D	#BE2457	#C32E61	#C8386B	#CD4275	#D24C7F	#D75689	#DC6093	#E16A9D

#FAEB78	#FAF082	#FAF58C	#FAFA96	#FAFAA0	#FAFAAA	#FAFAB4	#FAFABE	#FAFAD2	#FAFAD2
#FFDC3C	#FFE146	#FFE650	#FFEB5A	#FFF064	#FFF56E	#FFFA78	#FFFA82	#FFFF8C	#FFFF96
#FFC81E	#FFD228	#FFD732	#FFDC3C	#FFE146	#FFE650	#FFEB5A	#FFF064	#FFF56E	#FFF978
#FFB400	#FFBE0A	#FFC314	#FFC81E	#FFCD28	#FFD232	#FFD73C	#FFDC46	#FFE150	#FFE65A
#FDCD8C	#FDD296	#FDD7A0	#FDDCAA	#FDE1B4	#FDE6BE	#FDEBC8	#FDF5D2	#FDF5DC	#FDF5E6
#FAC87D	#FACD87	#FAD291	#FAD79B	#FADCA5	#FAE1AF	#FAE6B9	#FAEBC3	#FAEBCD	#FAEBD7
#FFA500	#FFAF0A	#FFB914	#FFC31E	#FFCD28	#FFD732	#FFDC37	#FFE13C	#FFE641	#FFEB46
#FF9100	#FF9B00	#FFA500	#FFAF00	#FFB900	#FFC300	#FFC800	#FFCD00	#FFD200	#FFD700
#FF8200	#FF8C0A	#FF9614	#FFA01E	#FFAA28	#FFB432	#FFB937	#FFBE3C	#FFC341	#FFC846
#FFA98F	#FFB399	#FFBDA3	#FFC7AD	#FFD1B7	#FFDBC1	#FFE0C6	#FFE5CB	#FFEAD0	#FFEFD5
#FFA374	#FFAD7E	#FFB788	#FFC192	#FFCB9C	#FFD0A1	#FFD5A6	#FFDAAB	#FFDFB0	#FFE4B5
#FF9473	#FF9E7D	#FFA887	#FFB291	#FFBC9B	#FFC6A5	#FFD0AF	#FFD0AF	#FFD5B4	#FFDAB9
#FF7F50	#FF895A	#FF9364	#FF9D6E	#FFA778	#FFB182	#FFBB8C	#FFC091	#FFC596	#FFCA9B
#CD853F	#CD8F49	#D29953	#D7A35D	#DCAD67	#E1B771	#E6C17B	#EBC680	#F0CB85	#F5D08A
#D2691E	#D27328	#D27D32	#D7873C	#DC9146	#E19B50	#E6A55A	#EBAA5F	#EBAF64	#F0B469
#AE5E1A	#B86824	#C2722E	#CC7C38	#D68642	#E0904C	#E59551	#EA9A56	#EF9F5B	#F4A460
#8B4513	#8B4F1D	#8B5927	#8B6331	#906D3B	#957745	#9F814F	#A48654	#A98B59	#AE905E

#FF9696	#FFA0A0	#FFAAAA	#FFB4B4	#FFBEBE	#FFC8C8	#FFD2D2	#FFDCDC	#FFE6E6	#FFF0F0
#F08080	#F08A8A	#F09494	#F59E9E	#FAA8A8	#FAB2B2	#FAB7B7	#FABCBC	#FAC1C1	#FAC6C6
#F56E6E	#F57878	#F58282	#F58C8C	#F59696	#F5A0A0	#F5AAAA	#FAB4B4	#FABEBE	#FAC8C8
#F06464	#F06E6E	#F07878	#F08282	#F08C8C	#F09696	#F4A0A0	#F4AAAA	#F4B4B4	#FEBEBE
#FF0000	#FF3232	#FF4646	#FF5050	#FF5A5A	#FF6464	#FF6E6E	#FF7878	#FF8282	#FF8C8C
#EB0000	#EB3232	#EB4646	#EB5050	#EB5A5A	#EB6464	#F06E6E	#F57878	#FA8282	#FA8C8C
#CD0000	#CD3C3C	#CD4646	#CD5050	#D25A5A	#D76464	#DC6E6E	#E17878	#E68282	#EB8C8C
#CD5C5C	#CD6666	#CD7070	#CD7A7A	#D28484	#D78E8E	#DC9898	#E6A2A2	#EBACAC	#F0B6B6
#B90000	#B93232	#B93C3C	#B94646	#B95050	#BE5A5A	#C35F5F	#C86464	#CD6969	#D26E6E
#B22222	#B24040	#B24A4A	#B25454	#B75E5E	#BC6868	#C17272	#CB7776	#CB7C7C	#D08180
#A52A2A	#AA3E3E	#AF4848	#B45252	#BE5C5C	#C36666	#CD7070	#CD7A7A	#D28484	#D78E8E
#800000	#803232	#853C3C	#8F4646	#945050	#9E5A5A	#A36464	#AD6E6E	#B77878	#C18282
#CD853F	#CD8B45	#CD904A	#D2954F	#D29A54	#D79F59	#D7A45E	#E1A963	#E1AE68	#E6B36D
#DB631F	#E56D29	#E57733	#EA813D	#EF8B47	#EF904C	#F49551	#F49A56	#F49F5B	#F4A460
#D2691E	#D27328	#D77D32	#D7873C	#DC9146	#E19B50	#E6A055	#EBA55A	#F0AA5F	#F5AF64
#A0522D	#A05C37	#A06641	#A5704B	#AA7A55	#B4845F	#B98E69	#C39873	#CDA27D	#D7AC87
#8B4513	#8B4F1D	#8B5927	#8B6331	#906D3B	#9A7745	#A4814F	#AE8B59	#B89563	#C29F6D

#DA70D6	#DF75DB	#E47AE0	#E97FE5	#EE84EA	#F389EF	#F88EF4	#FD93F9	#FF98FE	#FF9DFF
#BA55D3	#BF5AD8	#C45FDD	#C964E2	#CE69E7	#D36EEC	#D873F1	#DD78F6	#E27DFB	#E782FF
#9932CC	#9E37D1	#A33CD6	#A841DB	#AD46E0	#B24BE5	#B750EA	#BC55EF	#C15AF4	#C65FF9
#9400D3	#9905D8	#9E0ADD	#A30FE2	#A814E7	#AD19EC	#B21EF1	#B723F6	#BC28FB	#C12DFF
#942894	#9E329E	#A83CA8	#B246B2	#BC50BC	#C65AC6	#D064D0	#DA6EDA	#E478E4	#EE82EE
#8c008c	#960a96	#a014a0	#aa1eaa	#b428b4	#be32be	#c83cc8	#d246d2	#dc50dc	#e65ae6
#800080	#8a0a8a	#941494	#9e1e9e	#a828a8	#b232b2	#bc3cbc	#c646c6	#d050d0	#da5ada
#834683	#8d508d	#975a97	#a164a1	#ab6eab	#b578b5	#bf82bf	#c98cc9	#d396d3	#dda0dd
#828282	#8c8c8c	#969696	#a0a0a0	#aaaaaa	#b4b4b4	#bebebe	#c8c8c8	#d2d2d2	#dcdcdc
#000000	#282828	#323232	#3c3c3c	#464646	#505050	#5a5a5a	#646464	#6e6e6e	#787878

스킨 수정시 알아두면 편리한 태그들

stuffstory — Thu, 13 Aug 2009 18:00:00 +0900

1. div, span

div와 span은 공간과 관련된 태그입니다.

name 2009/8/13

머리
내용

위 내용과 같이 div는 줄바꿈이 있고 span은 줄바꿈이 생기지 않습니다.

div는 전체적인 레이아웃을 구성할 때 사용하며, span은 텍스트의 속성등 세세한 구성요소들의 스타일을
지정할 때 사용할 수 있습니다.

2. id, class

html을 이루고 있는 구성요소에 속성을 지정하기 위해 사용합니다.

id
한 문서에 동일한 이름이 중복될 수 없고 한번만 사용 가능하며 이미 부여된 class와 무관하게 작동.
클래스보다 우선순위가 높습니다.

class
한 문서내에 동일한 이름을 반복적으로 사용할 수 있습니다.

이름 지정시 style.css에
id에 해당하는 항목은 # 로
class에 해당하는 항목은 . 으로 표시합니다

[skin.html]
<div id="container">
    <div id="header">머리</div>
    <div id="content">내용</div>
    <div class="author"></div>
</div>

[style.css]
#container { margin: 0 auto; }
#header { float: left; margin: 0 0 12px 40px; display: inline;}
.author { text-align:right; color:#888; padding:20px 20px;}

3. ul, ol, li

<ul> <ol> <li> 모두 리스트와 관련된 태그 입니다.

<ul>은 순번이 없는 리스트
<ol>은 순번이 있는 리스트
<li>는 각 리스트의 행을 구분 짓는 태그 입니다.

순번이 없는 리스트

순번이 있는 리스트

스킨 수정시 자주 접하는 margin, padding

stuffstory — Thu, 13 Aug 2009 16:30:00 +0900

margin과 padding은 style.css 에 자주 등장하는 태그로 margin과 padding은 여백을 설정해 주는 태그입니다.

margin은 외부여백 이고, padding은 내부여백 입니다.

1. margin

margin 한번에 쓰기

#container {margin: 10px 20px 30px 10px; } /* 위쪽 오른쪽 아래쪽 왼쪽 */
#container {margin: 10px 20px 30px; } /* 상 좌우 하 */
#container {margin: 10px 20px; } /* 상하 좌우 */
#container {margin: 10px; } /* 전체 */

margin 한 부분만 따로 지정해 주기

margin-top : 위쪽
margin-right : 오른쪽
margin-bottom : 아래쪽
margin-left : 왼쪽

사용 예

#recentPost { border: 1px solid #ececec; margin-top: 10px; }
#recentPost ul { padding: 0; list-style: none; margin: 10px;}

2. padding

padding 한 부분만 따로 지정해 주기

padding-top
padding-right
padding-bottom
padding-left

사용법은 margin과 동일합니다.

사용 예

#guestbook p { padding:2px 0; margin:0;}
#guestList { padding:10px 0 0 0; color: #666; }

'혹시나...' 하고 해보는 겁니다.

stuffstory — Fri, 31 Jul 2009 07:00:00 +0900

perhaps love ...? photo by AngelsWings

‘혹시나….’ 해서 로또 복권을 삽니다. 거의 매주 삽니다. 그러나 ‘역시나….’ 입니다.
이렇게 매주 사는 것은 ‘혹시나…’ 해서 사는 겁니다. 확실히 된다는 보장은 없습니다.
그래도 사지도 않는다면 ‘혹시나…’는 없습니다. 사지도 않았는데 1등에 당첨 될 리는 만무합니다.

주위에 보면 로또등 거액의 복권에 당첨된 기사나 뉴스를 보고 굉장히 부러워 하는 사람들이 많이 있습니다.
그 중에는 사지도 않고 부러워 하기만 하며 언제 돼보나 합니다. 그리고 되지도 않는다고 안 삽니다.
그렇다고 복권을 꼭 사라는 것은 아닙니다. 단지, 하지도 않고서 되기를 바라지 말란 것입니다.

‘혹시나…’하고 해보는 겁니다. ’혹시 저기에 가면 고객이 잘 받아 줄까?’
또 ‘혹시 그녀가 내 마음을 받아주지는 않을까?’ 등등. ‘혹시나…’는 여러 곳에 쓰일 수 있습니다.

대부분 뜻하지 않은 행운에 대한 기대감을 표현할 때 ‘혹시나…’라는 말을 사용합니다.
실현 여부와 상관없이 행동과 실천의 동력이 된다는 점에서 긍정적인 사고라 할 수 있습니다.

“흔히 사람들은 ‘혹시나…’ 하면 ‘역시나…’가 될 게 뻔하다고 생각합니다.
그래서 아예 할 생각도 안하고 포기해버리기도 합니다. 하지만 그런 생각마저 안 한다면 아무런 일도 일어나지 않습니다.

'혹시나…'는 가능성을 지닌 말입니다.

이 가능성이 성공으로 전부 바뀐다고는 확언 할 수 없지만, 확실한 것은 ‘혹시나…’해서 도전하는 사람은 다른 사람들보다
휠씬 많은 기회가 주어진다는 것입니다. 맨땅에 헤딩하는 영업에 많이 적용되는 사례입니다.

‘뭔가 하지 않으면 아무 일도 일어나지 않는다’는 말이 있습니다. 비즈니스계의 불문율이라고…

그것이 설사 실현 가능성 제로의 일일지라도, ‘혹시나…’라는 일말의 기대를 갖고 부딪친다면 대박을 터트릴 수도 있지
않을까 합니다. 예전에 이 업체는 사용을 하고 있을 거라고 생각을 했지만 ‘혹시나…”해서 방문을 했던 적이 있었는데
그곳에서 뜻밖의 대박을 터드린 적이 있었습니다. 회사 전체에 서비스를 제공하게 됐으니까요.

‘혹시나…’ 가 성공의 시작이 아닐까요. 꼭 성공이 아니더라도 ‘혹시나…’하고 해보는 거죠.
누가 압니까!!!

메모의 필요성과 중요성에 대해

stuffstory — Thu, 23 Jul 2009 21:00:00 +0900

메모의 필요성과 중요성에 대해

이하윤의 〈메모광〉을 보면 다음과 같은 어구가 있습니다.

"메모는 내 물심양면(物心兩面)의 전진하는 발자취며, 소멸해 가는 전 생애의 설계도(設計圖)이다. 여기엔 기록되지
않는 어구(語句)의 종류가 없다 해도 과언이 아닐 만큼 광범위한 것이니, 말하자면 내 메모는 나를 위주로 한 보잘것없
는 인생생활의 축도(縮圖)라고도 할 수 있는 것이다. 쇠퇴해 가는 기억력을 보좌하기 위하여, 나는 뇌수의 분실(分室)
을 내지 않을 수 없었던 것이다."

블로그를 시작하면서 여러 블로그들을 탐방하고 rss을 구독하면서 많은 블로거 분들께서 매일매일 꾸준히 글들이 올라
오는 것을 보면서 어떻게 이렇게 매일매일 글들을 쓸 수 있을까 하는 생각이 들었습니다. 물론 능력이 되시는 분들은
생각해오던 데로 그대로 써내려 가며 금방 글을 작성하시는 능력 있는 분들도 계실 겁니다. 진짜 능력자들이겠죠!!!

하지만 그렇지 않은 분들이 더 많으실 겁니다. 그렇다면 매일매일 글을 포스팅하는 분들은 어떻게 그렇게 글들을 작성
해서 포스팅을 할까요? 아마도 제 생각에는 그분들은 끊임없이 생각을 하고 소재를 찾고 그리고 어디에든지 메모를
하고 그때 그때 생각들을 정리할 것입니다. 여행을 주제로 하거나 맛을 주제로 하는 글들을 보면 확실히 알 수가 있죠.
다녀온 곳을 사진 찍고 기록하고, 음식을 소개하며 사진도 찍고 기록하고, 이것들이 메모 없이는 힘들 것입니다.
전부 메모인 것입니다.

블로그도 메모라고 생각을 합니다. 좀더 종합적인 메모라고 할까요.

“기록은 기억을 지배한다” 라고 했습니다.

메모를 해야만 하는 이유와 필요성은 여러 가지가 있습니다. 무엇일까요?

첫째, 아이디어가 떠오르는 시점과 활용 시점에 차이가 나기 때문입니다.
아이디어는 순식간에 떠오름니다. 그리고 유효기간이 아주 짧습니다. 많은 아이디어들은 당장 사용할 수 없을 때 떠오르
는 경우가 많습니다. 그렇기 때문에 그때그때 그것을 기록해야 합니다. 그리고 필요할 때 활용할 수 있게끔 해야 합니다.
그것이 메모의 가장 중요한 효용성입니다.

둘째, 메모를 하면 마음의 안정을 얻을 수 있습니다.
아인슈타인은 사소한 기억력이 나쁘기로 유명하답니다.
특히 집 전화번호를 책에서 찾거나 비서에게 물어 보곤 했다는데, 답답했던 사람들이 왜 전화 번호를 외우지 못하느냐고
물어 보자 그는 이렇게 대답했다고 합니다.
"전 집 전화번호 같은 건 잘 기억을 안 합니다. 적어두면 쉽게 찾을 수 있는 걸 뭐하러 기억해야 합니까?"

메모를 하면 잊어도 좋겠지요. 그러면 마음의 평화가 오고, 창의적인 아이디어가 샘 솟는다고 합니다.

셋째, 메모하면 신뢰성이 높아집니다.
식당에서 여러 명이 음식을 주문할 때 종업원이 메모해 간다면 신뢰성이 높아집니다. 음식이 다르게 나올 소지가 적어 집
니다. 회의 때 아무런 메모장도 준비 안 한 사람이 있습니다. 언제까지 무엇을 하자고 결론을 냈지만 메모를 하지 않고
알았다고만 하는 사람을 믿을 수 있겠습니까?.

넷째, 메모는 좋은 학습 수단입니다.
베토벤은 열심히 메모를 한 사람으로 유명했다는데 악상이 떠오르면 어디에나 메모를 했지만 그 메모를 다시는 보지 않았
다고 합니다. 궁금해진 친구가 왜 메모를 하고 다시 보지 않느냐고 묻자 그는 "메모를 하다 보면 외워집니다. 다시 꺼내볼
필요성을 못 느낍니다."라고 했답니다. 이런 경험이 있을 것입니다. 공부할 때 쓰면서 외우는 경우지요.

다섯째, 메모가 돈이 됩니다.
이노 디자인의 김영세 사장은 갑자기 떠오른 생각을 메모했는데 나중에 이것이 12억 달러짜리 디자인이 되었답니다.
아이디어는 어느 날 갑자기 쏟아져 나오는 게 아닙니다. 어느 때는 아무리 쥐어짜도 나오지 않습니다.
아이디어는 번개처럼 떠오를지도 모르지만 그런 아이디어가 생산되기 위해서는 평소 많은 것을 메모해 두어야 합니다.
아무리 머리가 총명한 사람도 꼼꼼히 기록하는 사람은 이길 수 없을 겁니다.

여섯째, 메모는 뒤돌아 보는 반성과 계획의 도구 이기도 합니다.
예전에 사용했던 수첩을 다시 보다 보면 미루었던 일들이 기억나기도 하고. 또 그런 과정을 통해 생각을 정리할 수
있습니다. 그리고 계획을 세울때도 그냥 머리 속으로 계획할 때하고 펜으로 쓰면서 계획하는 것은 큰 차이가 있습니다.

메모를 잘 하는 것, 그 메모를 잘 활용하는 것만으로 한 단계 더 발전할 수 있을 겁니다.

항상 메모할 수 있는 메모장등을 곁에 두고 있어야 합니다. 어떤것이라도 좋겠죠. PC는 물론이고요.
생각나는 것들을 그때그때 바로 적을 수 있어야 합니다. 그래야 효율적으로 활용을 할 수 있습니다.
글을 쓸때 메모해 두었던 것들을 적고 살을 붙여 나간다면 좀 더 쉽게 글을 써내려 갈 수 있지 않을까요?

아인슈타인이 말했습니다.
“어수선한 책상이 어수선한 정신을 반영한다면, 비어있는 책상은 무엇을 반영하는가?”

덧1) 이미지 - Photo by J_O_I_D