프로그래밍 ) CSS를 삽입하는 방법 (연결방법)
코드의 단순화를 통한 정리가 된 CSS파일은 다른 개발자들이 코딩소스를 이해하기 쉽습니다. 이를 통하여 아무 개발자나 코딩된 소스를 보면 빠르게 파악되고, 수정 및 변화하기가 쉽게 됩니다.
다른 개발자의 소스를 보게되면 .css라는 확장자를 가진 파일을 볼 수가 있습니다. 파일의 세분화를 통하여 소스의 길이를 줄이게 되며, 해당되는 스타일시트를 구분을 통하여 다른 개발자도 보기 편하게 만들기 위함이죠.
여기서 의문은 왜 내가 만든 소스를 다른 개발자가 보기 편하게 만들어야 하는 건가요?? 라는 의문이 생길 수도 있습니다.
> 여기에 대한 답변을 하자면 자기 혼자서만 운영하는 웹사이트면 상관이 없습니다. 하지만, 회사나 공공기관 등 나만이 아닌 다른 사람들도 내가 작성한 코드를 보고 쉽게 이해하기 위해서는 누가 봐도 이해할 수 있는 코드를 통한 소스를 만들어야 한다는 것입니다. 물론 소스를 아무리 쉽게 만들어도, 자기 자신이 만든 게 아니기에 소스를 이해하는 시간은 좀 더 걸릴 수 있습니다. 하지만, 여기서 다른 개발자에 대한 생각을 한다면 조금 더 쉽게 코드를 단순화하며 중복되는 내용을 삭제하는 방법을 생각을 해야 할 것입니다.
CSS를 삽입하는 방법 즉, HTML5와 CSS를 연결시키는 방법에 대한 포스팅을 하도록 하겠습니다.
CSS의 삽입 방법으로써
1. 외부 스타일 시트
2. 내부 스타일 시트
3. 인라인 스타일 시트
총 3가지의 방법이 있습니다.
먼저 외부 스타일 시트에 대한 내용을 말씀드리자면,
먼저 외부 스타일 시트를 말씀드리자면, 말 그대로 CSS파일을 외부로 따로 빼서, HTML5소스의 복잡함을 한줄로 끝내줄 수 있습니다. 가장 큰 장점은 한줄로써 스타일시트에 대한 기능을 불러올 수 있다는 장점이 있습니다. 하지만, 주의 할 점은 CSS 파일을 저장할 때에는 자기자신 또는 다른사람도 이해할 수 있는 파일명으로 채택하여 CSS파일을 만들어야 한다는 사실입니다. 가끔 보다 자기가 만든 소스에 어떤 스타일시트가 있는 지 모르는 개발자도 있습니다. 이 점을 가장 중요시 하여 다음에 배울 id명이나 class명에 대해서도 생각을 잘해서 이름을 생성을 해야합니다. <link> 태그를 이용하여 스타일시트를 삽입하는데, 반드시 <head> 태그 안에서 사용을 해야합니다.
다음 내부스타일 시트에 대한 내용을 말씀드리자면
말 그대로 HTML5 소스안인 내부에 CSS 태그를 이용하여 스타일 시트를 만드는 것입니다.
이 부분도 반드시 <head>태그 내부에 작성을 해야하며 <style>태그로 CSS태그를 사용할 수있습니다. 주의 해야할 점은 특별히 없지만, 나중에 id명과 class명 등 다양하게 문제점이 발생 할 수 있지만, 현재 시점에서는 설명하지 않겠습니다. 일단 보시고 이해하려고 하시면 될 것 같습니다.
장점은 파일이 나눠져 있지않아 한번에 볼 수 있는 좋은 점이 있지만, 웹페이지가 커지면 커질수록 소스가 길어지게 되며 복잡한 결과를 보실 수 있습니다.
단순한 웹페이지에 많이 적용하지만, 거대한 웹페이지는 오히려 복잡함을 나타내는 단점이 될 수 있으니 주의해야합니다.
다음으로 인라인 스타일 시트에 대한 설명을 하자면
<body>태그 안에 있는 HTML5 태그 안에 바로 스타일시트를 적용하는 방법입니다. 이 방법은 HTML5 이 전부터 많이 써오던 방법입니다. 이것 역시 바로바로 적용하고, 해당 <h1> 태그에 적용된 스타일 시트를 바로 볼 수 있다는 장점이 있지만, 코드의 중복화 및 복잡한 코드 내용이 된다는 치명적인 단점이 있습니다. 이것도 내부스타일 시트와 같이 간단한 소스로 적용할 때 사용하지만 실무에서는 많이 쓰지 않는 방법입니다.
오늘은 CSS와 HTML5를 연결하는 외부 스타일 시트를 배웠으며, HTML5 소스코드 안에서 즉시 적용할 수 있는 내부 스타일 시트와, 인라인 스타일 시트에 대해 배웠습니다. 해당 글에서는 이해만 하시면 되며, 너무 어렵게 생각 하지 말았으면 합니다.
어렵다구요 ?? 별거 없습니다.
댓글
댓글 쓰기