반응형
HTML에서 아무리 ENTER와 SPACE BAR을 눌러도 웹사이트에는 적용이 안됩니다.
간단한 띄어쓰기, 줄 바꿈마저 명령어로 동작합니다.
단락, 줄바꿈 : <p><br>
줄을 바꿀 때 단락을 이요한 <p> 태그를 사용하거나 강제로 줄을 바꿀 수 있는 <br/> 태그를 사용합니다.
<예시>
위에 상태에서 F5키를 누르면 어떤 브라우저로 실행시킬지 물어봅니다. 저는 'chrome'을 주로 사용합니다.
이래저래 호환성문제때문에 크롬이 편하더라고요.
<결과>
<p> 태그로 묶어 사용하
<html>
<head>
</head>
<body>
<p>나는 넘어지는 그 순간 많은 생각을 한다.</p>
<p>집에 가스는 잠갔는지, 강아지 밥은 챙겨줬었는지, 우리집에 강아지가 있었는지 생각한다.</p>
</body>
</html>
웹사이트에서 묶어준 <p> 태그끼리 뭉쳐 다른 단락은 다음 줄로 넘어간 모습입니다.
다시 <p> 태그를 지우고 <br> 태그를 사용해서 띄어보겠습니다.
+) 많은 태그들을 <>로 열린 태그가 있으면 </>로 닫아줘야 하지만 <br> 태그와 같이 닫지 않아도 컴퓨터가 이해하고 사용할 수 있는 태그가 있습니다.
타이틀 <title>
<html>
<head>
<title>내가 넘어질 때 하는 것</title>
</head>
<body>
나는 넘어지는 그 순간 많은 생각을 한다.<br>
집에 가스는 잠갔는지, 강아지 밥은 챙겨줬었는지, <br>우리집에 강아지가 있었는지 생각한다.
</body>
</html>
제목 <h1~6>
제목은 글자 크기가 바뀐다고 봐도 무관하지만 h태그 자체가 큰 키워드의 정보이므로 애용해 주시는 것이 좋습니다. 스타일을 줘서 글씨크기를 꾸밀 수 있지만 페이지 자체에 정보를 컴퓨터에게 제공을 해줘야 노출에도 유리하기 때문에 h제목 태그를 사용합니다.
제가 알기로 h3가 깨지지 않고 사람들이 많이 애용하는 제목 사이즈였네요.
<html>
<head>
<title>제목을 크기별로 알아보자</title>
</head>
<body>
<h1>안녕</h1>
<h2>안녕</h2>
<h3>안녕</h3>
<h4>안녕</h4>
<h5>안녕</h5>
<h6>안녕</h6>
</body>
</html>
정리
- 줄 바꿈은 <p> 태그를 애용하지만 시각적으로 <br>을 사용해도 좋다.(css 사용하면...)
- 타이틀은 <head> 태그에 웹사이트에 정보를 심어주는 것이다. 실제로 상단 브라우저 탭 이름을 바꿔주기도 합니다. <title> 타이틀은 여기에 </title>
- 제목은 <h1~6>이 있으면 숫자가 작을수록 보이는 크기가 크다
728x90
반응형
'Front End > HTML + CSS + JavaScript' 카테고리의 다른 글
| HTML input type 라디오 버튼 체크박스, radio check box (1) | 2023.06.16 |
|---|---|
| HTML drop down 드랍다운 선택 select 태그 (0) | 2023.06.16 |
| HTML form input 텍스트 필드 회원가입 예제 입력양식 (0) | 2023.06.15 |
| HTML table 테이블 태그로 표만들기, table 병합하기 colspan rowspan (0) | 2023.06.14 |
| 웹 사이트의 뼈대 HTML 웹 개발도구 vscode 작업공간 만들기 (0) | 2023.05.30 |
