태그 tag가 뭔지 처음으로 알게 되다.

이번 강의는 태그 tag에 대해 배우는 강의였습니다.

제가 아는 태그 tag는 인스타그램이나 블로그 밑에  #태그라고 아는 게 전부인데요.

HTML에도 태그 tag라는 게 있군요. 저 진짜 처음 알았습니다!

 

이 태그라는 건 HTML을 지배하는 가장 중요한 문법이라는데요~

오늘은 대표적인 거 몇 가지를 배우기로 했습니다.

 

1.<strong>~</strong> 어떤 부분을 다른 부분보다 진하게 하는 것입니다.

2.<u>~</u> underline 영어로 밑줄이죠. 그래서 말그대로 어떤 부분 밑에 밑줄을 긋는 것입니다.

3.<h1>~</h1> headings 라고 제목을 나타내주는 것입니다. 더불어 줄도 바꾸어줍니다.

4. 줄을 바꾸어주는 기능인데요.

하나는 <br>

또 하나는 <p>~</p>

입니다.

 

그럼 이제 하나하나 실습을 해보도록 하겠습니다.

 

1.<strong>~</strong>

주어진 글을 진하게 하기 위해 웹브라우저와 웹페이지에 그냥 글을 써줍니다.

 

자~이제 제가 진하게 하고 싶은 부분에 <strong>(열리는 태그)~</strong>(닫히는 태그)을 입력합니다.

저는 찰리푸스의 여자친구가 되고 싶으니까 be my girlfrind 를 진하게 해보겠습니다.

 

웹페이지에 <strong>~</strong> 앞 뒤에 입력해서 ctrl + s 해서 저장을 하고 웹브라우저로 가서 reload를 하니까 be my grilfrind 부분이 진하게 나왔습니다.

우와~제가 코딩을 해봅니다!

 

자~ 다음!

두 번째~

2. <u>~</u> underline, 밑줄 긋기죠~

 

 

저의 장래희망은 찰리푸스의 여자친구이니까 이번에는 좀더 확실하게 강조하기 위해 핵심어인 girlfriend에 밑줄을 그어봤습니다.

제가 웹페이지로 나타낸 태그가 웹브라우저에 나타나는 것이 보이시죠?

 

3. <h>~</h> headings 로 제목을 나타낼 겁니다.

그러기 전 강사님께서 태그는 많기 때문에 스스로 공부하는 습관을 기르도록 태그찾는 사이트를 가르쳐주셨습니다.

 

w3schools라는 사이트인데요, 왼쪽 부분을 보면 알 수 있듯이 여러가지 태그 중 알고 싶은 것을 클릭하여 알아볼 수 있습니다. 이렇게 여러번 클릭해서 실습하다보면 제 걸로 되겠죠. 

아래는 웹페이지상에는 girlfriend 와 Baby would you ever want to be my girlfriend 부분이 다른 줄로 되어있지만 그 사이에 태그가 없어서 웹브라우저상에서는 그냥 한 줄로 나타나있는 걸 알 수 있습니다.

 

 

자 이제 girlfriend 부분을 <h1>~</h1>을 써서 제목기능을 하게 하면서 줄을 바꿔보겠습니다.

<h1>~</h1>에서 <h6>~</h6>의 기능은 같으나 뒤에 숫자가 커질수록 글자크기 작아집니다.

이렇게요.

 

 

웹페이지에는 줄을 바꾸지 않고 태그만 썼는데도 웹브라우저에는 글자크기가 변하면서 줄이 바껴져 나왔습니다. 

 

4. 이제 줄을 바꾸는 기능을 하는 태그 실습을 해보겠습니다.

먼저 날것의 자료를 준비합니다.

 

웹페이지에는 줄을 바꿔서 썼으나 웹브라우저에는 그냥 한 줄로 나타나고 있습니다.

<br>을 써서 줄을 바꿔 써보겠습니다. <br>태그는 단순히 줄을 바꿔주는 기능을 해서 열리는 부분만 있고 닫히는 부분은 없다고 합니다.

 

위에서 볼 수 있듯이 <br><br>두 개를 쓰면 두 줄을 뛰어쓸 수 있습니다.

 

이번에는 줄바꾸기의 또 다른 기능 

<p>~</P>기능을 써서 줄을 바꿔보겠습니다.

그 전에 강사님은 w3schools에서 html paragraph tag를 스스로 알아보도록 하였습니다.

 

여기서 더 자세히 알아보기 위해 Try it Yourself를 클릭해보았더니

 

 

웹페이지에 <p>~</p>태그를 쓰면 웹브라우저에 어떻게 나타나는지 자세히 예시를 들어주고 있습니다.

이번에는 제가 직접 실습을 해보았습니다.

 

(<br><br>을 하고 나서 <p>~</P>태그를 쓴거라 두 번째 부분과 세 번째 부분은 이미 두 줄이 뛰어져 있네요.)

 

이렇게 보면 <br> 이랑 <p>~</p> 태그의 기능이 다른 게 없어보이지만 후자가 정보의 가치면에서 더 의미가 있다고 합니다.

 

오늘은 9가지 정도의 태그를 실습해보았는데요~이 외에도 태그는 많잖아요.

그래서 스스로 계속해서 찾아가면서 보기로 했습니다.

이런 식으로요~

 

이 태그는 style="background-color: 색깔이름;" 이 공식인 거 같은데요~background가 들어가는 거처럼 배경색을 나타내는 거네요~

w3schools 로 수시로 들락날락하면서 차근차근 공부해보겠습니다.

 

그나저나 찰리푸스는 얼굴도 잘생기고 노래도 잘하고 노래도 잘만들고 좋네요 ㅎㅎㅎ

나 뉴질랜드 가면 뉴질랜드에도 공연 와주세요~~~

사랑해요 찰리푸스~!!!

 

I love Charlie Puth~!!!

I have a crush on you, Charlie Puth~!!!