“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
CSS
CSS는 HTML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. HTML 바탕으로 뼈대를 만들어 주고 CSS는 디자인적인 요소를 입혀주는 역할입니다. CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다.
01. 내부 스타일시트
CSS를 HTML문서 안에 <style>태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. HTML 문서 내의 <head>태그에 <style>태그를 사용하여 CSS 스타일을 적용합니다. 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있습니다.
이처럼 내부에 필요한 스타일을 입력해 주는 방식으로 배경색상, 제목색상, 텍스트 꾸밈을 할 수 있습니다. 내부 스타일시트는 그 스타일이 기술된 페이지에만 적용이 가능합니다.
02 외부 스타일시트
외부 스타일시트는 스타일의 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *,css 확장자를 가진 별도의 파일을 저장하고, HTML에서는 <style> 태그 따로 없이 <head>섹션 안에 <link> 태그를 이용하여 선언합니다.link 태그는 기본적으로 외부에 있는 리소스를 가져오는 태그입니다. rel 를 stylesheet 로 지정하고 href 에 해당 CSS 파일의 절대주소 혹은 상대주소를 넣어주면 CSS 파일을 로드 할 수 있습니다.
이미지에 나와 있는 것처럼 <style>태그 없이 <link>태그를 이용하여 미리 저장해둔 파일을 가져와서 사용하는 것을 외부 스타일 시트라고 합니다. 외부 스타일 시트는 그 스타일을 선언한 모든 HTML 페이지에 적용됩니다.
03 .@import
@import는 CSS안으로 다른 CSS파일을 불러들일 경우 사용합니다. link 태그와 마찬가지로 head 섹션에 들어가 있어야 하며, head 섹션 내부에 style 태그를 만들고 그 안에서 @import 를 사용해야 합니다.예제에서 볼 수 있듯이 기본적으로 @import 는 style 태그 안에 들어가 있습니다. @import는 어떤 CSS 파일 안에 공통 CSS를 불러들일 경우에도 사용할 수 있습니다.
@import는 곹옹으로 들어가야 할 스타일을 따로 저장한 후 다른 CSS 에 삽입시켜 사용할 수 있습니다. 그러나 CSS파일을 너무 여러개로 분리하면 복잡해서 유지보수가 어려워 진다는 점을 유의하여 용량이 적다면 하나의 파일로 저장하는 방법이 좋습니다.
04. 인라인 스타일 (inline style)
인라인 스타일은 스타일 시트를 사용하지 않고 직접 스타일을 적용하고 싶은 태그에 style=" 속성: 속성값 ; " 형식으로 기술합니다. 속성 값을 정의 할땐 : (콜론)을 사용하고 다른 스타일을 추가할땐 ;(세미콜론)을 사용해 줍니다. 인라인 스타일은 기술된 속성보다 우선으로 적용되므로 우선순위가 절대적으로 높아야 하는 경우에 사용할 수 있습니다.
예를들어 인라인 스타일이 적용된 태그는 내부나 외부 스타일 태그와 상관 없이 무조건 인라인 스타일이 적용됩니다. 또한, 내부 스타일 시트와 외부 스타일 시트는 가장 마지막에 적용된 스타일 시트가 적용됩니다.
이처럼 이미지에 나타난 것처럼 <h2>이 부분은 외부 스타일 시트만이 적용됩니다.</h2> 부분에서는 따로 내부 스타일이나 인라인 스타일이 들어가 있지 않아 아무 효과가 나타나지 않았지만 그 다음줄 <h2>이 부분은 인라인 스타일과 외부 스타일 시트가 둘 다 적용됩니다.<h2>에서는 인라인 styel 태그가 들어가 있는걸 볼 수 있습니다. 보시면 컬러와 텍스트 밑줄의 결과 값이 나타난 것을 볼 수 있습니다.
✓정리
CSS는 HTML에 작성된 문서를 표시 방법으로 기술하기 위한 스타일 시트이며 style 태그를 사용하여 꾸며줍니다. 총 4가지의 스타일 방법이 있는데 먼저 내부 스타일 시트는 <style>태그 안에 기재하여 html과 css가 함께 저장되는 것을 말하며 외부 스타일 시트는 link를 사용하여 외부에서 저장되어 있는 파일을 가져와 사용하는 것을 말합니다. 세번째로 @import는 css안에 다른 css 파일을 불러오는 것을 말하며 마지막으로 인라인 스타일은 <style> 태그 안에 넣지 않고 직접 적용하고 싶은 태그에 style = "속성: 속성값;" 을 넣는 것을 의미합니다.