생활코딩으로 HTML 공부 시작

Hanachoi 2022. 4. 22. 22:39

유투브에서 어떤 강의가 좋은지는 계속적으로 찾아보면서 전반적인 web front-end를 공부할 생각이다. 공부하면서 얻게 된 지식과 내용은 티스토리에 정리를 하면서 계속해보자.
공부하면서 참고하면 좋을만한 사이트나 책 등의 내용도 계속적으로 적어나가기
오늘 생활코딩 web1-8강에서는 공부를 할 때는 가장 많이 쓰이는 태그를 위주로 통계학적으로 공부하면 좋다는 말씀을 해주셨다.
https://www.advancedwebranking.com/seo/html-study/

HTML Study

Overview This HTML usage data comes from 11.3 million index pages gathered from top twenty Google results, for about 30 million keywords - chosen by keyword volume. To learn more about this data, visit the FAQ section. Total 11,264,652 pages Doctype The

www.advancedwebranking.com

많이 쓰이는 HTML태그에 대한 통계가 나와있는 사이트.
강의에서는 스스로의 검색을 통해 공부하며 알아가는 방법을 추천해주신다. 추천 검색어도 알려주시니 기록해두었다가 필요할 때 검색해서 써보자.

# HTML new line tag

어떤 글을 썼을때 그냥 에디터에 써 넣으면 띄어쓰기를 했더라도 웹페이지에선 반영이 안된다. 그래서 태그를 넣어줘야 함
이 태그를 써주면 새로운 줄을 표현 할 수 있음. 하지만 앞서 배운 <h>태그와는 다르게 문장을 감싸 줄 필요는 없고 그냥 줄을 바꾸고 싶은 곳에서 써주면 됨. 두 줄 띄우고 싶으면 <br><br>이런식으로 여러 번 써주면 됨

<br>

#HTML paragraph tag

문장을 구성하고 싶을 때는 이 태그 사용. 열리고 닫히는 태그로 어디까지가 문단인지 써줘야 함
<br>태그는 그냥 줄 바꿈이지만 <p>태그는 단락으로서 정보를 확실히 보여주기 때문에 이 태그가 좀 더 좋다
하지만 <br>은 내가 원하는 만큼 줄을 바꿀 수 있지만 <p>는 정해진 만큼만 벌어지기 때문에 시각적인 자유도는 떨어지는 편, 하지만 CSS로 이 부분은 조정가능하다

<p></p>

아래 태그처럼 CSS 요소를 넣어서 내가 원하는 만큼 공간 조정 가능

<p style="margin-top:45px;"></p>

#HTML이 중요한 이유

"코딩"이라는 내용을 검색해본다고 치자. 이걸 <h1>코드로 감싸서 정보로 만든 것과 그냥 <style>적으로 굵은 글씨, 폰트크기를 맞춰서 만든 것, 둘중에 어느 것이 더 검색엔진에서 잘 노출 될까?
당연히 컴퓨터는 정보로서 "코딩"을 나타내는 쪽을 더 많이 노출 시킬 것이다. 다른 것은 그냥 시각적으로만 보이는 내용이기 때문이다.
여기서 중요한 포인트는 HTML은 웹페이지의 정보를 나타내는 수단이라는 점, 웹페이지를 만들다 보면 더욱 더 화려하게 페이지를 장식하고 싶은 욕심이 들겠지만, 본질적으로 가장 중요한건 내가 어떤 정보를 보여줄 수 있는지다!
페이지를 예쁘게 보이려고 포토샵으로 내용을 작성해 올린다면, 이건 단순 이미지업로드라 10년 뒤에는 노출이 전혀 안될 수도 있다.
html의 정확한 태그를 이해하고 잘 사용하는게 중요!

#image를 넣는 방법

사진을 넣고 싶다면 <img>태그를 이용할 수 있겠지, 하지만 당연히 이것만 써 넣는다고 이미지가 뚝딱 나타나진 않는다. 그래서 개발자들이 또 다른 요소를 만들어 넣은게 src(source)이다.
태그가 태그의 이름만으로는 정보가 부족할 때 내가 더 첨가해서 넣을 수 있는것이지! attribute의 순서는 상관이 없다.
강의에서는 이미지를 따로 저장해서 파일에 넣고 아톰에서 떴을때 이미지의 이름을 넣었는데, 스파르타 코딩에서 배운 걸로 치면 그냥 "이미지주소복사"를 오른쪽 클릭해서 그 링크를 넣어도 이미지는 떴다.

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

Unsplash는 고화질의 사진을 저작권 문제 없이 사용할 수 있도록 만든 공공재같은 사이트

Beautiful Free Images & Pictures | Unsplash

Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

unsplash.com

#Parent-child relationships and lists

리스트를 만들 때 쓰는 태그

<li></li>

만약 리스트가 여러개라면? 리스트를 나눠주고 싶을 것이다. 그때 쓰는 부모태그가 <ul></ul>
<li>태그는 반드시 <ul>을 가지고 있고 vice versa

<ul>
	<li>1.html</li>
	<li>2.css</li>
	<li>3.javascript</li>
</ul>

근데 만약 위에서 1.html을 빼버린다면? 2.css에서 2가 1로 다시 바뀌어야 함. 이때 일일히 다 바꿀 수 없으니 쓸 수 있는 태그는 <ul>대신 <ol></ol>
<ol> : ordered list
<ul> : unordered list

#table 만들기

<table>태그는 <table>, <tr>, <td> 가 항상 함께 다닌다

<table>
	<tr>
    	<td></td>
        <td></td>
    </tr>
</table>

#웹페이지 제목

이렇게 브라우저에 제목을 넣을 때 쓰는 태그. 이걸로 문장을 감싸주면 제목을 정할 수 있다.
검색엔진에서 이 페이지를 알려줄 수 있는 중요한 요소

<title></title>

#utf-8방식으로 저장한 파일

우리는 아톰에서 utf-8 방식을 사용하고 있음. 브라우저가 utf-8로 열어줘야 깨지는 문자없이 표현할 수 있다. 웹브라우저에게 utf-8방식을 쓰도록 만드는 태그는 <meta>

<meta charset="utf-8">

charset은 character + set (문자 + 규칙)
<meta>태그는 아래의 본문이 utf-8로 구성되어 있다는것을 설명해주는 것

#웹페이지의 구조

본문은 <body></body>태그로 묶는다
바디를 설명하는 태그는 <head></head>로 묶는다.
모든 태그는 <head>와<body>태그 둘 중 하나에 꼭 놓이게 되어 있음
이 위에 최고위에 놓이는 태그는<html></html>
그리고 이 <html>위에는 관용적으로 <!doctype html>이라고 써주면 된다.
아래가 가장 기본적인 구조!!

 <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title></title>
    </head>
    <body>
      
    </body>
  </html>