[HTML 기초 01] HTML 뛰어쓰기, 줄바꿈(엔터)를 알아보자 여백태그 및 br태그 / HTML 기본구성
오늘부터 포스팅 시작하게 될 HTML 기초 강좌..!
블로그를 하는데 유용할만한 기본중의 기본 HTML 강좌를 꾸준히 포스팅 해 볼까 합니다.
그럼.. 오늘 포스팅 할 강좌는 HTML에서 줄바꿈(엔터) 태그 입니다.
보통 HTML 구성은
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>
</BODY>
</HTML>
로 구성되어있으며 내용은 주로 BODY에 삽입됩니다.
하지만 BODY에 글을 그대로 쓴다고 출력되는 것도 아니며, 줄바꿈은 따로 태그를 써야합니다.
줄바꿈 태그는 <BR> 또는 </BR>로 입력하면 됩니다.
예를들어
<P> 한줄입력 </P> <IMG SRC="이미지URL"/>
을 입력하면 글 바로 옆에 이미지가 삽입되는데, 여기서 <BR> 태그를 써서
<P> 한줄입력 </P> <BR> <IMG SRC="이미지URL"/>
이런식으로 코드를 작성 시 글 아래에 이미지가 삽입됩니다.
<P> 한줄입력 </P>
<IMG SRC="이미지URL"/>
위와같이 코드에 엔터를 쳐봐야 아무소용 없습니다... <BR>태그를 이용하여 줄바꿈을 시켜줘야 합니다.
<BR> 태그를 여러번 쓴다면 !? 엔터를 여러번 치는것과 마찬가지인 효과를 얻습니다.
이 외에도 위아래 간격을 조절하는 방법이 있는데, 이는
<div style="top-padding:10px"></div> 태그를 이용하는 방법이 있습니다.
이는 픽셀값을 조정함으로써 HTML 상에서 위 아래 간격을 조절 할 수 있는데, 여백의 공간을 만들어 그사이즈를 조절하여 위아래 간격을 조정하는 방법입니다.
<P> 한줄입력 </P>
<div style="top-padding:10px"></div>
<IMG SRC="이미지URL"/>
한마뒤로 위와같이 코드를 짜면 글과 이미지 사이 중간에 DIV라는 새로운 영역(투명해서 보이지않음)이 생겨서 필셀(px)값에 따라
위아래 간격을 조절해 주는 것 입니다. 저런 방식으로 소스를 조금더 응용하면
<P> </P>
br 태그대신 위와같이 소스를 작성하여 중간에 집어넣음으로써 줄바꿈 효과를 낼 수 있죠.
위의 소스들을 한번 직접 적용 해 보시면 쉽게 이해할 수 있을것입니다~
질문있으시면 언제든 댓글 달아주세요~!
글이 도움되셧으면 공감버튼 한번 클릭 해 주세요. 로그인도 필요없고 바로 카운터가 오릅니다...!
'HTML & CSS' 카테고리의 다른 글
| [HTML 기초 03] 홈페이지에 이미지를 넣어보자~ IMG SRC 태그..! (0) | 2015.01.28 |
|---|---|
| [HTML 기초 02] HTML, JavaScript 를 이용해서 사이즈 고정 팝업창, 새창 뛰우기 / onclick="window open()" / 자바스크립트 (0) | 2015.01.27 |
