오늘의 주제
html에 존재하는 기본적인 style 속성을 활용해 간단한 자기 프로필을 만들어 봅시다.
style 속성으로 html 페이지를 꾸며보자
지난 글에서 기본적인 html태그를 이용해 웹페이지를 작성해보았다. 하지만 줄 간격도 안맞고, 배치도 이상하고, 하나도 예쁘지 않은 페이지일 것이다.
html에서 태그에 style이라는 속성을 추가하면 웹페이지를 보기좋게 꾸밀 수 있다.
글자 크기, 글자 간격, 폰트 스타일을 바꿔보자
style 속성에는 정말 많은 속성들이 존재한다. 여기서는 정말 기본적인 속성들만 알아보도록 하자.
font-size : 글자 크기를 변경한다
font-family : 폰트 스타일을 변경한다
color : 글자의 색을 변경한다
letter-spacing : 글자 간격을 조정한다
text-align : 우리가 작성한 글을 가운데로 정렬한다
font-weight: 글자의 굵기를 조절한다
이런 속성을 이용해 나의 프로필의 소개를 꾸며보았다.
<h3 style="font-size: 30px; text-align:center">Mingeon Choi</h3>
<p style = "text-align: center;">
School: Ajou University
</p>
<p style = "text-align: center;">
Deparment: Software
</p>이렇게 우리가 전시간에 배운 p 태크, h3 태그에 style 이라는 속성을 추가하여 원하는 속성을 입력하면 글자 크기나 위치, 색을 변경할 수 있다.
여기서 주의할 점!
여러 속성을 동시에 입력할 때는 뒤에 ;을 사용해주어야 한다.
내 프로필 이미지의 위치와 크기를 조정해 보자
이미지도 글자와 비슷하게 위치와 크기를 조정할 수 있다. 이미지에서 사용하는 기본적인 style 속성에 대해서 알아보자
display : block;
margin-left : auto;
margin-right : auto;
위에서 소개한 3가지 속성은 이미지를 가운데로 정렬하는 데 사용하는 속성이다. 이 세가지 속성은 매우 중요하기 때문에 추후 글에서 추가적으로 다루도록 하겠다.
이런 속성을 이용해 내 프로필 이미지를 다음과 같은 코드로 꾸며보았다.
<img src="mokoko.jpeg"
style="width: 200px;
margin-top: 30px;
display : block;
margin-left:auto; margin-right:auto;">위에서 언급하진 못했지만 width, height 이 두가지 속성을 이용해 이미지의 크기를 조절할 수 있다.
이렇게 다음과 같은 프로필을 완성할 수 있다.
마무리
이번 포스트에서는 html에 존재하는 기본적인 style 속성을 이용해 html에 있는 글과 이미지의 크기를 바꾸고, 정렬 하는 것을 해봤다. 다음에는 css파일을 만들어서 html에 적용하는 법을 해보려고 한다.
