코딩 낙서

<ol>

order list 순서가 있는 리스트입니다.

밑에 <li>로 내부 리스트를 열거하면됩니다.

See the Pen Untitled by bongEdalE (@bongEdalE) on CodePen.

<ul>

unorder list 순서가 없는 리스트입니다. 위에 <ol> 과는 다르게

순서없이 ●로 열거되어있습니다

똑같이 <li> 태그로 리스트를 만들어야합니다

See the Pen Untitled by bongEdalE (@bongEdalE) on CodePen.

<img>

이미지 삽입 src 를 이용해 파일 경로를 입력해주면 됩니다.

개죽이 사진을 준비했습니다.

  <p>개죽이에요</p>
  <img src="./개죽이.png">

<a>

하이퍼링크를 거는 태그입니다. href로 주소를 명시해주면 이동할수있습니다.

<p>구글로 드가자</p>
<a href="www.google.com">여기를 누르시오</a>

이번엔 글자관련 태그를 알아보겠습니다

<b>

<b> 태그는 주로 텍스트를 강조하는 역할을 합니다. <b></b> 사이에 넣어주면 원하는 텍스트가 bold 하게 나옵니다

See the Pen Untitled by bongEdalE (@bongEdalE) on CodePen.

<strong>

<strong> 태그도 강조하는 역할을합니다 <b> 태그와 비슷한 역할을합니다

See the Pen Untitled by bongEdalE (@bongEdalE) on CodePen.

<i>

<i> 태그는 글꼴에 기울임을 추가해줍니다

See the Pen Untitled by bongEdalE (@bongEdalE) on CodePen.

<em>

<em>태그도 <i> 태그와 동일하게 글자를 기울여서 보이게 해줍니다.

See the Pen Untitled by bongEdalE (@bongEdalE) on CodePen.

<s>

<s>태그는 나무위키에서,,,많이 보던것 처럼 취소선을 만들수있습니다.

See the Pen Untitled by bongEdalE (@bongEdalE) on CodePen.

<h1,h2,h3...h6>

글자 크기와 관련된 태그입니다. 주로 제목을 적거나 할때이용됩니다.

See the Pen Untitled by bongEdalE (@bongEdalE) on CodePen.

<p>

<p>태그는 주로 문단을 표현할때 이용합니다 아래 코드처럼 한칸띄고 입력하능합니다

See the Pen Untitled by bongEdalE (@bongEdalE) on CodePen.

<br>

<br>태그는 개행이라고 생각하시면 편합니다 줄바꿈을 해줍니다.

See the Pen Untitled by bongEdalE (@bongEdalE) on CodePen.

<hr>

<hr>태그는 수평선을 그어줍니다 

See the Pen Untitled by bongEdalE (@bongEdalE) on CodePen.

실제 실행은 vs코드에서 진행하였습니다.

옆 디렉토리 우측클릭후 생성 확장자명을 .html로 하면 자동적으로 완성됩니다.

shift + enter를 입력하게 되면 자동적완성이 나오게되는데 엔터를 눌러줍시다.

자동적으로 완성이되었습니다. 이제 저희는 저희만의 페이지를,, 만들었습니다..

vs코드에서 오픈한 디렉토리로 이동하게되면 다음과같이 test.html파일이 만들어진걸 볼수있습니다.

클릭해서 실행하게되면

화면이 잘 나오는게 보이죠?

빈화면이 나오면 정상입니다. 

vs코드로 돌아가서 보면

실질적으로 들어가있는게 보이죠?

다음엔 다른 태그들을 이용해 안에 내용을 채워보겠습니다.

HTML은 Hypertext Markup Language 로

웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다.

여기서 Hypertext란

비순차적인 검색이 가능하도록 제공되는 텍스트입니다.

특정 단어 및 사진이 다른 데이터에 연결이 되어있어

사용자가 관련문서를 넘나들며 정보를 얻을수 있게하는것입니다.

쉽게말해 하이퍼링크 정도로 생각하시면 될거같습니다.

그럼 비슷하게 생긴 HTTP는 무엇일까요?

Hypertext Transfer Protocol

로 위에 이야기한 Hypertext 로 이루어진 HTML을 주고받기위한

통신규약이라고 생각하시면 되겠습니다.

HTML은 콘텐츠의 구조를 정의하는 마크업 언어 입니다.

HTML 은 태그로 감싸 그 기능을 수행할수있습니다.

Hello
<p>HelloL<p>

밑에 'Hello' 가 <p> 태그로 감싸진것이 보이시나요?

이처럼 HTML 언어에서 화면에 표시하기 위에선 꼭 태그로 감싸야합니다,

또 HTML은 트리구조를 가지고있습니다.

이런느낌으로 하나 하나의 태그를 노드라고하는데

위에 노드에서 아래노드로 가지가 뻗는 트리구조를 가지고있습니다