|
|
| 생각의 지도 - 리처드 니스벳 |
오래 전에 읽은 거지만 생각난 김에 책이나 한 권 소개할까 합니다.
오늘 소개하려는 책은 리처드 니스벳의 '생각의 지도' 입니다.
이미지 출처 : 예스24
www.yes24.com/
동양과 서양의 기본적인 사고방식의 차이를 심리학이라는 학문을 통해서 설명한 책입니다. 저자 또한 저명한 심리학 교수이며, 서양인인데도 불구하고 동양인이 납득할 수 있는 중립적인 입장에서 책을 저술하였습니다.
단순한 뜬구름 잡기 이론 이야기가 아니라 실험을 통해서 도출된 내용이기 때문에 상당히 재밌습니다. 특히 일반 교양서적답게 전혀 학술적이지 않고 쉽게 읽을 수 있는 책입니다. 저는 좀 더 깊이 있게 소개해줬으면 좋았을 것 같지만^^;
다른 성공한 베스트셀러를 읽다보면 리처드 니스벳의 이 실험에 관련된 이야기가 자주 나올 정도로 유명한 책입니다. 동양인과 서양인이 세상을 어떻게 다르게 보는지 관심이 있다면 꼭 읽어보시기 바랍니다.
|
|
| 강아지랑 송아지도 만들 수 있는 CSS 강좌 |
#1. CSS란 무엇인가?
드디어 HTML편 마지막 강의인 CSS편입니다.
CSS는 HTML을 다루는 기술이지만 따로 분리해서 이야기합니다.
그렇다고 어려운 것은 아니지만 HTML을 기본적으로 어느정도 알아야 쓸 수 있습니다.
그래서 이번에 다루는 것입니다.
CSS란 무엇일까요? 약자로 Cascading Style Sheet 라고 합니다. 몰라도 되구요.
보통 부를 때 'CSS' 혹은 '스타일 시트' 라고 부릅니다.
CSS는 쉽게 말씀드리면 HTML 태그와 속성만 갖고는 일정이상의 세밀한 조작이 힘들기 때문에
그 한계를 극복하기 위해서 만들어졌습니다.
자세한 건 넘어가고, CSS에는 중요한 특징이 있습니다.
바로 '어떤 경우라도 태그보다 우선해서 작용한다'는 것입니다.
똑같은 종류의 명령인데 하나는 HTML태그이고 하나는 CSS입니다.
이 둘이 같은 대상을 향해서 충돌할 경우, HTML의 효과는 무시되고 CSS 효과만 적용됩니다.
CSS는 써보면 아시겠지만, HTML보다 훨씬 강력하고 정교합니다.
그래서 그 동안 동일 기능이 HTML에 있는데도 불구하고 여러가지를 배우지 않고 넘어왔습니다.
이제 그 나머지를 배워보겠습니다.
#2. CSS는 어떻게 사용할까?
CSS, 즉, 스타일 시트는 어떻게 사용할까요?
크게 두 가지 방법이 있습니다...만 저희는 그 중에 한 가지만 할겁니다.
배우지 않는 다른 한 가지는 따로 스타일 파일을 만들어서 스킨처럼 적용하는 것인데 아직은 몰라도 됩니다.
어차피 그걸 몰라도 기능 자체는 다 사용할 수 있거든요.
스타일 시트는 태그의 속성처럼 사용합니다. 예를 한번 보죠.
(예)
<b style="color:#FF0000; font-size:20px;">글자를 써봅시다.</b>
| (결과)
글자를 써봅시다
|
스타일 시트는 태그 안에서 style이라는 속성과 같은 형식으로 사용합니다.
style이라는 문구는 스타일 시트를 지금부터 사용할 것이라는 문구이죠.
그 후 따옴표에 들어가는 모든 것들이 각 속성과 속성의 값들이며,
속성의 값은 '등호(=)' 대신 '콜론(:)'으로 넣어주고,
'세미콜론(;)'으로 속성과 속성 사이를 구분해줍니다.
더불어서 스타일 시트는 대개의 경우 html 요소별로 태그가 겹치지 않기 때문에,
범위를 지정(<b>이 사이가 범위</b>)할 수만 있으면 어떤 태그에다가 스타일 시트를 써도 대부분 작동합니다.
그 범위 안에 스타일 시트의 속성을 적용할 대상이 있다면요.
HTML로 제어하는 모든 속성은 다 CSS로 제어할 수 있습니다.
하지만 저희는 아주 극히 일부만을 배울 것입니다.
대부분은 태그만을 사용해도 충분하기 때문이며, 그 이상을 원하실 때는 개인적으로 CSS를 더 공부하시기 바랍니다. 약속하는데 저희가 오늘 알아보는 것, 그리고 HTML에서 제공하는 기능의 수 십, 수 백배 이상의 매력적인 기능이 CSS에 있을 겁니다.
#3. 문자관련 HTML 태그 보강
여기서 잠깐! 문자에 관련된 태그를 두 개만 더 보고 가죠.
[ font 태그 ]
사실 html에서 문자를 제대로 다루는 태그는 font 태그입니다.
하지만 스타일 시트만큼 정교한 조작은 못해서 저희는 다루지 않고 넘어왔지요.
하지만 이런 태그가 존재하는 것만큼은 기억합니다. 정말 자주 쓰이는 태그이니까요.
저는 font 태그를 스타일 시트용으로도 자주 씁니다.
<font style="내용">
이런 식으로요. 원래 HTML에서 문자를 다루는 가장 중요한 태그 중 하나입니다.
[ span 태그 ]
span 태그는 스타일시트를 적용하거나 특정 구간의 속성을 바꿔주는 등 자체로는 큰 역할이 없지만 어떤 영역을 지정해서 그 영역에 조작을 해줄 때 필요합니다. 위와 같은 경우에도 자주 쓰이죠.
<span style="내용">
span태그는 활용도가 매우 높은데, 무리해서 쓰지는 마세요. 계속 이런저런 것들을 만들다보면, 그 가치가 보일 때가 있을겁니다.
참고로 span태그만큼 자주 쓰이는게 div태그인데, div태그는 여기서는 다루지 않겠습니다.
일반적으로 범용성있게 쓰는 건 span이 더 좋습니다.
이 두 개의 태그는 알아두세요.
#4. 문자관련 CSS
앞으로 쓰는 모든 CSS 속성은 html 태그 안에 style="내용" 의 형태로 쓴다는 전제하에서 이야기합니다.
문자관련 주요 CSS 속성은 아래와 같습니다.
font-size : 폰트의 크기를 지정합니다. 픽셀이외의 값으로도 지정가능하나, 저희는 픽셀(px)을 쓰겠습니다. (예) font-size: 12px;
font-family : 글자체를 지정합니다. '굴림','Gulim','돋움','바탕' 등의 글자체를 넣어주면 됩니다. 만일 브라우저 혹은 사용자의 컴퓨터가 해당 글자체를 모를 경우 기본 글자체로 표시됩니다.
color : 글자의 색을 지정합니다.
text-decoration : 글자의 상/중/하 위치에 선을 긋습니다. underline 과 none만 알아둡시다.
*<u>태그가 아닌 CSS를 쓰는 이유: 이 속성은 하이퍼링크 관련 속성과 항상 겹칩니다. 때문에 하이퍼링크의 설정을 무시한 상태로 값을 지정하기 위해서 CSS를 쓰는 것입니다.
|
사용 예:
(예)
<span style="font-size:18px;font-family:바탕;color:#0000FF;text-decoration:underline">글자의 속성을 바꿔봅시다.</span>
| (결과)
글자의 속성을 바꿔봅시다.
|
#5. 테이블 관련 CSS
테이블에 사용되는 CSS는 문자와는 다르게 table태그와 td태그에 사용하는 스타일시트가 정확히 나뉘어야합니다.
하나씩 보겠습니다.
[ table 태그에 지정하는 CSS ]
모든 값을 다 알 필요는 없기 때문에 자주 쓰이는 속성에 해당 값까지 같이 넣었습니다.
word-break:break-all; : 글자를 하나씩 잘라서 줄바꿈하게 해줍니다. 이게 설정이 안되면 단어단위로 줄바꿈이 될 수도 있습니다.
table-layout:fixed : 테이블의 크기를 고정시켜준다.
border-collapse:collapse; : 테이블의 외곽 테두리와 셀 테두리가 겹칠 때 두꺼워지지 않고 합쳐지게 한다.
border-style:dotted; : 테두리가 점선이 된다.
|
[ td 태그에 지정하는 CSS ]
background-repeat: no-repeat; : 배경그림이 바둑판식으로 반복출력되는 것을 막는다.
|
음. 알려드릴게 많이 있나 싶었는데, 자주 사용하는 것은 이 정도면 충분할 것 같습니다.
이 외에도 여러분이 html에서 못 했는데 할 수 있을 것 같은건 대부분 CSS로 가능합니다.
필요하신 게 있으면 이젠 직접 찾아보시기 바랍니다^^
#6. head 태그 안의 CSS
head 태그 안에 CSS를 쓰는 방법 또한 다양하지만, 이번에는 딱 두 가지의 경우만 보겠습니다.
우선 head 태그 안에 스타일 시트를 선언할 때는 아래처럼 합니다.
<head>
<STYLE TYPE="text/css">
<!--
CSS내용
-->
</style>
</head>
|
여기서 주석 처리를 해주는 것은 에러가 날 경우 코드를 보이지 않기 위함이며,
이 사이에 있는 CSS는 정상 작동합니다.
그럼 우선, 첫 번째 경우를 보겠습니다.
<STYLE TYPE="text/css">
<!--
body,td{font-family:굴림;font-size:12px;}
>--
</style>
|
이렇게 처리를 해주면, 해당 html 문서에서 사용되는 모든 body태그와 td태그 안의 글자는
font-family:굴림;font-size:12px; 이 속성을 받게 됩니다. 특정 태그 전체를 처리할 때 쓰는 방법입니다.
두 번째를 보겠습니다.
<STYLE TYPE="text/css">
<!--
a:link {text-decoration: none;}
a:active {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
>--
</style>
|
이건 하이퍼링크가 걸린 글씨를 어떻게 처리해주는지에 관한 CSS입니다.
앞에서 보았던 body 태그의 속성보다 더 자세하게 다룹니다.
하나씩 살펴보면,
a:link 는 링크가 걸려있는 상태를 뜻합니다.
a:active 는 클릭하는 순간입니다.
a:visited 는 한 번이상 방문한 하이퍼링크를 뜻합니다.
a:hover 는 마우스가 해당 글자 위에 올라가있을 때를 뜻합니다.
즉, 위의 구문은 "평소에는 링크걸린 글씨 아래에 줄을 긋지 말다가, 마우스를 위에 올렸을 때만 그어라" 라는 뜻입니다.
당연히 text-decoration 이외의 여러가지 속성을 설정해줄 수 있습니다.
여기까지 해서 HTML관련 강의를 모두 마치겠습니다.
아마 이 정도만 알면 기본적으로 html을 다루는 것에는 문제가 없을 것입니다.
웹 프로그래밍에 입문하실 생각이 없으신 분은, 여기까지의 내용을 갈고 닦아서 좋은 홈페이지를 만드시기 바랍니다. 게시판 등의 프로그램등과 관련된 부족한 부분은, 인터넷에서 무료로 제공하고 있는 것들도 많이 있답니다. (제로보드 등)
얼마나 쉴지는 모르겠지만 좀 쉬다가, 다음에는 PHP에 관련된 기본적인 강의를 하겠습니다.
다음 역시 "강아지와 송아지도 만들 수 있는 홈페이지"의 연속입니다^^
|
|
| 강아지랑 송아지도 만들 수 있는 HTML 강좌 - 08편 : 그 외 |
이번에 설명드릴 것은 그동안 설명드리지 못한 HTML 태그들입니다.
나중에 설명드렸다고 중요하지 않은 것은 아닙니다.
앞부분에 마땅히 끼워넣을 곳이 없어서 지금 소개해드리는 것 뿐입니다.
#1. 그 외의 태그들
[ center 태그]
center 태그는 그 사이에 있는 모든 내용을 가운데로 가로 정렬시킵니다.
내용이 문장이건 테이블이건 이미지이건 상관없이 모두 가운데 정렬을 시켜주는 편리한 태그입니다.
아마 자주 사용하시게 될 겁니다.
[ hr 태그 ]
hr태그는 horizon(수평선)의 약자로 가로로 길게 선이 그러지는 태그 입니다.
자주 쓸 일은 없지만 가끔 써주면 편합니다. 물론 이거 대신 테이블을 쓸 때가 더 많습니다만.
속성은 아래와 같습니다.
width : 수평선의 가로 길이입니다. 픽셀길이 뿐 아니라, 모니터가로사이즈에 비례한 %로도 사용가능합니다.
size : 높이 입니다. 수치로 입력합니다.
align : 가로 정렬. 이제 다 아시죠?^^
color : 색상값을 입력해서 수평선의 색을 변화시킵니다.
noshade : 그림자를 없애서 입체감을 없앱니다.
|
직접 써볼까요?
(예)
<hr width="100" size="1" allign="center" color="#0000FF">
| (결과)
|
[ 주석처리 ]
html뿐만 아니라 모든 컴퓨터 언어는 주석처리를 할 수 있습니다.
html에서 주석처리를 하는 이유는,
1) 나중에 자기가 짠 코드를 봤을 때 알아보기 쉽게 하기 위해서
2) 에러가 났을 때 해당 코드를 보이지 않기 위해서
3) 필요없거나 임시로 지우려는 코드(태그)를 실행되지 않게 하기 위해서.
입니다.
번호 순대로 중요한 순서인데요.
쉽게 말해서 주석 안에 있는 html 태그는 실행이 안됩니다. 브라우져에 표시도 안 되구요.
브라우져가 웹문서를 읽을 때 주석 부분은 "쓰레기"로 간주해서 다 버려버리죠.
때문에 주석을 잘 이용하면 많이 편해집니다.
사용법은 간단합니다.
<!-- 내용 -->
입니다.
<!-- 와 --> 사이의 모든 내용은 없는 것으로 처리됩니다.
줄을 바꿔도 됩니다.
<!--
내용
-->
이렇게요.
쉽죠?
#2. body 태그의 속성을 보자
마지막으로 body 태그의 속성을 보죠.
body태그 잊지 않으셨죠?^^;
body태그는 html문서의 내용을 써주는 부분이지만, 몇 가지 주요 속성을 지정해줄 수 있습니다.
아래의 속성을 봅시다.
bgcolor : html 문서 전체의 바탕색을 지정합니다.
link : 하이퍼링크의 글자색을 지정합니다.
vlink : 한 번 이상 방문한 하이퍼링크의 색을 지정합니다.
alink : 하이퍼링크를 누를 때의 색을 지정합니다.
text : 일반 글자 색을 지정합니다.
background : 배경 이미지를 지정합니다.
|
여기서 가장 중요한 것은 의외로 bgcolor입니다. 다른 것은 사실 다 아무래도 좋아요.
보통 우리가 흰색바탕의 웹페이지를 보죠? 그럴 경우라도 반드시 bgcolor를 흰색으로 지정해줘야합니다. 이렇게요.
(흰색 = #FFFFFF)
원래 흰색인데 왜 흰색으로 다시 지정을 할까요?
이유는 가끔 가다가 웹브라우저의 기본 웹페이지 색상을 흰색 이외의 다른 색으로 지정하는 사람들이 있어서입니다.
그 사람들이 잘못하는 게 아니에요. 당연히 홈페이지를 자기가 보여주기 위한 색으로 지정하는 것이죠.
방문하는 모든 사람들이 설정하고 있는 기본 색이 흰색이라고는 생각하지 마세요. 큰 착각입니다.
여기까지 해서 순수한 HTML의 강의는 끝났습니다.
하지만 아직 뭔가 빠진 게 있는 것 같죠?
그렇습니다. 이번이 아니라 다음 강의까지가 마지막입니다.
다음에는 HTML은 아니지만, 그동안 하지 않았던 부분을 보충하는 시간을 갖겠습니다.
|
|
[PREV] [1] ... [253][254][255][256][257][258][259] ... [359] [NEXT]
猫愛 - MyoAe - Homepage Mode
Ver. 1.45
by Aierse |
|
|