HTML, CSS(1)

📒 HTML 정리 (1)

📌 HTML이란?

• HTML은 웹페이지를 만들기 위한 언어, 웹브라우저 위에서 동작하는 언어이다.

📌 태그(tag)란?

• 태그는 정보를 정의하는 형식이다.
• 또한, 태그의 형식은 아래 처럼 이루어진다.

<태그명 속성명1="속성값1" 속성명2="속성값2"> 컨텐츠 </태그명>

• 아래의 코드로 예를 들어보면, a는 태그명, href는 속성명, url은 속성값, 네이버 바로가기 라는 문장은 컨텐츠에 해당된다.

<a href="http://www.naver.com"> 네이버 바로가기 </a>

• 열리는 태그가 있으면 반드시 닫히는 태그가 있어야되며, 닫히는 태그의 태그명 앞에는 '/' 슬래시가 붙어야 한다.
• 태그중에는 닫히는 태그가 필요없는 태그가 있는데 대표적으로 줄바꿈을 할 때 사용하는 br 태그, 각종 UI 요소들을 웹페이지에 삽입하는 input 태그가 있다.

<br />, <input type="button" value="버튼" />

• html의 최상위 태그는 이며, 그 하위 태그로 차례대로 , 를 사용한다.
• 태그에는 문서를 설명하는 태그로 제목이나 키워드 같은 정보를 담는다.
• 태그에는 웹사이트의 모든 컨텐츠 내용을 담는다.

✍ , 를 제외하고 자주 사용하는 태그

1. title
2. style
3. script
4. ul, ol, li
5. div, span
6. a
7. strong, br, p

• title 태그는 웹사이트의 제목을 지어줄 때 사용한다.

• style 태그는 css를 코딩하기 위해 쓴다.
  (개인 공부할 때에는 html 태그들과 같이 style 태그를 열어 css를 코딩하였지만, 프로젝트를 진행할 땐 코드를 쉽게 보기 위해 css 파일 확장자를 따로 만들어 코딩하였다.)

• script 태그는 중간 중간 JS를 작성할 때 사용하였다.

• ul, ol, li 태그는 리스트를 만들어주는 태그로 ul, ol 태그는 부모태그, li 태그는 그 안에 컨텐츠 리스트를 만들어주는 태그 이다. ul 태그는 컨텐츠 앞에 문자로 리스트를 보여주고 ol 태그는 숫자 오름차순으로 리스트를 보여줬다.

  <style>
  ul {
       list-style:none;
     }
  </style>

• div 태그와 span 태그는 웹사이트의 영역을 설정할 때 사용한다. 개인적으로 가장 중요한 태그라고 생각한다. 두 태그의 차이점은 div 태그는 width 값, height 값을 주어 크기를 지정할 수 있는 반면에, span 태그는 inline 속성을 가지기 때문에 정해줄 수 없는게 차이점이다.

• a 태그는 보통 컨텐츠에 하이퍼링크를 줄 때 많이 사용하였던 것 같다.

  <a href="velog.io/donghyun1113"> HTML 어린이 </a>

• strong, br, p 태그는 각각 굵은 글씨를 지정, 줄바꿈, 문단을 나누어 줄바꿈하는 태그이다.