HTML5 CSS 작성 및 링크
■ 웹 문서에서 뼈대를 이루는 게 html이라면 스타일을 정의하는 부분은 css(스타일시트) 인데요. css를 html과 같은 문서에 작성할 때는 <head> 태그 안에 <style> 태그를 만들어서 그 안에 작성하면 되는데요. 간단한 웹 문서라면 이렇게 작성해도 되지만, 적용할 스타일의 양이 많다면 소스가 길어져서 조금 복잡해지는데요. 이렇게 복잡하고 긴 스타일시트를 작성할때는 외부 파일로 만들어서 html 문서와 연결을 해주면 되거든요. 그 연결방법에 대해서 알아볼게요.
먼저 하나의 문서에 html과 css를 함께 작성할 때의 위치부터 정확히 알고 넘어갈게요.
■ html 문서 내부에서 css를 작성할 때는 <head> 태그 안에 <style> 태그를 작성하고 그 안에 작성해주시면 됩니다.
다음은 외부 스타일 시트를 작성하고 연결하는 방법을 알아볼게요.
■ 다음과 같이 css(스타일시트)를 다른 문서에 작성하고 이 문서를 저장할때는 파일 형식을 [.css]로 저장해야 합니다. (간단하게 단락의 글씨색은 흰색으로 배경색을 검정색으로 지정했습니다. 뒤에서 이 파일을 연결해서 웹 브라우저에서 제대로 표시되는지 확인해볼게요.)
■ 파일 이름을 style.css로 저장하겠습니다.
다음은 이 css를 html 문서에 연결하겠습니다. 여기서는 편의상 html 문서와 css문서를 같은 폴더에 넣어놓고 진행하겠습니다.
■ 준비한 html 과 css 문서 인데요. 두 문서를 연결해보겠습니다.
■ <head> 태그 안에 그림과 같은 형식으로 링크를 걸어주면 됩니다.
href="파일의 경로"(같은 폴더 안에 있기 때문에 파일 이름만 지정했습니다.) rel="stylesheet"는 현재 연결하는 파일이 스타일시트 파일이라는 의미이구요. types="text/css"는 이 파일의 형식이 텍스트로 이루어진 css파일이라는 의미입니다. 이대로 연결하고 html파일을 웹 브라우저에서 열어보겠습니다.
■ 스타일을 너무 성의없이 작성해나보네요. ㅎ 여기서 중요한 건 스타일이 아니고 html문서와 css문서의 연결방법이잖아요? 두 파일이 제대로 연결되서 스타일이 적용된걸 확인할 수 있습니다.
정리하자면 간단한 내용의 스타일은 html 문서에서 <head>태그 안에 <style>를 만들어서 그 안에 작성하면 되고, 내용이 많으면 따로 스타일시트를 만들고 [.css]로 저장한 후 <head> 태그 안에서 link 태그로 연결하면 된다는 내용이었습니다. 수고하셨어요.
