|
|
| 강아지랑 송아지도 만들 수 있는 HTML 강좌 - 03편 : 글자쓰기와 이미지 출력, 하이퍼링크 |
#1. 글자를 쓰는 법
HTML문서에 글자나 문장을 쓰는 법은 간단합니다.
그냥 쓰기를 원하는 부분에 글자를 쓰면 됩니다.
하지만 웹페이지를 보시면 글자에 어떤 이펙트가 들어갔음을 보실 수 있습니다.
자주 쓰는 글자 관련 태그는 아래와 같습니다.
[b태그 : 글자를 굵게 한다(bold)]
[s태그 : 글자 가운데 선을 긋는다(stroke)]
[i태그 : 내용을 이탤릭체로 바꾼다]
[br태그 : 줄바꿈을 한다 (HTML은 줄바꿈을 따로 안 해주면 줄이 바뀌지 않는다. Enter키가 먹히지 않는다는 것)]
(예)
내용1<br>내용2
| (결과)
내용1
내용2
|
[br태그 응용 : 줄 간격을 띄운다 (더 여러 줄로도 응용 가능)]
(예)
내용1<br><br>내용2
| (결과)
내용1
내용2
|
[pre태그 : 안의 내용을 일반 글쓰기 처럼 쓸 수 있다]
(예)
<pre>
내용
랄랄라
~_~)~
</pre>
| (결과)내용
랄랄라
~_~)~
|
[font태그 : 글자 속성을 바꾼다. (바꾸는 법은 나중에)]
[ : 공백 문자 (띄어쓰기 할 때 필요)]
(예)
내용
| (결과)
내용
|
글자 관련은 이 정도만 알아두면 되겠네요.
더 알고 싶은 게 있겠지만 참으시고 일단 따라오세요.
#2. 그림을 보여주는 법
[img 태그 : 그림파일을 보여준다]
다음은 이미지 출력입니다.
(예)
<img src="./upload/dogcow03_01.jpg">
| (결과)
|
여기서 두 가지 처음 보는 게 나왔을 겁니다.
1) 우선 태그 안이 뭔가 복잡하다.
2) 이상한 파일 이름이 들어가있다.
( img 태그 속성 : src )
여기서 처음으로 태그의 속성값을 보게 되었는데요. 이것은 태그 안에서 태그가 어떤 방식으로 실행될지를 설정해줍니다.
이미지를 출력하는 태그는 <img>이죠. 하지만 이것만으로는 이미지가 출력되지 않아요.
왜냐하면 <img>태그는 보여줄 파일이 어디있는지 모르거든요.
그렇기 때문에 속성인 src가 쓰입니다. src는 source의 약자로 출처, 원본이란 뜻이죠.
대부분의 속성은 '='기호를 이용해서 값을 설정해주게 됩니다.
src의 경우는 src="파일 위치" 인데, 앞으로 모든 속성의 설정값은 큰 따옴표("") 혹은 작은 따옴표('')로 감싸주는 습관을 들이는 것이 좋습니다.
피치못하게 감싸지 못할 때를 제외하고는 말이죠.
다음으로 '파일 위치'에 대해서 잠깐 알아보죠.
파일 위치, 파일 경로 란 파일이 있는 장소, 파일의 주소를 말하는 것인데,
컴퓨터에서 파일 경로를 보여주는 법은 다음과 같습니다.
(1) c:\homepage/test/dogcow03_01.jpg ← C드라이브의 homepage폴더 안의 test폴더의 dogcow03_01.jpg라는 파일
(2) dogcow03_01.jpg ← 현재 실행되고 있는 파일과 같은 폴더 안의 dogcow03_01.jpg라는 파일
(3) ./dogcow03_01.jpg ← 현재 실행되고 있는 파일과 같은 폴더 안의 dogcow03_01.jpg라는 파일
(4) ../dogcow03_01.jpg ← 현재 실행되고 있는 파일이 있는 폴더 보다 한 단계 상위 폴더에 있는 dogcow03_01.jpg라는 파일
(5) http://www.aierse.net/dogcow03_01.jpg ← 해당 웹페이지 주소에 있는 dogcow03_01.jpg라는 파일 |
여기서 생소한 것은 아마도 (2), (3), (4)번 일겁니다.
(2)번의 경우는 현재 실행되고 있는 html파일과 같은 폴더 안에 dogcow03_01.jpg 라는 파일이 있다는 뜻입니다.
(3)번은 2번과 같은 뜻인데 여기서 제일 앞에 쓰는 ./ ← 이 표시를 익혀둡시다. 이것은 '현재폴더의 안'이라는 뜻으로 (2)번의 표현보다 좋은 표현입니다.
(4)번의 ../ ← 이 표시는 현재 실행되고 있는 html파일이 있는 폴더보다 한 단계 상위 폴더라는 뜻입니다.
예를 들어서 지금 실행되는 폴더의 경로가 c:\homepage/test/라면, 한 단계 상위 폴더는 homepage폴더가 됩니다.
 |
