[HTML/CSS] 230312 학습일기

https://www.udemy.com/course/so_easy_html_css/

유데미 <너무 쉬운 HTML/CSS 입문> 에서 학습한 내용을 정리하였다.

HTML은 정말 처음 배워본다. 화이팅하자.

인터넷은 TCP/IP 프로토콜을 이용.

인터넷에서는 사용 목적에 따라 다양한 프로토콜을 이용.

웹은 HTTP 프로토콜 이용.

이메일은 SMTP 같은 프로토콜을 이용.

파일 송수신 서비스에는 FTP 전용 프로토콜을 이용

우리가 웹브라우저의 주소창에 www.google.com을 입력하면

내부적으로 어떤 프로토콜이 www.google.com을 ip주소와 변환해줌.

그러면 이제 어떤 서버에 접속하게 됨. 이 서버가 웹서버.

이 웹서버가 우리가 접속한 결과로서 우리가 보는 화면을 띄워줌.

웹은 웹 브라우저로 웹 서버에 저복하고 결과로 HTML을 받아 표시한다.

웹 어플리케이션은 설치가 필요 없고 유지/보수가 편하지만 하드웨어를 직접 제어하기가 힘들다.

사실 이게 뭔말인지 잘 이해는 안된다.

https://nitro04.blogspot.com/2020/01/web-web-application-web-site.html

[ Web ] 웹 애플리케이션? 웹 사이트?(Web Application? Web Site?)

nitro04.blogspot.com

이 블로그에 따르면 우리가 흔히 아는 웹 사이트와 웹 어플리케이션의 차이는

내부의 프로그래밍 언어로 작성되어진 특수한 애플리케이션(혹은 프로그램)이 있느냐 없느냐이다.

있는 쪽이 웹 어플리케이션이다.

오늘날 우리가 흔히 알고있는 모든 웹사이트는 모두 웹 어플리케이션이라고 생각하면 쉬울 것 같다.

즉, 현재는 웹사이트와 웹 어플리케이션의 경계가 허물어졌다.

Visual studio code는 예전에 파이썬 할 때 이미 깔았다.

바탕화면에 HTML_CSS라는 폴더를 생성했고

이 상태에서 New file을 클릭해준다.

파이썬 py파일을 만들 때에는 다른 과정을 거쳐서 했어서 이렇게 시작하는 건 처음이다. 아닌가? 이 과정을 거쳤던가?

모르겠다 ㅎ

New file을 누르면

이렇게 뜬다.

저 Text file을 눌러준다.

그러면 이렇게 Language를 설정하라고 파란색 글씨가 뜬다.

Select a language를 클릭해서 HTML을 검색하고 눌러주면 된다.

그러면 아래와 같이 창의 아이콘 모양이 바뀐다.

그리고 이렇게 저장도 해주자.

HTML의 확장자는 html이다.

실제로 HTML 파일을 실행하면 웹 브라우저가 실행된다.

한 번 해보자.

오.. 진짜 웹 브라우저가 실행이 될 것 같다.

근데 난 크롬이 더 좋아서

연결프로그램을 크롬으로 바꿔서 실행해보았다.

파일에 아무것도 없어서 그런지 아~~~무것도 안 뜬다.

그래도 정말 크롬 브라우저가 실행이 된다.

신기하다.

HTML이란 웹 서버에 있어야 하는 파일이다.

웹 브라우저에 주소를 쳐놓고 접속을 하게 되면 웹서버에 특정 HTML 파일을 요청하는 것.

그러면 그 웹서버는 HTML 파일을 우리에게 넘겨주고 우리의 PC에 있는 웹 브라우저가 HTML 내용을 해석해서 우리 눈에 보기 좋게 보여줌.

근데 이 강의에서는 서버가 필요없는 실습을 진행할 예정이라고 한다.

본격적으로 코드를 작성해보자.

시작은

<!DOCTYPE html>

자동완성이 아래 뜨면 enter이나 tab 키를 눌러주면 바로 입력이 된다.

속성을 적어주자.

<!DOCTYPE html>
<html   lang="en"></html>

영어로 설정하는 것 같다.

여기까지 작성하고

을 눌러주면

뒤에

</html>

가 자동으로 입력된다.

이렇게 시작태그, 종료태그다.

시작태그와 종료태그 사이에서 엔터를 쳐주면

이렇게 tab한 상태로 커서가 움직이는데 여기 안에 내용을 적어주면 되는 구조.

10.

<!DOCTYPE html>
<html   lang="en">
<head>
    <title>Welcome</title>
</head>
<body>
    <h1>Hello HTML!</h1>
    <p>Hi, this is my first HTML document.</p>
</body>
</html>

이렇게 HTML 문서를 작성해보았다.

