HTML_생활코딩 : 태그의 정의, 속성, 목차태그, 표태그

생활코딩 학습 내용 복습_1일차_1

 

- 날짜 : 2022.07.19.화

- 학습내용 : WEB 1-1 ~ WEB1-12

 

1. 기본문법-태그(tag)

※  태그란?

태그는 비유이자 은유이다.

HTML과 같은 언어를 만든 사람들은 이 언어를 만들 때 자신들이 만든 문법을 사람들이 쉽게 이해하기를 원했습니다. 그래서 일상에서 자주 쓰는 말 중에 이 문법과 비슷한 말을 찾았겠죠. 그래서 찾은 비유, 은유가 바로 태그입니다. by. 생활코딩_기본 문법-태그

- <strong> : 굵게

- <u> : 밑줄

- <h> : 제목을 정의하는 태그. h1~h6까지 있고, 숫자가 커질 수록 글자 크기가 작아짐.

- <xmp> : xmp태그 안에 html태그를 입력하면 코드가 웹페이지에 그대로 출력됨.

 

- <br> : 새로운 줄을 넣을 때 쓰는 태그. 특징은 닫힘 태그가 없음.

- <p> : 단락(paragraph)을 표현하는 태그. br태그는 단순히 줄을 바꿔주는 태그라면 p 태그는 단락에 단락 태그를 사용하는 것이 웹페이지를 정보로서 보다 가치있게 해 주기 때문입니다. br 태그는 줄바꿈을 의미할 뿐입니다.

그런데 p 태그는 단점이 있습니다. 단락과 단락의 간격이 고정되어 있기 때문에 시각적으로 자유도가 떨어집니다. 반면에 br 태그는 쓰는만큼 줄바꿈이 되기 때문에 원하는 만큼 간격을 줄 수 있는 장점이 있습니다. 그래서 많은 사람들이 br 태그를 선호합니다.

하지만 웹에는 CSS라는 기술이 있습니다. CSS를 이용하면 p태그의 한계를 극복할 수 있습니다.

CSS는 HTML과 완전히 다른 문법을 가진 언어입니다. HTML이 정보를 표현한다면, CSS는 정보를 꾸며줍니다.

1	<p style="margin-top:45px;">

위와 같이 p 태그에 style="margin-top:45px"를 추가하면 p 태그의 위쪽에 45px 만큼의 여백(margin)이 생깁니다.

이것이 바로 CSS입니다. CSS는 우리 수업의 주제가 아니기 때문에 이해하지 못하셔도 됩니다.

중요한 것은 <br> 보다 <p>가 좋은 이유를 이해하는 것입니다.

 

p 태그를 통해서 단락의 경계를 분명히 하면서 CSS를 통해서 p 태그의 디자인을 자유롭게 변경할 수 있기 때문에 br 태그 보다 p 태그가 더 좋은 선택입니다.

 

2. 심화문법 - 속성(attribute)

- <img> : 이미지를 삽입하는 태그

-> 속성 src : 원하는 이미지의 웹 주소를 적어주면 해당 이미지를 불러오게 된다.

 

3. 태그의 관계 : 부모, 자식 관계의 태그

<parent>

    <child>

    </child>

</parent>

 

그런데 모든 태그는 부모 자식 관계가 정해져있지 않지만, 몇몇 태그들은 부모 자식 관계처럼 고정된 관계인 태그들이 있습니다.

 

- <li> : 목차를 표현할 때 쓰는 태그입니다. 이 태그는 반드시 <ul>태그의 자식태그로만 사용합니다. 반대로 <ul>태그는 <li>태그의 부모태그로만 사용합니다.

-> 예시

<ul>
      <li>1. html</li>
      <li>2. css</li>
      <li>3. javascript</li>
</ul>

그런데 이때 <ul>을 <ol>로 바꾸면, 목차 앞에 자동으로 숫자가 넘버링 된다. 이 두개의 부모태그의 공통점은 l이 포함되어 있다. 그리고 o는 ordered, u는 unordered를 뜻한다. 즉, ol은 oredered list이므로, 순서가 부여된 리스트를 만들어주는 부모태그인것이다.

 

- <table> : 표를 작성하는 태그는 3대가 같이 다닌다. tr과 td태그가 있다. table은 할아버지 태그이고, tr은 한 행을 정의하는 태그, td는 tr태그 내에서 열을 정의하는 태그이다.

<table>
	<tr>
    	<td>head</td>
        <td>98.1%</td>
    </tr>
	<tr>
    	<td>body</td>
        <td>97.9%</td>
    </tr>
   	<tr>
    	<td>html</td>
        <td>92.1%</td>
    </tr>

이 코드를 입력하면 표가 아래와 같이 나온다.

head	98.1%
body	97.9%
html	92.1%