#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에 관련된 기본적인 강의를 하겠습니다.
다음 역시 "강아지와 송아지도 만들 수 있는 홈페이지"의 연속입니다^^
|
