HTML과 CSS를 연동하기

일반적으로 HTML과 CSS는 함께 쓰이는 경우가 많다. HTML과 CSS를 동시에 사용해주려면 '연동'해주는 과정이 꼭 필요한데, 그 방법은 아래와 같다. 기존에 html파일만 있던 폴더에 (원하는 이름).css 파일을 추가하여 아래와 같은 화면이 되도록 해주자.

 

blog.html과 blog.css를 '탭분리'를 해준 화면이다.

 

우선 본격적으로 HTML과 CSS를 연동하기에 앞서서 올바르게 웹 페이지가 작동하는지 확인해줄 것이다. html 파일 안에 h1, h2태그만 이용하여 아래 그림과 같이 "Hello World"와 함께 간단한 자기소개를 하는 코드를 작성해보자.

html에 입력된 코드(좌)와 웹페이지에 실행된 결과(우)이다.

 

여기까지 됐다면, 이제 우리는 CSS를 활용하여 위 문구를 화면 정중앙에 표시해줄 것이다. CSS를 이용하기에 앞서서 HTML과 CSS를 연동해주는 과정이 우선적으로 이루어져야 하는데, 이는 head 태그 속에

 

    <link rel="stylesheet" href="blog.css">

 

이 코드를 입력해주면 된다. "blog.css" 부분에는 각자 자신이 생성한 css파일이 들어가면 된다. 그리고 h1, h2태그를 p태그로 바꿔주자. (CSS에서 한번에 다루기 편하기 때문이다.) 이 이후에는 CSS의 기본 문법에 대해서 써볼 것이다.