[생활코딩] html 강의 정리(1)

생활코딩 html&Internet 강의를 들으면서 배운 내용을 여기에 차근차근 정리해 보겠다.

 

<해당 강의 링크>

https://opentutorials.org/course/3084

WEB1 - HTML & Internet - 생활코딩

---

html : hypertext markup language

 

생활코딩에서는 atom editor를 사용하였는데, 나는 추후에 javaScript 등 다른 언어도 같이 공부할 것을 대비해

vscode를 사용해 주었다.

 

Extension에서 open in browser를 설치해 준 후 

html 코드를 짠 화면 우클릭> open in default browser

내가 짠 html코드를 반영한 웹페이지가 실행된다.

 

또한, 우리가 평소에 이용하는 웹 페이지들의 html소스를 보고 싶다면, 

페이지 중 빈 곳 아무데나 우클릭>페이지 소스 보기

해당 페이지의 html 소스를 구경할 수 있다.

 

 

● Tag

<> 를 tag라 하며, 열리는 태그는 <>로, 닫히는 태그는 </>형태로 표시

 

ex1. 글자색 진하게 표시

<strong>Your Text Content</strong>

ex2. 밑줄

<u>your underline context</u>

ex3. 제목(크기가 큰 순으로 1~6)

<h1>what is h1-h6 tag?</h1>
<h2>what is h1-h6 tag?</h2>
<h3>what is h1-h6 tag?</h3>
<h4>what is h1-h6 tag?</h4>
<h5>what is h1-h6 tag?</h5>
<h6>what is h1-h6 tag?</h6>

<해당 태그 실행화면>

 

ex4. 줄바꿈

얘는 다른 태그와 달리 사용하고자 하는 문장 앞부분에 한번만 사용하면 된다. 닫힌태그를 뒤에 붙여줄 필요가 없다.

단순 줄바꿈 기능이기 때문

<br> next line

ex5. 단락 표현

얘는 "단락" 자체를 표현해주는 태그이기 때문에 단락의 시작에 열린태그, 단락의 끝에 닫힌태그를 붙여주어야 한다.

<p>paragraph_</p>

 

● img를 웹페이지에 추가하기

<img src="img의 주소" width="해당사진 크기%"> <!--attribute의 위치는 상관없다.-->

 

● 목차 지정

<ul> <!--ul태그(unordered list) 는 같은 성격의 목차들을 하나로 묶어주는 역할-->
    <li>1.HTML</li> <!--list 태그-목차지정-->
    <li>2. CSS</li>
    <li>3. JavaScript</li>
</ul>
<ul>
    <li>soyw96</li>
    <li>kirby</li>
    <li>studying_html</li>

 <ul></ul>을 사용 시, 리스트의 목차를 일일이 관리해줘야 한다는 단점이 있다.

따라서 자동으로 목차 숫자를 지정해주고 싶다면 ul태그 대신 <ol></ol>을 사용해주면 된다.