2022-02-27 HTML_1

HTML 배우기

시작하기 앞서서...

노마드 코더님이 '개발자의 인생을 바꾸는 언어'라는 내용으로 영상을 올리셨다.

 

가장 중요한 언어는 다름 아닌 영어라고 한다.

 

영어를 공부의 목적보단 수단으로 삼아서 익히라고 한다.

 

그래서 되도록 개발 공부를 할 때는 영어를 이용해서 공부하고자 한다.

---

 

HTML

HTML은 프로그래밍 언어라기보단 웹페이지의 구조를 지정하는 마크업 언어의 일종이다.

 

html은 일련의 html elements로 구성된다.

 

elements는 tag를 붙여 콘텐츠를 원하는 방식으로 구성할 수 있다.

 

<opening tag> Content </closing tag>

the anatomy of element is consist of the opening tag, content, the closing tag.

 

Tags in HTML art not case-sensitive.

 

It doesn't matter whether it's written in uppercase or lowercase.

 

If possible, use lowercase for consistensy and readability.

 

---

 

Paragraph

 

 <p>는 paragraph라는 뜻이다.

<p> paragraph you want to text. </p>

---

 

Italic text formatting

<em> this is my text!! </em>

this is my text!!

 

 

---

 

Nesting elements

 

Elements can be placed within other elements This is called nesting.

<p> My cat is <strong>very</strong> grumpy.</p>

 

The tags have to open and close in a way that they are inside or outside one another.

---

 

Block versus inline elements

 

• Block elements : For Structural elements like headings, paragraphs, lists, navigation menus, footers, etc. Block-level elements 사용 시 시작과 끝에 자동 개행. Block-level elemen는 inline element에 nesting할 수 없다.
• Inline elements : 사용 시 개행하지 않음. Block-elements 내부에서 contents의 일부를 감싼다. hyperlink, italic, strong...가 여기에 포함된다.

 

<em>inline</em><em>개행 안함</em>

<p>block</p><p>개행함</p>

inline개행 안 함
block
개행함

---

 

Empty elements

 

Not all elements follow the pattern of an opening tag, content, and a closing tag.

 

tag 하나만 사용하는 경우가 있다.

 

Empty element는 Insert/embed something in the document 하기 위해 사용되는 경우가 많다.

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

이미지를 첨부하는 경우에도 Empty elements를 사용한다.

---

기숙사 입사 때문에 정신이 없다.

 

피곤하다. 자러 가야겠다. z.z...z