즉, src="./dogcow03_01.jpg" 는 '현재 html파일과 같은 폴더 안에 있는 dogcow03_01.jpg 이란 파일' 이라는 뜻이고,
<img src="./dogcow03_01.jpg"> 는 'src가 가리키고 있는 경로의 그림 파일을 보여줘라'라는 뜻이 됩니다.
( img 태그 속성 : border )
img태그(이미지 태그)에서는 한 가지를 더 알아두면 좋은데 바로 border 속성입니다.
border는 이미지 이외에도 여러가지 태그에서 사용되는 속성으로 보통은 '테두리의 두께'를 이야기합니다.
예를 들어서 <img src="./upload/dogcow03_01.jpg" border="5"> 이렇게 써주면 두께 5의 테두리를 가진 그림이 보여집니다. 일반적인 값은 0이죠. 직접 해보세요.
#3. 링크를 거는 법
[a 태그 : 다른 문서와 연결하는 링크를 만들어 줌]
마지막으로 하이퍼링크를 연결해주는 앵커태그 <a>입니다.
앵커태그는 저희가 익숙하게 사용하고 있는, '버튼이나 문장을 눌러서 다른 페이지로 이동하기'를 구현해주는 태그입니다.
( a 태그 속성 : href )
앵커태그는 <a>버튼 or 문장<a> 이런 형태를 갖지만, 속성이 없으면 이미지 태그와 마찬가지로 아무 일도 하지 못합니다.
앵커태그는 href라는 속성값을 갖는데 이것은 연결할 파일 등의 위치를 나타냅니다. 이미지 태그의 src 속성과 비슷하죠.
('hypertext reference'의 약자라 추정되는데 몰라도 됩니다.)
따라서 기본 사용법은 아래와 같습니다.
(예)
<a href="http://www.aierse.net/">홈페이지로 이동</a>
|
폴더 내에서만 이동할 경우 이렇게 해도 됩니다.
(예)
<a href="./dogcow03_01.jpg">그림도 연결된다</a>
|
다른 폴더로 가도 똑같이.
(예)
<a href="../test/test.html">문서도 연결된다</a>
|
( a 태그 속성 : target )
앵커태그는 기본적으로 현재 html페이지에서 다른 페이지로 이동을 시켜줍니다.
여기서 target이란 속성을 다시 한번 지정해줄 수 있는데,
target 속성이 지정되면 현재 보는 페이지를 바꾸는 게 아니라 새 창을 띄우는 등의 일을 할 수도 있습니다.
지금은 새 창 띄우기만 보죠.
(예)
<a href="./upload/dogcow03_01.jpg" target="_blank">그림도 연결된다</a>
| (결과)
그림도 연결된다
|
눌러보시면 새 창이 뜨는 것을 알 수 있습니다. target 속성에 _blank 값이 들어가면 새 창이 뜹니다.
마지막으로 앵커태그의 버튼을 이미지로 썼을 경우입니다. 이렇게도 가능하죠.
(예)
<a href="./upload/dogcow03_01.jpg" target="_blank"><img src="./upload/dogcow03_01.jpg"></a>
| (결과)
|
만일 그림 주변에 자동으로 border(테두리)가 형성되었다면 이미지의 border값을 0으로 해주면 원래대로 됩니다.
이번엔 여기까지만 하죠.
별 거 안 했는데 속성이랑 경로가 처음 나와서 괜히 길어졌네요^^;
|
|
| 강아지랑 송아지도 만들 수 있는 HTML 강좌 - 02편 : HTML 문서의 기본구조 |
#1. HTML문서의 기본 구조
앞에서도 이야기 했지만 HTML문서는 태그의 나열로 이루어집니다.
기본적으로는 마음대로 순서를 정해서 쌓으면 되지만,
HTML문서 전체의 기본 구조가 단 한가지 존재합니다. 아래를 보시죠.
(예)
<html>
<head>
설정
</head>
<body>
내용
</body>
</html> |
처음 나온 소스인데 겁먹지 말고 침착하게 보세요.
우선 앞에 빈 공백이 있는 것들은 '보기 쉽게' 표현하기 위한 공백입니다.
이렇게 되어있을 때보면 '내용'만 안으로 들어가있죠?
body태그의 사이에 내용이 들어가있다는 것을 직관적으로 보여주기 위함입니다.
앞의 공백은 없어도 됩니다. 아무 의미도 없죠. 단지 내용이 많아지면 헷갈리니까 저렇게 하는 것입니다.
저 공백은 실재로도 저렇게 사용하며 파일이 실행되는데 아무 문제도 없습니다.
공백을 넣는 방법은 메모장 기준으로 키보드의 'tab'키를 누르는 것입니다.
내용으로 돌아가죠. 다시 한 번 쓰겠습니다.
(예)
<html>
<head>
설정
</head>
<body>
내용
</body>
</html> |
모든 HTML문서는 이 기본 구조를 갖습니다. 물론 우리가 직접 손으로 쳐줘야합니다.
가장 바깥에는 html태그가 열리고 닫혀있는데, 그 안의 내용이 HTML이란 것을 뜻합니다.
그 안에 보면 head태그가 열리고 닫혔고, 다시 body태그가 열리고 닫혔습니다.
head태그는 그 안에 웹페이지의 설정이 들어갑니다.
일반적으로 이 부분은 웹브라우져에서는 보여지지 않습니다. 하지만 아래의 body태그에 들어가는 내용에 영향을 미치죠.
body태그는 그 안에 저희가 실재로 눈으로 보는 내용이 들어갑니다.
저희가 앞으로 태그와 내용을 쓰면서 상자쌓기 놀이를 할 부분이 바로 여기입니다.
이 기본 구조는 사실 생략해도 되는 부분이 많지만, 특별한 이유가 없는 한 그러지마세요.
태그 또한 마찬가지인데 열었다가 닫지 않아도 문제가 없는 태그도 많습니다. 대표적으로 방금 본 html태그도 그렇죠.
하지만 이건 아주 안 좋은 습관입니다. 웹브라우져의 종류에 따라서는 문제가 생길 수도 있고,
내용이 길어질 경우에는 닫지 않은 태그 때문에 전체 내용이 오작동 할 수도 있습니다.
만약에 앞으로 작업을 하시다가 별거 안 했는데 페이지 전체, 혹은 일부가 아예 안 보이는 등의 문제가 생기면
십중팔구는 무언가를 열었다가 안 닫았을 경우일 것입니다.
#2. 태그 사용 시 주의사항
끝내기 전에 태그의 사용법에 대해서 간단히 주의사항을 알아봅시다.
위에서 보셨듯이 태그 안에 태그가 들어갈 수 있다는 것을 아셨을 겁니다. 이것은 얼마든지 가능합니다.
태그 안에 태그 안에 태그 안에... 태그가 있어도 되죠.
하지만 이렇게 쓰시면 안됩니다. 아래의 예를 보시죠.
(예)
<태그1><태그2></태그1></태그2> |
이렇게 태그가 서로 교차되면 안됩니다. 반드시 열고 닫힌 태그 안에 열고 닫힌 태그가 있어야합니다. 아래처럼요.
(예)
<태그1><태그2></태그2></태그1>
|
이건 틀리면 안 되는 부분이니 주의하세요.
이번에는 여기까지만 하죠.
앞으로 body태그 안에서 작업을 할 거라는 것만 알아두시면 OK.
특별한 언급이 없는 한 그냥 body태그 안에서 작업한다고 생각하세요.
물론 위의 기본 형태는 항상 잡아주셔야합니다.
(설마 '설정'이나 '내용'이라는 글자까지 그대로 쓰시지는 않겠죠?)
여기까지 보셨으면 HTML에 대해서 이해하는 것에 아무 문제 없을 겁니다. 참 쉽죠?
다음부터는 이제 안 봐주고 본격적으로 진도 나갑니다.
|
|
| 강아지랑 송아지도 만들 수 있는 HTML 강좌 - 01편 : 태그란 무엇인가? |
강아지랑 송아지도 만들 수 있는 HTML 강좌 - 01편 : 태그란 무엇인가?
#1. HTML이란?
HTML처음이니 잠시 몰라도 되는 개념 설명부터.
저희가 보는 (거의) 모든 웹페이지는 기본적으로 HTML이라는 언어에 의해서 만들어져있습니다.
하이퍼 텍스트 마크업 랭귀지(Hyper Text Mark-up Language)라는 건데 아실 필요없구요.
HTML이 만들어진 이유는 웹 환경에서 문서와 문서를 연결하는 툴이 필요했기 때문입니다.
모든 웹이란 것이 거미줄 처럼 연결되어있는데 이를 구현할 기본 개념이죠.
이렇게 연결된 링크를 하이퍼링크(Hyper Link)라고 부릅니다.
예를 들어 저희가 인터넷에서 하는 모든 행위는 어떤 링크를 클릭해서 이동을 하는 것이 기본입니다.
검색어를 입력하고 버튼을 클릭하든, 검색 결과를 눌러서 웹페이지로 이동을 하든, 사이트 내의 메뉴를 누르든,
심지어는 웹브라우져의 즐겨찾기 목록을 클릭하는 것 조차도 이 기본 개념을 이용한 것이죠.
HTML이 할 수 있는 거의 유일한 기능이 이것입니다.
문서와 문서. 즉, 웹페이지와 웹페이지를 연결해주는 기능이죠.
이 기능 외에 HTML이 할 수 있는 것은 '태그'라는 것을 순서대로 써서 문서의 내용을 레고처럼 쌓아올리는 것입니다.
HTML이 할 수 있는 모든 것이 이 두 가지 기능입니다.
#2. HTML 문서를 만들어 보자
그러면 HTML문서를 어떻게 만들까요?
그냥 메모장(notepad) 열고서 파일 저장 할 때 확장자를 html로 붙이면 됩니다.
(예) 파일이름.html
확장자가 뭐냐구요?
파일의 이름은 "파일이름.확장자"의 형태를 갖고 있습니다. 여기서 "." 뒤의 부분이 확장자입니다.
컴퓨터는 이 확장자를 보고서 파일의 종류를 처음 판단합니다.
(그래서 이걸 아무렇게나 막 바꾸면 파일 실행이 안 되죠.)
파일 확장자가 안보인다구요?
윈도우 설정이 컴맹한테는 확장자를 안 보여주게 되어있어서 그렇습니다.
(윈도우XP기준입니다만) 아무 폴더나 클릭해서 여시구요.
위의 메뉴 보시면 '도구'에 '폴더 옵션'이 있으니 클릭하세요.
상단의 '보기'탭을 클릭하시면 아래 내용의 중간보다 좀 더 아래쪽에 '알려진 파일 형식의 확장명 숨기기'가 체크되어있을겁니다.
이걸 체크를 풀어버리시고 확인 누르시면 보일겁니다.
확장자가 htm인 HTML문서는 뭐냐구요? 묻지마시고 그냥 html씁니다.
괜히 편하려고 이상한 짓 하지말고 많이 쓰는 걸로 가요 우리.
참고로 저도 HTML 등의 문서 작업 시에 그냥 메모장 씁니다.
나모나 Editplus 이런 거 다 필요없어요. 괜히 머리만 더 복잡해집니다. 쉽게 갑시다.
만일 HTML파일을 메모장으로 못 여시겠으면 아래와 같이 해보세요.
( HTML파일 우클릭 → 연결 프로그램 → 메모장(혹은 Notepad) )
* 만일 메모장이 목록에 없다면 '연결 프로그램'에서 찾으면 나옵니다.
#3. 태그란 무엇인가?
그럼 이제 태그에 대해서 설명해보겠습니다.
저희가 간혹 보는 <태그이름> 이렇게 써 있는 모양의 것들을 HTML에선 태그라고 부릅니다.
화살표 모양의 괄호<>를 표식으로 해서 특정한 명령들을 받아들이고 실행하는 것이죠.
웹페이지는 이 태그들을 순서대로 나열해서 만듭니다.
어떤 계산이나 원리가 필요한 것도 아니고 그냥 눈에 보이는 순서대로 위에서부터 쌓는 것이죠.
위에 보시는 것 처럼 두 개의 태그를 입력하니까 두 개가 순서대로 보여지는 것을 확인할 수 있습니다.
HTML 태그는 이렇게 순서대로 쓰면 순서대로 나옵니다. 이게 거의 전부입니다.
태그에 대한 기본 개념을 하나만 더 설명하겠습니다.
어떤 태그는 '열고' '닫는' 개념이 있습니다.
예를 들어 <태그이름></태그이름> 이런 구문이 있으면,
<태그이름> ← 이건 태그를 연 것이고
</태그이름> ← 이건 태그를 닫은 것입니다.
열고 닫는 태그는 일반적으로 그 사이에 있는 부분에 영향을 끼칩니다.
예를 들어서 <center>내용</center>라는 태그는
열고 닫는 사이의 내용을 페이지 한 가운데로 정렬 시킵니다. (가로방향)
(예)
<center>가운데 정렬 테스트</center>
| (결과)
가운데 정렬 테스트 |
다른 거 필요없이 태그가 무엇인지랑, 태그를 열고 닫는다는 말이 뭔지만 알면 이번 강의는 OK.
참 쉽죠? 이번 강의 너무 어려우면 댓글 주세요-_-;
|
|
[PREV] [1] ... [255][256][257][258][259][260][261] ... [358] [NEXT]
猫愛 - MyoAe - Homepage Mode
Ver. 1.45
by Aierse |
|
|