자~ 준비 되셨남요?
엇, 뭘 준비 해야될지 몰겠다구요? -.-a
음.. 우선 웹에디터로는 메모장을 쓸겁니다.
그러니 미리 메모장을 열어두세요.
또 여러분들은 기본적으로 HTML 문법을 배워 두셔야 합니다 ㅡ.ㅡa
그래야 CSS 공부하는데 좀 더 수월하거든요 ^^
혹시 그동안 위지윅 방식의 에디터(가령 예를들면 나모같은거..)를 줄곧 쓰신분들은,
제 강좌를 보는데 좀 무리가 따를것 입니다.
왜냐하면 에디터를 쓰면 HTML을 따로 배울 필요가 없어지게 되고,
그러면 자연히 기초가 다져지지 않았다는 말이 되거든요.
그리고 주로 영문을 치니까.. 영타가 좀(?) 되어야 되겠죠.
그외 기타 등등은.. 자기가 좋아하는 음악 들으면서 공부하기 정도겠죠. ^^
참고로 필자가 웹작업할땐 꼭 음악을 듣고 합니다. (서태지 짱!)
※ 알아두세여 ~ ♬
제 강좌는 철저히 실습위주 입니다.
그러하기에 제가 설명하는걸, 또는 씌여진 예제를 따라서 써 가며 배우셔야 합니다.
괜히 "복사-붙여넣기"같은 속임수를 쓰시면 님만 손해란걸 기억하세요.
그리고 일반 스타일시트 배우기 과정은 파랑으로 표시하였구요,
중요한 구문은 빨강으로 표시 하였으니 참고 바랍니다. *^^*
위의 기본 사항이 모두 갖춰져 있으시다면 이제 시작하죠 ^^
우선 HTML의 기본구조를 만드세요.
뭔말하는지 모르시겠다구요? -.-a
<html>
<head>
</head>
<body>
</body>
</html>이거 말예요..
그리고 본문에 를 넣고, 이 태그안에 자기가 쓰고 싶은 글을 쭉쓰세요.
태그에서 색깔을 지정하는 속성이 어떤게 있죠?
예~ color 입니다 ^^
그럼 이 글자 색깔을 빨강으로 바꿔주세요.
그럼 이렇게 되겠죠?
<html>
<head>
</head>
<body>
<font color="red">CSS 짱!</font>
</body>
</html>이걸 스타일 시트를 이용해서 똑같이 만들 수 있습니다.
우선 다음줄로 내려가야 하니까 <br>를 쓰시고,
그 다음 를 다시한번 써 주시고, 또 같은글을 이 태그안에 써 넣어 줍니다.
그리고 이번엔 color 속성을 쓰지마시고, 스타일시트 전용 속성인 style 을 써 넣어 주세요.
태그 배우신 분들은 아시겠지만, style 속성은 해당 태그안에다가 직접 스타일 시트를 정의할때 쓰입니다.
그러니 생소하게 느끼지 마시고, 보통 태그의 속성을 써 주던것 처럼 정겹게(?) 써 주시길 바랍니다. ^^
쓰셨나요?
그럼 이 속성안에 이 값을 써 넣어 보세요.
color:red그럼 여러분이 지금까지 쓰신건 이렇게 됩니다.
<html>
<head>
</head>
<body>
<font color="red">CSS 짱!</font>
<br>
<font style="color:red">CSS 짱!</font>
</body>
</html>어때요? 저처럼 되셨나요?
엇~ 어떤 분은 이게뭐야~ 하시면서 CSS를 시시하게 여기시는 분이 계신가하면..
어떤분은 뭔지 이해가 잘안간다! 라고 비난하시는 분이 계실줄로 압니다..
(제생각이 꼭 맞다는건 아닙니다. ^^)
전자는 지금 해본 연습을 완벽하게 이해하신 분이고..
후자는 아직 태그사용이 미숙한 분입니다. (기초를 다지세엽!)
제대로 써 넣으셨다면 이렇게 나와야 합니다.
예제보기 1st ← Click !
자~ 맛보기는 이걸로 끝입니다.
아마도 섭섭 하실겁니다. ^^
그래서 맛보기를 한번더(?) 보여드리기로 했습니다. (핫핫.. ^.^)
아아~ 그렇다고 너무 겁먹지 마세요.
태그만 완벽히 알고 계신다면 쉽다고, 제가 말씀 드렸잖아요..
전에 배운 첫번째 맛보기만큼 쉬운거예요. ^^
안심하세요. (대체 누굴위한 강좌지...ㆀ)
이번에도 똑같이 HTML 기본 구조를 만드시구요..
똑같이 까지 넣고 또 여기에 쓰고싶은 글을 태그안에 적어 넣으세요.
자~ 여기까진 똑같습니다.
다른게 뭐냐구요? 차차 알게 되실겁니다. ^-^
태그안에 태그를 넣어주세요.
여기서 잠깐!
CSS 짱!