HTML&CSS-1(HTML의 정의와 기본 구성)

1 분 소요

HTML(Hypertext Markup Language)

1. 정의와 기능

HTML은 웹 페이지를 만들기 위한 언어입니다. 웹 페이지의 전체적인 구조를 잡을 수 있으며, 이미지, 텍스트, 비디오, 버튼 등으로 구성되어있습니다. 브라우저를 통해 HTML의 파일이 뭘 가지고 있는지 파악 후 웹 페이지를 생성해준다.

2. tag

HTML파일에 필요한 최소한의 태그는 <html>, <head>, <body> 세가지가 있습니다. HTML의 기본적인 구조는 <시작태그> + 내용 + <종료태그>로 구성되어있습니다.

Example

  • <태그이름> 내용 </태그이름>
  • <div> 블라블라 </div>
  • <p> 내용을 쓰세요 </p>

대표적인 태그로는 <div>, <p>, <title>, <a>, <span> 등이 있습니다.

<!DOCTYPE> 태그는 HTML 파일이라면 제일 첫 줄에 위치해야하는 선언문입니다. 태그처럼 생겼지만 tag는 아닙니다. <head> 태그 내에 여러 중요한 태그들이 있습니다. <meta charset="utf-8"> : 한글, 일본어, 중국어가 포함된 페이지라면 utf-8 이라는 값으로 문자 인코딩을 추가해줘야 합니다. <meta name="viewport" content="width=device-width">: 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미입니다. 모바일에서 웹사이트가 예쁘게 잘 보이려면 추가해야 하는 정보입니다. 해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타납니다.

cf) 웹 페이지에서 많이 사용되는 태그들

2020-10-20-10-16-21

그 외 참고자료

3. attribute(속성)

속성은 tag에 필요한 것을 추가하기 위해 작성하는 것입니다. attribute는 시작 태그 안에 위치하며, 여러 속성을 동시에 지정해서 사용할 수 있습니다. 대표적으로 id, class, href, src, alt 등이 있습니다.

그 외 참고자료

4. element (요소)

요소는 태그와 태그 사이에 있는 content(내용)을 의미합니다. <h1> 제목 </h1> 가 있을 때 ‘제목’은 요소가 됩니다. 만약 img태그와 같이 끝 태그가 필요 없는 것은 태그 자체가 요소가 됩니다.

댓글남기기