728x90
저번 포스팅에 대해 간략히 제목 요소인 h1~h6까지 한번 사용을 해보았는데요 !
이번 포스팅에서는 html의 요소중 p, br, pre요소에 대해 한번 알아보겠습니다.
앞으로 포스팅은 Webstrom 에서 주석을 통하여 코드를 설명하는 방향으로 진행을 할 계획입니다. 포스팅에서 설명하는 사항은 아마도 추가적인 사항이나 실행시 화면에서 어떤 결과가 보여지는지 사진을 통하여 설명을 할 것같네요.
자 그럼 시작하겠습니다.
<!DOCTYPE html>
<!--
속성(attribute)
- 열림태그안에 존재하고 이름(name) = 값(value) 으로 구성된 형태
-->
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문단을 나타내는 요소</title>
</head>
<body>
<h1>길거리</h1>
<h2>구자민</h2>
<p>하늘색 음악과<br/>
그리운 초록색<br/>
길거리 에서<br/>
날 부르고있죠<br/>
</p>
<p>
그때의 그리운 마음과<br/>
기억이 눈부시도록 웃죠<br/>
그런 그 모습에 세상이 펼쳐졌죠<br/>
</p>
<pre>
pre 예제
연습
test 화면 구동 ... ....
</pre>
</body>
</html>
<!--
HTML에서는 빈칸(엔터, 한칸 띄우기)를 아무리 많이 해도 단 한칸만
띄워집니다.
해결책 : 문단을 나눌경우에는 문단의 의미를 가진 요소 사용
줄바꿈도 줄바꿈 요소 사용
p요소
- paragraph(문단, 절)의 줄임말
- 문단을 나타내는 요소
br 요소
- brake line의 줄임말
- p요소등에서 줄바꿈이 필요할 때 사용하는 요소
- 자식요소가 없음(열고 닫힘 한번에 하는 요소)
pre 요소
- presentation의 줄임말
- 엔터 / 띄어쓰기 등 있는 그대로 표현할 때 사용
-->
저번에 설명한 것은 주석을 제거하고 새롭게 나타난 항목에서만 주석을 처리 하였습니다 !
이 코드를 가지고 실해을 한번 해보겠습니다.
이런식으로 페이지가 완성이 되어서 우리에게 출력이 되는 것을 확인할 수 있습니다.
html에서는 아무리 띄어쓰기 및 줄바꿈을 한다고 해도 pre 요소를 제외하고는 한칸 띄어쓰기로 인식이 되는데요 pre라는 요소는 있는 그대로 사용을 한다는데, 제가 이 요소를 활용을 많이 하는 사이트를 본적이 없는것 같네요,, 사용은 하는것 같아 살짝 알아두고 가셔도 좋을 것 같습니다.
아 위에 구문은 길거리 라는 노래인데 제 친구가 만든 노래입니다. 그냥,, 예제를 위해 활용 해보았습니다.
이번 포스팅은 여기까지 입니다. 다음은 리스트 관련 요소에 대하여 알아보겠습니다 !
반응형
'Front-end > HTML' 카테고리의 다른 글
| 5. 다음 UI 만들어보기 (0) | 2018.07.23 |
|---|---|
| 4. Form 요소 와 엔티티 기호 (0) | 2018.07.23 |
| 3. 이미지와 하이퍼링크 (0) | 2018.07.22 |
| 2. 리스트 관련 요소들 (0) | 2018.07.22 |
| 0. HTML 첫걸음 (0) | 2018.07.22 |