[생활코딩] WEB 1 HTML & Internet 06강 ~ 11강

Namung's Sea·2021년 11월 1일

생활코딩

목록 보기

2/5

06강. 기본 문법 - 태그

에디터에서

Hypertext Markup Language (HTML) is the standard Markup

language for creating web pages and web applicaions.

을 입력해서 인터넷 브라우저를 새로고침해서 보면 글자가 그대로 입력되어 있는 것을 확인할 수 있다.

여기서 필요한 것.

글자를 굵게

<strong>creating web pages</strong>

밑줄 긋기

<strong>creating <u>web</u> pages</strong>

위 글의 <>은 "태그"이다. 태그를 이용하면 내가 원하는 대로 글 보이도록 표현할 수 있다.

<> 여는 태그

</> 닫는 태그

가 한 쌍을 이루며, 2. 밑줄 긋기에서 보았듯이 태그는 중첩하여 사용가능하다.

↑ 내가 한 결과물.

Q. 한글이 깨진다면?

<meta charset="utf-8">

를 추가하기. 우리가 파일을 저장하면 UTF-8로 저장됨. 그럼 웹브라우저에게 UTF-8로 페이지를 열라고 알려줘야 함. 그걸 브라우저에게 알려주는 코드가 <meta charset="utf-8">

07강. 혁명적인 변화

모든 페이지에는 "소스(source)"가 있다.
페이지 소스 확인은 어떻게?
각 페이지의 화면에서 우클릭 > 페이지 소스 보기 클릭으로 확인 가능하다.

↑ 위 사진은 네이버 메인 페이지의 소스.

각각의 태그가 어떻게 쓰이는지 궁금하다면

포털사이트에 "html oo tag"라고 검색하면 뜻이 나옴.

ex) html h1 tag 검색하기

이번 시간에 알게 된 것.

-> h1 ~ h6 tag는 head. 즉, 제목을 붙이는 코드.
1이 제일 굵고 6으로 갈수록 굵기가 가늘어진다.
↑ Atom에서 작성한 코드

↑ 위 코드 작성 시 웹페이지 화면에서 보이는 것.

위 사진은 오늘 수업에서 알게 된 코드를 활용한 웹 페이지이다.

태그란 이런 웹페이지를 만들어 주는 마법주문과 같다.
공간과 시간을 아껴주고 알고자 하는 것에 손쉽게 다가가게 만들어 주는 주문.
오늘의 공부 내용이 coding의 본격적인 시작이다.

08강. 통계에 기반한 학습

html tag를 통계내어 가장 많이 사용하는 tag를 확인하는 웹 사이트
-> the average web page

↑ 해당 사이트에 방문하면 위 사진과 같이 web page tag의 사용 빈도에 따른 rank를 확인할 수 있다.

통계를 기반으로 무엇을 우선적으로 공부할지 파악하자.

09강. 줄바꿈

강의로 학습하기 이전에 html new line tag 검색하여 줄바꿈 태그에 대해 찾아보기!

 은 강제 줄바꿈을 설정하는 태그.
때문에 닫는 태그가 따로 존재하지 않는다. 줄바꿈을 원하는 문장 앞에서 사용하면 된다.

<bar>를 알아보았으니 이제 html paragraph tag를 검색해보자.

는 문단을 설정하는 태그.
문단의 범위를 설정하는 것이기 때문에 여는 태그와 닫는 태그가 존재함.
문단을 설정함으로써 문단과 문단 사이에 정해진 범위만큼 여백이 존재하여
줄바꿈으로 표현이 가능하다.

는  보다 code의 정보적인 측면에서 유리한 입지를 가진다.
왜냐하면 는 문단의 범위를 보여주는 반면  은 강제 줄바꿈 설정의 기능만 하기 때문이다.

반면  은 보다 시각적인 측면에서 유리하다.  은 여러 번 입력하는 것으로 여백을 자유롭게 설정할 수 있지만 는 문단 설정으로 정해진 여백의 크기만 사용할 수 있기 때문이다.

다만 CSS를 이용하면  태그에서도 자유롭게 여백 설정이 가능하다.

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

위 코드가  태그 속에 CSS를 사용한 경우인데 ' 태그 위쪽의 여백을 40픽셀로 한다 ' 정도로 해석이 가능하다. 해당 코드를 입력하면 원하는 픽셀만큼 공간을 조절할 수 있다.

10강. HTML이 중요한 이유

웹페이지를 구성할 때 우리는 무언가 정보를 전달하기 위해 구성한다.

그 안에 있는 source의 각 tag들은 각자의 역할이 있고 이것을 정확하게 활용하는 것이 훗날 정보를 그대로 보존하고 공유하는 역할을 제대로 해낼 수 있게 한다.

coding이라는 단어를 강조하기 위해서,
일반인들은 coding이라는 글자의 크기를 키우고 bold 버튼을 이용해 굵게 설정할 것이다.

하지만 지식인은 format의 기능을 이용하여 coding이라는 단어가 제목의 역할을 수행할 수 있도록 설정할 것이다.

이들의 code를 뜯어보면 다음과 같다.

지식인의 코드 -> <h3>coding</h3>

지식인의 코드는 coding이 제목을 뜻하는 <h3> 태그를 이용했음을 확인할 수 있다.

일반인의 코드 -> coding

일반인의 코드에선 coding이 진하게 표시되고 22픽셀의 크기를 지닌다는 시각적인 정보만을 확인할 수 있다.

이처럼 해당 코드를 각자의 의미에 맞게 사용하는 것이 의사소통이란 비즈니스적인 측면에서 유용하며 모두에게 소외 없이 사용되어야 한다는 접근성, 즉 휴머니즘적인 측면에서 또한 유용하다.

11강. 최후의 문법 속성과 img

이미지를 넣는 태그 = <img>
source의 약자 src

사용법: <img src="이미지주소(파일명)">

이미지 넣는 태그를 알았으니 이미지를 가져와보자.

원하는 이미지를 h1.html 파일을 저장한 폴더에 다운로드한 다음, atom 프로그램 좌측 편에 해당 이미지를 클릭해보자. 이후 우클릭 -> rename을 통해 파일 이름 재설정이 가능하다. 나는 coding.jpg라고 이름을 바꾸었다.

이제 이미지를 넣어보자.

해당 이미지를 넣는 코드는 다음과 같다.

<img src="coding.jpg">

해당 코드를 h1.html 파일에 넣고 웹사이트를 새로고침하면 이미지가 나오긴 하지만 크기가 굉장히 큰 걸 확인할 수 있다. 이 크기 조절을 위해 우리는 태그 속에서 width를 설정해주어야 한다.

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

width="100%"를 넣으면 이미지가 창 화면에 딱 맞는 크기로 설정된다.

크기 조정을 원하면 처음에 450정도로 설정하여 조금씩 조절해주면 좋다. 나는 600으로 설정하였다.

<img src="coding.jpg" width="600">

<h1>HTML</h1>
<p>Hypertext Markup Language (HTML) is the standard markup language for
<strong>creating <u>web</u> pages</strong> and web applications.
Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
<img src="coding.jpg" width="600">
<p style="margin-top:40px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.</p>