html - 글자 효과 주기

 

 

안녕하세요. 각설탕입니다.

오늘은 텍스트의 기본적인 이 효과를 주는 법에 대해 알아보려고 합니다. 

 

아래 메모장처럼 항상 기본을 만들어 주시고 시작하겠습니다. 기본에 대한 설명은 아래 링크를 참고하시기 바랍니다. 

 

html 시작하기

html 5 배우기

 

 

1. 글자 크기 변경하기

기본 틀을 메모장에 적어줍니다. 익숙해 질때 까지 귀찮지만 열심히 적어보겠습니다. :)  

기본 화면

우선 타이틀 부분에 오늘 배울 이름을 적어 주겠습니다. 글자 효과 주기 후 ex.html로 저장하여 브라우저 화면을 만들어주세요. 바디 부분에 <h1>, <h2>, <h3>, <h4>, <h5>, <h6> ~ </h1~h6> 만들어주세요. 그리고 태그 사이에 예시 1~ 예시 6까지 써줍니다. 그럼 아래와 같은 메모장이 만들어질 거예요.

 

 

브라우저에서 어떻게 적용되는지 확인합니다. 메모창을 저장 후 브라우저 창에서 F5를 클릭하여 새로고침 해줍니다.

아래와 같이 H1~H6까지에 따라 글자의 크기들이 다르게 표현되는 걸 확인하실 수 있습니다. 

 

적용 화면

 

 

2. 정렬 변경하기

텍스트를 저장하면 기본적으로 왼쪽정렬이 되어있습니다. 따라서 왼쪽은 따로 정렬에 대한 효과를 주지 않아도 되고 오른쪽과 중앙으로 정렬을 변경하실 때에는 수치를 입력하셔야 합니다. 입력은 <h>의 괄호 안에 입력합니다. 

정렬에 대한 코드는 align=""입니다. 

 

예시 1은 align="center"를 예시 3에는 align="right"를 <h> 사이에 추가합니다. 추가 후 메모장을 저장하고 브라우저에서 F5를 클릭하면 위와 같이 정렬이 변경된 걸 확인할 수 있습니다. 

 

 

3. 문장에서 엔터 치기

아래 이미지처럼 메모장에서 엔터를 쳐서 두 문장을 만들어도 브라우저에서는 나타나지 않습니다. 문장사이에 엔터를 넣고 싶을 때는 <br/>을 뒤에 추가합니다. 

 

이때 <br/> 단독 태그여서 뒤에 하나만 적어주시면 됩니다. 

확인해보시면 문장이 엔터가 들어간 모습으로 변경되어 있습니다. <br/>의 갯수 만큼 엔터가 들어갑니다. 

오늘은 글자의 크기와 정렬 그리고 엔터를 칠 수 있는 태그에 대해 알아봤습니다. 

여러분 이 태그들은 기본이니 확실히 암기 후 다름으로 넘어갈 수 있도록 복습해주시기 바랍니다. 

 

티스트로에서  스킨 편집에서  html로 확인해 보시면 우리가 배운 것들이 조금씩이 보이기 시작합니다. ㅎㅎㅎ

아래 이미지에 보이는 태그들을 모두 읽을 수 있을 그날까지 파이팅!!!