이미지 삽입 및 목차 만들기

<<1>>

이번에는 태그가 태그의 이름만으로는 정보가 부족할 때 "속성 Attribute"을 통해 더 많은 의미를 넣어보도록 하겠습니다.

이미지를 넣어볼 건데요.

기본 웹페이지와 웹브라우저를 준비해보겠습니다.

 

(저는 찰리푸스 빠순이입니다. 찰리푸스는 쉬는 시간에 코딩을 한대요~우리 자기 멋있어~!엔지니어 찰리푸스~)

 

이미지를 넣기 위해 <img>란 태그를 넣어보겠습니다.

 

<img>를 웹페이지에 입력해보니 웹브라우저에서는 그냥 줄과 줄사이의 거리가 멀어질 뿐입니다. (들어가라는 이미지는 들어가지지 않습니다.) 

여기서 저작권에 구애받지 않고 사용가능한 

umspash.com이란 곳을 추천받았는데 여기 들어가서 주인의 SNS에 제가 사진을 쓸 수 있게 해줘서 고맙다고 댓글을 단 다음 사진을 무료로 다운받았습니다.

 

원래 이름이 너무 길어서 Rename(F2)으로 가서 이름을 prada.jpg로 바꿨습니다. 

 

다음은 태그만으로 정보가 부족하여 이미지를 올리지 못했던 부분을 속성을 추가하여 이미지를 올려보았습니다.

<img src="prada.jpg">

(src : source)

 

그랬더니 사진 크기가 너무 크게 웹브라우저에 반영이 되어 사진이 무슨 사진인지 분간이 가지 않았습니다.

 

그래서 다시

<img src="prada.jpg" width="100">

라고 크기 조정 속성인 width="숫자"를 추가했더니 사진이 적당한 크기로 반영이 되었습니다.

 

여기 속성에서 width랑 src의 위치를 바꿔도 결과는 같습니다.

<img width="100%" src="prada.jpg">

이렇게 말이죠.

 

<<2>>

이번에는 태그를 이용하여 목차만들기 실습을 해보겠습니다.

기본 웹페이지와 웹브라우저를 준비합니다.

 

(지금 이 시간은 찰리푸스의 Through it all에 꽂혀서 계속 이것만 들으면서 코딩 실습하고 있답니다~^^)

위 웹페이지와 웹브라우저는 나름대로 목차를 나타내기 위해 줄바꿈 태그인 <br>로 해보았습니다. 웹브라우저에는 얼추 목차처럼 생성이 되었으나 구글 등 엔진들은 기가막히게 저것이 엉성한 것임을 알아볼 것이며 장기적으로 볼 때 정식으로 목차 태그로 나타낸 것과는 차이가 아주 많이 나게 된다고 합니다.

 

그래서 목차로 나타내기 위한 글 열리는 곳과 닫히는 곳에 

<li>~</li>

태그를 넣어보겟습니다.

 

 

저기 보이시죠~? 웹브라우저에 정식적으로 웹페이지에 목차 태그로 적은 것이 웹브라우저에 나타난 것이요.

 

여기서 잠깐~!

<li>~</li>

같은 태그를 줄마다 쓰는 건 귀찮습니다.

그럴 때는 ctrl 누르고 각 줄마다 마우스로 커서를 클릭해준 다음 한 줄만 입력해주면 

마우스로 클릭해 놓은 데까지 같은 글자가 입력이 됩니다.

이렇게요. 

</li>뒷부분에 세 줄 동시에 파란색 커서가 나타난 게 보이실 겁니다.

 

 

이 <li>태그는 어디서부터 어디까지가 같은 그룹인지 부모태그인 <ul>태그가 필요합니다.

이 말은 바꿔말하면 <li>태그는 반드시 부모 태그를 가지고 있으며

부모 태그인 <ul>태그는 반드시 자식태그인 <li>태그를 가지고 있습니다.

 

저 웹브라우저의 "찰리푸스 노래제목"과 저의 "찰리푸스에 대한 고백" 부분을 다른 그룹으로 구분하기 위해 

부모 태그인 <ul>태그를 열리는 곳과 닫히는 곳에 입력을 하였습니다.

(다시 보니 <ul>태그는 반드시 자식 태그가 필요하다고 했는데 아랫부분은 제가 입력을 안 했네요. 

솔직히 아직 <ul>태그가 왜 반드시 자식 태그가 필요한지 완전히 이해를 못 한 상태라서 그런 거 같습니다.)

 

이번에는

<ol>~</ol>

태그를 넣어 목차를 만들어 보겠습니다.

 

<ol>태그를 웹페이지에 넣어보니 왼쪽 웹브라우저에 자동으로 넘버링이 된 게 보입니다.

그래서 이 <ol>태그를 이용하면 1~100000000000000000000번 그 이상 번호도 일일이 넘버링을 하지 않아도 자동으로 숫자생성을 할 수 있습니다.

만약 <ul>태그를 이용한다면 1부터 저 숫자까지 일일이 다 넘버링을 해야 할 것입니다.

 

그 이유는

<ul> : Unordered List

<ol> : Ordered List

를 나타내기 때문입니다.