생활코딩 웹 제작 스터디 [WEB1 - HTML & Internet] - 태그(Tag)

생활코딩이라는 유용한 사이트를 통해 웹 만들기 스터디를 시작했다. 현재 정보처리기사 실기, 파이썬, 웹 이렇게 세 가지의 방향으로 공부를 진행하고 있다. 일상에서 언급했던 것과 같이 내 시간표는 그렇게 움직인다. 앞으로 이 카테고리에서는 공부했던 웹의 내용을 잊지 않고 기억하기 위해 기록할 것이다.

---

 

기본 문법 - 태그(Tag) 

 

- strong : 웹 상에서 특정 부분 (예. contents)의 글씨를 bold체로 강조할 때 사용하는 태그

예시) <strong> contents </strong>

결과값) contents

 

- u : 웹 상에서 특정 부분 글씨에 밑 줄을 그을 때 사용하는 태그

예시) <u> contents </u>

결과값) contents

 

- from h1 to h6 : 제목에 사용하는 태그

예시) <h1> </h1> .... <h6> </h6>

결과값)

좌측 코딩값, 우측 결과값 , h 뒤 숫자가 커질수록 크기는 작아진다.

- br : 웹 상에서의 줄 바꿈 태그 / </br>이 처럼 닫힌 태그가 쌍으로 없다. 무엇인가를 설명하지 않는 태그들은 감싸야하는 컨텐츠가 없기 때문에 태그를 닫지 않는다. img, input, br, hr, meta 등등!

예시) content 1<br> content 2 

결과값) content1

          content2

 

- p : 웹 상에서의 줄 바꿈 태그 - br과 다른 점은 p는 열고 닫는 <p>, </p> 태그가 존재함. 단락(paragraph)을 표현할 때는 단순 줄 바꿈 태그(br) 보다는 p를 쓰는 것이 더 가치있는 정보로 만들어주는 방법. 하지만 p태그는 단락 사이가 고정되어 있기 때문에 br을 사람들이 선호한다. 하지만 p의 한계를 극복하게 만들어 주는 것은 바로 CSS 이다. 

HTML이 정보를 표현하는 것이면, CSS는 정보를 꾸며주는 것.

 

예시) <p style="margin-top:45px;">  contents </p>

결과값) contents가 45px만큼의 여백을 두고 줄바꿈이 실행될 것이다.