기본적인 웹 페이지 스타일링

1. 간단한 스타일 넣는 법

HTML에서 스타일링을 넣는 방법은 간단하다.

<p style="font-size : 20px; color : red"> 글자 </p>

거의 모든 태그는 style="" 속성을 이용하여 변경할 수 있다. 거기 안에 스타일 이름과 스타일 값; 형식으로 스타일을 넣으면 변경된다. 여러개를 넣고싶다면 일일히 나열하자. 단, 세미콜론을 까먹으면 안된다.

2. 자주 사용하는 글자 스타일들

font-size : 20px;
font-family : 'gulim';
color : black;
letter-spacing : -1px;
text-align : center;
font-weight : 600;

영어 단어의 뜻을 알면 바로바로 파악하기 쉽다. 저 안에 들어간 스타일 값은 예제로 기재하였다.

3. 이미지 정렬과 폭 조정

display : block;
margin-left : auto;
margin-right : auto;
width : 150px;

이미지는 width를 많이 사용한다. px, %와 같은 다양한 단위로 폭을 조절한다.
이미지를 가운데 정렬을 하고 싶다면 display: block; margin-left: auto; margin-right: auto;를 기입하면 된다.

4. 텍스트의 일부만 스타일을 변경하고 싶을 때

<p>안녕하세요 저는 <span style="color : red;">뛰어난</span> 개발자입니다.</p>

span태그로 감싼 뒤에 스타일을 주자. span태그는 가끔 글자 일부를 싸매고 싶을 때 사용하며 다른 태그들처럼 별 다른 의미를 가지고 있지는 않다. 또, strong태그를 이용하여 글씨를 굵게 만들 수도 있다.

(참고) span태그는 display: inline 속성을 내포하고 있어 display: inline 속성을 가지고 있으면 width, height 같은 폭과 높이를 단독으로 정할 수 없다. 만약 그러고 싶다면 p 태그에 주도록 하자.