4강 이미지 속성 , 부모태그와 자식태그

- 이해도를 높이기 위해 한글 문서를 캡처했습니다. -

1. 이미지 삽입

 

웹 페이지에 글씨만 있으면 먼가 답답한 느낌이 든다.

먼가 좀 화려한 게 있으면 좋겠다는 생각을 하게 된다.

그렇다! 사진을 넣고 싶다고 생각할 것이다.

이미지(image)를 웹페이지에 포함시킬 때 사용하는 태그는 <img> 태그입니다.

하지만 img 만으로는 정보가 부족하다.

그래서 여기에 속성 값을 주어야 하는데 

이게 바로 source인데 줄여서 src로 하기도 합니다.

코드 :  <img src="주소 or 파일명"> 

 

 

이미지를 불러오게 되면 크기가 원하는 대로 나오지 않을 수도 있다.

그래서 우리는 이미지의 크기를 조절해줄 필요가 있다.

그게 바로 width라는 속성 값을 주게 된다.

예제

width

완성 코드 :  <img src="주소 or 파일명" width="크기"> 속성 값의 자리는 바꿔도 된다.

 

 

 

---

2. 부모 태그와 자식 태그

두 개의 태그가 있다.

<parent>

    <child> </child>

</parent>

이렇게 태그가 포함 관계로 있을 때 포함하고 있는 태그를 부모 태그 포함된 태그를 자식 태그라고 한다.

이번에는 "목차"를 만들어 보자.

목차는 목록이나 제목, 항목 등을 차례로 늘어놓은 것을 목차라고 하는데 보통

1. 대목차

  2) 중목차

    - 소목차

이런 형식으로 되어 있다.

예를 들어 우리가 웹 개발을 배우기 위해선 HTML , CSS , Java Script를 배워야 한다.

이 세 가지를 이용해 목차를 만들어 보자.

ATOM 프로그램을 이용해 위 3가지 단어를 쓰게 되면 어떠한 결과가 나오는가?

← ATOM 코딩 화면

 

 

 

 ← 웹 페이지 화면

 

 

위에 보이는 화면들은 아마도 우리가 원하는 목차가 아닐 것이다.

우리는 목차답게 줄 바꿈이 되었을 좋겠다는 생각을 할 것이다.

줄 바꿈 태그는 아마 3강에서 배웠을 것이다. 

만약 생각이 안 난다면 3강을 참고하도록 하자.

 

3강 HTML기본문법

단순히 줄만 바꾼다면 <br> 태그를 이용하면 된다.

하지만 그리고 단어의 앞쪽에 순서를 부여하면 그럴듯하게 목차가 완성될 것이다.

← ATOM 코딩 화면

 

 

 

 ← 웹 페이지 화면

 

 

 

그런데 HTML을 만든 사람들은 목차를 쓸 때 사용하시라고 하는 태그를 만들었습니다.

목차를 다른 말로 목록이라고도 하는데 영어로는 List (리스트)라고 한다.

list의 앞에서 두 글자 "li" <br> 태그를 지우고 앞에다가 <li>를 쓰면 된다.

코드 :  <li> 목록 </li> 

 

← ATOM 코딩 화면

 

 

 

← 웹 페이지 화면

 

 

수업의 이해도를 위해서 새로운 목록을 하나 더 만들어 보자.

예를 들어 빅 데이터를 배운다고 가정을 했을 때 파이썬 , 알고리즘 , 데이터 수집 등을 배우게 되는데

이 내용도 한번 추가해 보자.

 

 

← ATOM 코딩 화면

 

 

 

 

 

 

← 웹 페이지 화면

 

 

 

 

 

이렇게 코딩을 한다면 구분이 잘 안 가기 때문에 띄어쓰기를 좀 하고 싶을 것이다.

물론 여기서도 <br> 태그를 이용한다면 간단히 띄어쓰기를 할 수 있을 것이다.

하지만 <li> 태그는 중목차 정도밖에 되지 않는다.

대목차에 필요한 부모 태그가 필요하다.

바로 <ul>이란 태그이다.

ul은 unordered list (언오더드 리스트)의 약자이다.

코드 :  <ul>

            <li>목록</li> 

            <li>목록</li>  

            <li>목록</li> 

          </ul>

<li> 같은 항목들은 어디서부터 어디까지가 연관된 항목인지를 경계를 지키고 그룹화를 하기 위해 

부모 태그가 필요한 것이다.

 

← ATOM 코딩 화면

 

 

 

 

 

 

 

 

← 웹 페이지 화면

 

 

 

 

 

이번에는 자식은 그대로인데 부모가 바뀌는 경우이다.

예를 들어 목차의 숫자가 위에처럼 단순히 3개가 아니라 극단적으로 1억 개라고 가정을 할 때

우리는 1억 개의 숫자를 하나하나씩 입력을 해야 한다.

아니면 목차 중에 1번을 지우길 원한다면 우리는 2번을 1번을으로 수정을 해야 하고 3번을 2번으로

수정해야 하는 단순노동을 하게 될 것이다.

이런 경우 우리를 구원해 줄 수 있는 부모 태그가 있는데 바로 <ul>을 ordered list (오더드 리스트) <ol>로 바꾸는 것이다.

ordered list (오더드 리스트)

앞에 있는 숫자를 지우고 태그를 수정해 보자. 

자동으로 넘버링되는 놀라운 경험을 하게 될 것이다.

 

← ATOM 코딩 화면

 

 

 

 

← 웹 페이지 화면