|
|
|
강아지랑 송아지도 만들 수 있는 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으로 해주면 원래대로 됩니다.
이번엔 여기까지만 하죠.
별 거 안 했는데 속성이랑 경로가 처음 나와서 괜히 길어졌네요^^;
|
|
猫愛 - MyoAe - Homepage Mode
Ver. 1.45
by Aierse | |
|