생활코딩 WEB1 - HTML & Internet (2)

 

2022-01-04
혁명적인 변화 / 통계에 기반한 학습 / 줄바꿈 / HTML이 중요한 이유 / 최후의 문법 속성과 img

 

1. 태그 공부하기

https://www.w3.org/

World Wide Web Consortium (W3C)

W3C(The World Wide Web Consortium) 국제민간표준화기구의 홈페이지의 페이지 소스보기를 해보자

 

뭐가 엄청 많이 적혀있다! 그 중에서 한 줄을 복사해 보았다.

 

<h1 class="logo"><a tabindex="2" accesskey="1" href="/"><img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C" /></a> <span class="alt-logo">W3C</span></h1>

너무 복잡하니 단어 하나만 봐 볼까?

 

<h1>W3C</h1>

어제 태그를 배웠는데... <h1>도 태그의 종류인가 보다.

 

2. 그럼 <h1>은 무엇인가?

 

구글에 검색해보자!

 

https://www.w3schools.com/tags/tag_hn.asp

HTML h1 to h6 tag

 

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

 

<h1>~<h6> 정의와 쓰임새

• <h1> 에서 <h6> 까지의 태그는 머릿말을 작성할 때 사용 된다.
• <h1> 은 가장 중요한 머릿말이고,  <h6> 은 덜 중요한 머릿말이다.

 

(좌)입력, (우)결과

 

머릿말로 입력한 <h1>HTML<h1>이 크게 출력되었다!

 

---

3. HTML에 사용되는 태그는 약 150+

 

💡 전세계 웹페이지를 분석한 사이트 https://www.advancedwebranking.com/seo/html-study/

HTML Study

 

한 개의 웹페이지에 사용되는 태그의 수

 

가장 많이 사용되는 태그의 종류

 

벌써 눈에 익은 것들이 몇개 보인다. 150개 정도면... 많은 것도 아닌거 같네?

 

---

4. 줄바꿈은 어떻게 할까?

 

오늘도 난 구글링을 한다...

 

https://www.w3schools.com/tags/tag_br.asp

HTML br tag

 

 

<br> 정의와 쓰임새

• <br> 태그는 단일 줄바꿈을 넣는다.
• <br> 태그는 주소나 시를 적을 때 유용하다.
• <br> 태그는 끝맺음 태그가 없는 빈 태그(empty tag)다.

 

<br>이 줄바꿈을 나타내는 태그인가 보다. 그런데 Example에 있는 <p>는 뭐지?

 

<p> 정의와 쓰임새

• <p> 태그는 단락을 의미한다.
• 브라우저는 <p> 태그의 앞 뒤로 자동으로 빈 줄을 하나씩 추가한다.
• Tip: Use CSS to style paragraphs.

 

💡CSS 란?

<p style="margin-top:45px;">HTML</p>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

CSS(Cascading Style Sheets)는 웹 페이지의 레이아웃 형식을 지정하는 데 사용됩니다. CSS를 사용하면 색상, 글꼴, 텍스트 크기, 요소 사이의 간격, 요소가 어떻게 배치되고 배치되는지, 어떤 배경 이미지나 배경색을 사용할지, 다양한 장치와 화면 크기에 따라 다른 디스플레이를 제어할 수 있습니다.

 

 

---

5. 속성(Attribute)이란?

 

이미지를 넣는 태그는 image를 줄인 img이다. 하지만 단순히 <img>만 코드에 입력하면 동작하지 않는다. 어떤 이미지를 불러올지에 대한 정보가 부족하기 때문이다. 이렇게 태그만으로 정보가 부족할 때 추가 되는 문법이 속성(Attribute)이다.

<img>에 대한 정보를 추가하기 위해 넣는 속성은 src인데 soure의 준말이다.

<img src="profile.png">

 

그런데 이미지를 넣으니 너무 크게 나온다. 어떻게 하면 이미지 크기를 조절할 수 있을까?

구글링을 습관화하자

 

• height 속성은 이미지의 높이(pixel)를 지정한다.
• Tip: 항상 이미지의 height 와 width 속성을 모두 지정하세요. height 와 width를 설정하면 페이지가 로드될 때 이미지에 필요한 공간이 예약됩니다. 이러한 속성이 없으면 브라우저는 이미지의 크기를 알 수 없으며 이미지 크기에 적절한 공간을 예약할 수 없습니다. 페이지 레이아웃은 이미지가 로드되는 동안 변경됩니다.
• Tip: height 와 width 속성을 가진 큰 이미지를 축소해서 사용하려면 페이지에서 작게 보일지라도 큰 이미지를 다운로드해야 합니다. 이런 일을 피하려면 페이지에서 사용하기 전에 프로그램을 사용해서 이미지 크기를 조정해야 합니다.

<img src="profile.png" width="20%">

 

그럼 필요한 태그를 찾는 방법, 이미지를 넣는 방법은 스스로 할 수 있게 되었다!

 

---

 

오늘까지 배운 것을 토대로 만들어 본 이력서

 

주석 처리 <!--, -->
Unordered List <ul>, </ul>
List(dot point) <li>, </li>
기울여쓰기 <em>, </em>

 

---

생활코딩 https://opentutorials.org/course