이걸 저장해보고 실행해보자.

오 대박이다.

신기하다.

내가 적은 코드로 미루어 짐작해보건데(내 뇌피셜)

아래와 같이 되는 것 같다.

저 tab 부분이 head.

홈페이지 메인 부분이 body.

body 에서 제목 관련한 글씨는 H1.

body에서 본문 관련한 글씨는 p.

약간 노션의 그 큰제목, 중간제목, 작은 제목 같은 그런건가?

11.

HTML의 구조에 대해 알아보자.

HTML은 tag, element, attribute로 구성되어있다.

(1) Tag

<h1>
</h1>

-HTML element의 종류를 구별할 때 사용.

- <시작태그>와 </종료태그>

(2) Element

- <시작태그>와 </종료태그> 안에 있는 내용을 포함한 객체

- 나중에 Javascript를 배우면 그 문서의 element에 접근하여 제어를 할 수 있게 됨.

(3) Attribute

- 태그의 동작을 제어하기 위해 <시작태그> 안에 사용되는 특수 용어

12.

아까 작성한 Hello HTML을 코드별로 살펴보자.

전체 코드는 다음과 같다.

<!DOCTYPE html>
<html   lang="en">
<head>
    <title>Welcome</title>
</head>
<body>
    <h1>Hello HTML!</h1>
    <p>Hi, this is my first HTML document.</p>
</body>
</html>

<!DOCTYPE html>

=> HTML 문서임을 표시한다.

공식처럼 붙인다고 생각하면 됨.

앞으로 나오는 모든 내용들이 다 HTML 5 문서라는 의미.

<html   lang="en">

</html>

=> 문서 시작, 사용된 언어가 영어임.

모든 HTML 문서는 <html> 태그로 시작해서 </html> 태그로 끝나도록 되어있음.

lang="en" 는 이 HTML 문서에서 사용되는 주언어가 영어라는 의미.

웹브라우저로 어느 사이트에 접속했는데 영어로 되어있는 웹페이지를 한글로 번역할까요? 라고 물으며 번역을 해준다면 이 속성값(lang="en" ) 덕분임.

<head>
    <title>Welcome</title>
</head>

=> 페이지 전역 설정

<title>Welcome</title>

=>브라우저 타이틀

<body>
    <h1>Hello HTML!</h1>
    <p>Hi, this is my first HTML document.</p>
</body>

=> 페이지 실제 내용

<body>와 </body> 사이에 모든 본 내용이 다 들어감.

<h1>Hello HTML!</h1>

=>메인 제목

h는 heading의 약자.

<p>Hi, this is my first HTML document.</p>

=> 내용 단락

글자를 단락으로 묶을 때 p를 사용하게 됨.

p는 paragraph의 약자.

13.

<!DOCTYPE html>
<html   lang="en">
<head>
    <title>Welcome</title>
</head>
<body>
    <h1>Hello HTML!</h1>
    <p>Hi, this is my first HTML document.</p>
</body>
</html>

여기에서 body의 element는 2개가 되는 셈이다.

14.

VSCode에서 !를 누르고 tab을 눌렀더니

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

이렇게 HTML의 기본적인 골격를 만들어준다.

오..

이제 body 안에서의 텍스트를 다뤄보자.

15. 제목 Heading

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

- 페이지의 타이틀을 표시.

- 헤드라인의 중요도에 따라 h1부터 h6까지 여섯 단계로 구분이 됨.

h1이 가장 중요한 내용.

- 검색 엔진은 <h1> 태그의 내용을 해당 페이지의 중심 제목으로 인식.

따라서 우리가 h1 태그를 잘 만들어 놓으면 향후에 우리가 만든 페이지가 검색에 노출될 때 굉장히 유리하게 작용할 수 있음.

- 홈페이지에서는 아래와 같이 실행됨.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
</body>
</html>

16. 단락 Paragraph

<p>Paragraph 1</p>
<p>This
    is
    paragraph 2
</p>

- 표시할 글의 한 토막(단락)을 표시.

- 단락 시작 시 줄이 바뀌어지나, 내용에서 줄을 바꿔도 브라우저는 줄바꿈을 하지 않음.

(이거는 파이썬이나 기타 언어에서 /n을 입력하지 않으면 내용에서 줄을 바꿔도 실행창에서 줄바꿈이 안 되는 것과 비슷한 듯)

- 근데 내용에서 줄을 바꾸면 띄어쓰기가 자동으로 됨.

- 홈페이지에서는 아래와 같이 실행됨.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Paragraph 1</p>
    <p>This
        is
        paragraph 2</p>

</body>
</html>

17. 줄바꿈 Line Break

<p>Paragraph 1</p>
<p>This <br>
    is <br>
    paragraph 2 <br>
