HTML 기본 구조 작성법

deokyeong1020·2020년 9월 14일
1

HTML

<!DOCTYPE> : HTML 버전을 알려주는 표시로 태그는 아니다.
<html> : 최상위 태그로 HTML이 시작되었다는 것을 브라우저에게 인지시키고 요소를 그릴 준비를 하게한다.
<head> : 제목 설명, 부가적인 정보가 들어간다(화면에 출력되는 부분이 아님)
 <meta charset="utf-8"> 다양한 문자(언어)를 읽을 수 있도록 인코딩
 <meta name="viewport" content="width=device-width">
 : 디바이스의 가로크기가 곧 웹페이지의 가로와 같다. 반응형 웹을 위해 필요
 <title>타이틀 넣는 곳</title>
</head>
<body> : 화면에 직접 출력이 되는 부분
    <h1~h5> : h1부터 h5는 텍스트를 크기별로 나타낸다. 숫자가 커질수록 작아짐
    <span> : 주로 텍스트를 나타내면 line breeak(개행)하지않음
    <p> : 개행, 주로 문단 작성시 사용된다.
    <a href="" target="_blank">
    : href와 target은 attribute(속성)이다.
    참고로 속성은 태그마다 사용할 수 있는 종류가 달라진다.
    ℹ️ : target의 _blank는 새창에서 띄우기이고 기본값은 현탭에서 띄운다.
    <div> : 사실 아무 뜻 없이 그냥 웹사이트의 섹션을 나눌때 사용
    
이 외에도 많은 HTML태그가 존재하며 이 태그들에 class, id를 부여함으로서 CSS(Cascading Style Sheets)를 이용하여 웹사이트의 레이아웃을 적절히 보여줄 수 있다.

id : 각 태그에 붙인 임의의 고유한 이름(중복 불가)
class : 각 태그에 붙인 임의의 고유한 별명(중복 가능)

ℹ️ id, class는 동시에 선언이 가능하나 CSS 우선순위를 잘 생각해서 이용해야한다. CSS우선순위는 추후에 뒤쪽에 설명하겠다.

ℹ️ html 코드내에서 스페이스를 아무리 추가하여도, 실제 결과 화면에서는 적용이 되지 않습니다.
&nbsp를 사용해주면 1번사용한 것이 스페이스 1회 한 것과 같다.
<p>&nbsp&nbsp&nbsp호랑이</p> 스페이스 3번하고 호랑이쓴거랑 같다.

blockquote
인용구문을 넣을 때 쓰는 태그입니다.
브라우저에서 blockquote태그에 양쪽 여백을 넣는 기본 스타일을 자동으로 적용하였습니다.

profile
일일 개발 기록 블로그

0개의 댓글