🌊 html의 기본 (2)

우선 첫 번째 포스팅에서는 기본적으로 아는 내용들에 대해 다루긴 했지만, 그래도 아직 html이 익숙치 않은 것은 어쩔 수 없나보다 ..
근데 또 나름 글을 작성하다보니 재미있는 것 같기도 하고 …?🤔 최근 블로그 테마 수정하고 이것저것 하다보니 자바스크립트도 배워서 직접 웹디자인도 해보고싶다 … (마음만 .. 😎)
무튼! 다음 내용 시작!

☁️ 줄 바꾸기

줄 바꾸는 기능을 하는 태그들
HTML은 공백(space bar)과 엔터(enter key)를 여러 번 입력하더라도 하나의 공백만으로 인지한다. 그렇기에 줄 바꾸는 기능을 하는 태그들을 익혀야한다… (마크다운에서도 비슷하다. 근데 마크다운은 단락은 자동으로 되더라 ..)

줄 바꾸기 기능을 하는 가장 일반적인 태그는 와   태그이다.

하나의 문단을 의미하는 태그: 

p는 paragraph의 약자로, 문단을 의미한다.

<p> 1st paragraph</p>
<p> 2nd paragraph</p>

위와 같이 코딩을 할 경우, 첫 번째 문단과 두 번째 문단 사이에 공백라인이 들어간다. 출력은 아래와 같다.

1st paragraph

2nd paragraph

한글의 경우에는 문단의 첫 글자를 들여쓰기 하지만 영문은 문단과 문단 사이에 한 줄의 공백이 있다.

강제 줄바꿈을 하는 태그:  
이 글에서도 자주 쓰이는데, 처음 깃허브 블로그를 만들면서 마크다운을 처음 배우게 되었다. 그 때 fork 한 블로그에서  태그를 마크다운에 쓰는 것을 보고 따라썼다. (지금도..)

br은 line break로, 강제 줄바꿈이라고 할 수 있다.

제 블로그에 <br>
찾아와 주셔서 <br>
감사합니다.

이와 같이 줄바꿈을 할 위치에   태그를 넣어주게 되면 아래와 같이 줄바꿈이 나타난다.

제 블로그에
찾아와 주셔서 
감사합니다.

  태그의 남용을 피하자😅

~~라고 하면서 남용하는 블로그 주인,, 이지만!~~
글이 너무 좌우로 너무 넓게 출력되면 가독성이 떨어지기에 남용하는 경우가 많다고 하나. 하지만 가능한 글의 한 문단을 의미하는  태그를 사용하고, 넓게 출력되는 것을 방지하기 위해서는 CSS를 함께 사용해주는 방식이 좋다고 한다.

<p style="width:400px">이 블로그는 제 전문적인 지식이 아닌, 그저 공부를 하기 위해 강의를 따라 적고 있을 뿐입니다. </p>
<p style="width:400px">html 글의 출처는 각 글 하단에 있습니다. </p>

와 같이 style 속성을 사용하게 된다면 문단의 좌우 폭을 지정할 수 있기에 굳이   태그를 사용하지 않아도 자연스럽게 줄바꿈이 일어나게 할 수 있다.

🌩 `` 태그

문단을 의미하는  태그

태그와 태그 사이에 위치하는 내용이 하나의 문단을 구성한다.
앞서 이야기 했던 내용이니 생략하고, 속성에 대해 짧게 언급을 하겠다.

align 속성

태그에서 사용되는 가장 대표적인 애트리뷰트(attributes, 속성)는 정렬을 의미하는 align이다.

align 속성에서 사용할 수 있는 값(arguments)로는 left, center, right, justfy가 있다.

<HEAD> ... </HEAD>

<HEAD>는 HTML문서에 관한 기본 정보를 포함하고 있는 부분으로, 주로 문서의 제목, 제작자, 문서정보 등이 포함될 수 있다.

<p>정렬 속성이 되지 않은 기본적인 문단이다. 기본적으로 왼쪽 정렬이다. 맨 아래에 있는 justfy정렬과 비교를 위해 길게 작성을 해봐야한다. 그래야 비교를 할 수 있을 것이다.</p>
<p align="left">왼쪽 정렬이다. 기본이 왼쪽이므로 이건 잘 사용을 안한다고 합니다.</p>
<p align="center">가운데 정렬이다.</p>
<p align="right">오른쪽 정렬이다.</p>
<p align="justfy">맞춤정렬이다. 한 문단이 길어져서 화면의 끝에서 자동 줄바꿈이 일어날 시, 그 가장자리 부분을 일정하게 맞춰주는 기능을 한다. 언뜻보면 왼쪽정렬과 비슷하지만, 줄바꿈이 일어난 오른쪽 가장자리를 비교하면 그 차이를 확인할 수 있다.

정렬 속성이 되지 않은 기본적인 문단이다. 기본적으로 왼쪽 정렬이다. 맨 아래에 있는 justfy정렬과 비교를 위해 길게 작성을 해봐야한다. 그래야 비교를 할 수 있을 것이다.

왼쪽 정렬이다. 기본이 왼쪽이므로 이건 잘 사용을 안한다고 합니다.

가운데 정렬이다.

오른쪽 정렬이다.

맞춤정렬이다. 한 문단이 길어져서 화면의 끝에서 자동 줄바꿈이 일어날 시, 그 가장자리 부분을 일정하게 맞춰주는 기능을 한다. 언뜻보면 왼쪽정렬과 비슷하지만, 줄바꿈이 일어난 오른쪽 가장자리를 비교하면 그 차이를 확인할 수 있다.

~~사실 justfy 특징 잘 모르겠다..~~

⛈ ` ` 태그

br은 line break를 의미한다. 앞서 말했으므로 역시 생략한다.
사실 html 소스를 보게 되면 br태그를 사용한 경우가 더 간단하다고는 한다. 하지만 문서의 의미, 형식이 중요할 경우에는 태그의 원래 용도대로 정확하게 사용하는 것이 좋다고.. 합니다…

이 글의 출처로!👇

홈짱닷컴

☁️ 줄 바꾸기
🌩  태그
⛈   태그

🌊 html의 기본 (2)

☁️ 줄 바꾸기

🌩 `<p>` 태그

⛈ `<br>` 태그

☁️ 줄 바꾸기

🌩 <p> 태그

⛈ <br> 태그

🌩 `<p>` 태그

⛈ `<br>` 태그