</p>

-브라우저 화면 표시 시 줄 바꿈

-시작태그만 있고, 종료태그는 없음.

-br은 break의 약자인 듯.

- 홈페이지에서는 아래와 같이 실행됨.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Paragraph 1</p>
    <p>This <br>
        is <br>
        paragraph 2
    </p>
</body>
</html>

18. 가로 선 Horizontal Rule

<h1>Heading</h1>
<hr>
<p>This
    is
    main content.
</p>

-수평으로 가로선을 넣어 위, 아래 내용을 구분한다.

-시작 태그만 있고 종료 태그는 없음.

- 일반적으로 Heading(제목)을 쓰고 가로 선을 넣고 본 내용을 넣어서 구성함.

- 홈페이지에서는 아래와 같이 실행됨.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Heading</h1>
    <hr>
    <p>This
        is
        main content.
    </p>
</body>
</html>

19. 강조 Boldface

<p>This is an <b>important</b> message. made by b</p>
<p>This is an
    <strong>important</strong> message. made by strong</p>

- 텍스트의 특정 부분을 가조

- 와 둘다 똑같이 강조의 효과를 줌.

- 와 은 동일하게 보여지나

은 보다 의미적으로 강조의 의미를 가짐. 보다 권장된다.

- 웹페이지에서는 다음과 같이 실행됨

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>This is an <b>important</b> message. made by b</p>
    <p>This is an
        <strong>important</strong> message. made by strong</p>
</body>
</html>

20. 텍스트 기울이기 Italic

    <p><i>HTML:</i> Hyper Text Markup Language</p>
    <p>Please <em>read this</em> before start.</p>

- 텍스트를 이탤릭체로 기울여 표시

- 도 글자를 기울여서 표시하나, 그 의미는 강조(emphasize)이고 시각 장애인용 웹에서는 강조해서 읽음.-> 웹접근성

와 웹페이지 겉으로 표시되는 것과는 다르나 속은 완전히 다름.

- 웹페이지에서는 다음과 같이 실행됨

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p><i>HTML:</i> Hyper Text Markup Language</p>
    <p>Please <em>read this</em> before start.</p>
</body>
</html>

21. 공백 Non-breaking Space

    <p>My name is              John.</p>
    <p>My name is&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;John.</p>

- HTML 코드에서의 공백(space)은 하나만 허용됨

- 는 연속적으로 이용 가능

- HTML 코드에서 특수기호는 & 문자로 시작하고 ;(세미콜론) 으로 끝나게 됨.

- 웹페이지에서는 다음과 같이 실행됨

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>My name is              John.</p>
    <p>My name is&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;John.</p>
</body>
</html>

22. 부등호 기호

    <p>9 &lt; 10</p>
    <p>3 &gt; 1</p>

    <p>20 &le; 20</p>
    <p>99 &ge; 99</p>

-'<' or '>'는 태그에 이용되므로 문자 자체를 표시하려면 특수한 방법이 필요

- lt:less- than

gt: greater-than

- le: less than or equal to

ge: greater than or equal to

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>9 &lt; 10</p>
    <p>3 &gt; 1</p>

    <p>20 &le; 20</p>
    <p>99 &ge; 99</p>
</body>
</html>

23.

이런 결과가 나오도록 만들어보았다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>인터넷</h1>
    <hr>
    <i>명사</i><br>
    <p>1. 전 세계의 컴퓨터가 서로 연결되어 정보를 교환할 수 있는, 하나의 거대한 컴퓨터 통신망.</p>
    <hr>
    <h2>뜻 풀이</h2>
    <p><strong>답글</strong> 答글 [<i>답끌</i>]</p> 
    <p>1. 명사 매체 <i>인터넷</i>에 오른 질문에 대하여 답변하는 글.</p>
    <p>2. 명사 매체 <i>인터넷</i>에 오른 원문에 대하여 짤막하게 답하여 올리는 글.</p>
</body>
</html>

저작자표시

'Front-End > HTML_CSS' 카테고리의 다른 글

[HTML/CSS] 220318 학습일기 (0)	2023.03.19
[HTML/CSS] 220317 학습일기 (0)	2023.03.18
[HTML/CSS] 230316 학습일기 (0)	2023.03.17
[HTML/CSS]220314 학습일기 (0)	2023.03.15
[HTML/CSS] 220313 학습일기 (0)	2023.03.14

Learning & Running

[HTML/CSS] 230312 학습일기

'Front-End > HTML_CSS' 카테고리의 다른 글

티스토리툴바

[HTML/CSS] 230312 학습일기

'Front-End > HTML_CSS' 카테고리의 다른 글

'Front-End/HTML_CSS' Related Articles

티스토리툴바