[생활코딩|WEB1#4] 최후의 문법속성과 img, 부모 자식과 목록 2019.12.25

---

본 게시글은 유튜브 생활코딩 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.

생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.

생활코딩 유튜브

생활코딩

생활코딩 사이트

생활코딩

"어떤 문제가 우리 삶에서 중요하고 심각할 수록

그 문제를 해결해 주는 공부는 문제로부터 우리를 해방시켜줄겁니다."

(생활코딩 : Web1 -1 수업소개. 중)

---

#0. img 태그

사실, 블로그 포스팅을 하는 경우라면, img 태그를 조금 더 쉽게 확인할 수 있습니다.

티스토리 기준으로 글 수정, 기본모드를 HTML 모드로 바꾸어 확인해주세요.

지금 보고 계시는 글의 첫 부분입니다.

만약 크롬 브라우저를 사용하고 계시다면, 우클릭 - 페이지 소스 보기로도 확인하실 수 있겠네요.

첫 줄의 img 태그를 먼저 확인해 볼까요?

어떠한 파일인지, 파일 이름이 무엇인지, 파일의 크기가 어떠한지의 순서로 나와 있습니다.

여담이지만 제 표지사진은 canva로 만들었기에 '내츄럴 바디 스크럽'이란 이름으로 나와있네요.

'alt'를 이용해 대체 택스트를 생성해줘도 괜찮겠지만, 이번 시간은 넘어가도록 하겠습니다

---

2019/08/01 - [개발노트&IT/블로그] - [블로그5분] 네이버/티스토리 블로그 썸네일&대표이미지 간단하게 무료로 만들기, 포토샵없이 썸네일이 5분컷? Canva 캔바

[블로그5분] 네이버/티스토리 블로그 썸네일&대표이미지 간단하게 무료로 만들기, 포토샵없이 썸네일이 5분컷? Canva 캔바

---

#1

다시 수업으로 돌아와 볼까요?

img파일을 프로젝트 폴더 안에 위치시켰습니다.

사용한 이미지 다운 사이트 : unsplash.com

사용하고 있는 편집 프로그램 : https://atom.io/

웹 페이지 파일과 같은 위치의 img 파일을 사용하고 싶다면,

src 속성 값으로 이름을 지정해주면 사용할 수 있습니다.

html 태그를 알아보겠습니다 <br>
<img src="test.jpg">

 

....

오 세상에.. 사진 크기를 지정해줘야 할 것 같습니다.

html 태그를 알아보겠습니다 <br>
1) <br>
<img src="test.jpg" width="50%" height="auto">
<br>
<br>
2) <br>
<img src="test.jpg" width="1000px" height="1000px">

이렇게 %, 혹은 px의 단위로 사진의 크기를 지정해 줄 수 있습니다.

물론, 사진에 적용할 수 있는 다양한 태그 속성은 훨씬 많습니다.

다 외워야 할까요?

글쎄요... 저희는 모르는 것을 검색하면 1분 안에 정보를 얻을 수 있는 혁명적인 세상에 살고 있잖아요?

 

#2

이번 시간에는 태그 간의 관계의, 그 중에서도 부모, 자식 관계를 알아보고자 합니다.

왠지 자바의 자료구조 tree가 떠오르는 것 같네요.

<p>
	<a hrref="https://test.org">test</a>
</p>

위 코드에서 p 태그가 a 태그의 부모, a 태그가 p 태그의 자식이라고 표현합니다.

그렇다면 감싸지는 태그가 자식이고, 감싸는 태그가 부모인 것 아니냐고 물으실 수 있으실텐데,

일반적으로 그렇지만 반드시 a 태그와 p 태그가 부모, 자식 관계일 필요는 없습니다.

그 필요에 따라 관계가 달라질 수 있기 때문입니다.

하지만 몇몇 태그들은 부모, 자식 관계처럼 고정된 관계인 태그들이 있습니다.

1. 목차를 <br>
2. 생성해 <br>
3. 보겠습니다. <br>

<ul>
<li>목차를</li>
<li>생성해</li>
<li>보겠습니다.</li>
</ul>

<ol>
<li>목차를</li>
<li>생성해</li>
<li>보겠습니다.</li></ol>

ul은 unordered list의 약자, ol은 ordered list의 약자입니다.

단순히 br로 태그와 비슷하게 표현을 해 줄 순 있겠지만, 우리는 용도에 알맞은 태그를 쓸 줄 알아야 합니다.

여기서 list는 li 태그로 감싸지는데, 이 태그는 다시 ul 혹은 ol태그로 감싸집니다.

li태그는 다른 li태그와 구분히 필요하기 때문에 ul 혹은 ol과 부모 자식 관계를 가지고 있어야만 합니다.

만약 ul 혹은 ol의 도움없이 li태그만 쓰인다면 어떻게 될까요?

1) <br>
<li>첫번째</li>
<li>챕터의</li>
<li>목차입니다.</li>
<li>두번째</li>
<li>챕터의</li>
<li>목차입니다.</li>
<br>

2) <br>
<ul>
  <li>첫번째</li>
  <li>챕터의</li>
  <li>목차입니다.</li>
</ul>
<ul>
  <li>두번째</li>
  <li>챕터의</li>
  <li>목차입니다.</li>
</ul>

어떤가요?

그 차이를 한 눈에 확인하실 수 있으신가요?

저희는 벌써 빈도수가 높은 태그의 대부분을 확인해보았습니다!