[코딩야학] 3일차 정리

3일차 진도는 줄바꿈부터 최후의 문법 속성과 img까지이다.

 

줄바꿈 : br vs p

코드에서 줄바꿈(3행)을 했으나, 웹페이지에서는 줄바꿈이 적용되지 않는다.

따라서, 태그가 필요하다!!!

 

이 때, 쓰이는 태그가 br 과 p 이다.

 

<br>

<p></p>

두 태그의 결과는 거의 동일하다.

 

차이점과 공통점은 무엇일까?

 

차이점

<br> 

- 무엇인가를 설명하지 않는 태그는 감싸야하는 컨텐츠가 없으므로 태그를 닫지 않는다.

ex. img, input, br, hr, meta

- 단락이 아닌 단순히 줄바꿈을 의미하며, 여러번 사용이 가능하다.

 

<p> : 단락(paragraph)

- 단락을 구분해주기 때문에 열고 닫는 태그가 존재한다.

- 단락 간의 간격이 고정되어 있어 시각적으로 자유도가 떨어진다.

-> CSS 를 이용하면 정보를 꾸며주게 되므로, p태그의 한계를 극복할 수 있다.

ex. <p style="margin-top:45px;"> : p태그 위쪽에 45px 만큼 여백을 지정

 

공통점

 

- 단락 혹은 줄을 바꿔주는 태그이다.

 

-> 단락을 표현할 때는 <p> 태그를 사용하는 것이 좋은 선택!

  웹페이지를 정보로서 보다 가치있게 해주기 때문이다.

 

 

 

HTML이 중요한 이유 : 지식인 vs 일반인

Coding 이라는 Text를 제목으로 만든다면?

 

일반인 : Coding

지식인 : Coding

 

작성글을 HTML로 표시했을 때

<p style="font-size: 1.25em;" data-ke-size="size18"><b><span style="color: #333333;">일반인 : Coding</span></b></p>

<h5>지식인&nbsp;:&nbsp;Coding</h5>

일반인의 제목은 font-size가 18이고, <b> 볼드 처리된 정보로 제목이라는 정보는 없다.

지식인의 제목은 <h4> 크기를 가진 제목을 나타내고 있다.

 

-> 이처럼 비슷한 크기를 가지고 있지만 코드가 다르다.

 

이 때 중요한 점은, 검색엔진에서 검색을 했을 때 제목을 의미하는 지식인의 제목이 먼저 노출된다는 것이다.

 

접근성을 중요하게 생각하는 웹의 특성상 HTML을 통한 접근성의 향상은 매우 중요하다!!!

 

최후의 문법 속성과 img

태그의 심화된 문법인 속성(Attribute)

 

본문에 이미지를 넣고 싶을 때, img 태그를 사용할 수 있다.

하지만 img 태그만으로는 어떤 이미지를 불러올 지에 대한 정보가 부족하므로 속성이라는 보조 문법을 적용할 수 있다.

 

src="https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png" 

-> src 라는 부분이 속성이 된다.

 

***저작권에서 자유로운 이미지를 얻을 수 있는 장소 : unsplash.com

Beautiful Free Images & Pictures | Unsplash

 

이미지는 위의 내용과 같이 인터넷에서 불러올 수도 있지만 이미지를 다운로드 받아 내 컴퓨터에서 직접 가져다 쓸 수 도 있다.

 

이미지 파일을 프로젝트 폴더 안에다 넣어 웹페이지 파일과 같은 위치에 둔다면

<img src="Coding.png">

이미지 파일 이름만으로도 이미지를 불러올 수 있다.

 

이미지의 크기를 조정할 때는 width 값으로 크기를 마음껏 조정할 수 있다.

 

이러한 속성을 통해 태그를 보다 풍부하게 사용할 수 있다.