HTML+CSS 기초 강의 - 22. CSS 기초이해 1 - CSS 위치
HTML 태그를 사용해 HTML 문서를 작성한 후 웹브라우저에서 열면 태그를 사용해 입력한 내용과 이미지, 양식 등이 한줄에 한개씩 세로로 주욱 나오는 것을 보게 됩니다.
내용은 있지만 띄어쓰기와 줄 사이에 공백을 주는 것 말고는 HTML 문서를 보기좋게 만드는 그 어떤 것도 할 수 없습니다.
HTML 태그는 문서 안에 위치한 태그 순서에 따라 태그의 내용을 화면에 표시할 뿐입니다.
여기서 CSS가 빛을 발하게 됩니다.
MS워드나 아래한글에서 문서를 예쁘게 보이도록 하기 위해 사용하는 수많은 기능들의 역할을 하는 것이 바로 CSS 입니다.
CSS는 Cascading Style Sheet의 첫 철자를 따서 만들어진 단어입니다.
한글로 직역을 한다면 연속되는 모양을 정의한 문서 정도인데,
그보다는 적층식으로 또는 상속형으로 HTML 문서의 꾸밈 속성을 기술하는 언어를 CSS 정도로 이해하면 됩니다.
CSS는 바깥쪽 태그에 적용한 CSS 속성이 안쪽에 있는 태그에 그대로 상속되는 특징을 가지고 있습니다.
물론 모든 CSS 속성이 안쪽 태그에 상속이 되는 것은 아닙니다.
상속되는 CSS 속성과 그렇지 않은 CSS 속성이 태그의 종류나 CSS 속성에 따라서 달라지기 때문에 이런 차이점을 구분할 수 있게되야 제대로 된 CSS 사용이 가능합니다.
인라인 CSS, 내부 CSS, 외부 CSS
CSS 는 HTML 문서에서 인식할 수 있는 위치나 방식이면 여러곳에 위치할 수 있는 유연성을 제공합니다.
CSS 가 개별 태그 속성으로 위치하면 인라인 CSS
HTML 문서 안에 위치하면 내부 CSS
별도의 파일로 CSS를 정의해 HTML 문서에서 호출해 사용하는 경우 외부 CSS
로 구분합니다.
내부 CSS는 HTML5 최근 업데이트에서 <head> 태그 안이 아니어도 인식되도록 개선되었지만, 구버전 브라우저와의 호환성을 위해 <head> 태그 안에 사용하는 것을 추천합니다.
각각의 CSS 사용법은 다음과 같습니다.
인라인 CSS
각 태그에 직접 CSS 속성을 정의하는 방식입니다. 태그 하위 태그에는 상속되지만, 태그마다 CSS를 적용해야 하기 때문에 예외적인 경우가 아니면 추천하지 않습니다.
태그 속성으로 CSS를 정의할 때 "style" 키워드를 사용합니다.
예를 들어
<span style="font-size:12px;font-family:Helvetica;">12픽셀 텍스트 내용</span>
처럼 style="" 로 쌍따옴표로 싸서 CSS 속성(들)을 정의하며, 각 개별 CSS속성 끝에는 콜론(;)을 써서 개별 속성을 구분합니다.
마지막 콜론(;)은 생략할 수 있습니다.
태그에 인라인 CSS를 사용하면 태그에 어떤 CSS를 적용했는지 바로 확인할 수 있지만,
CSS를 적용해야 하는 태그마다 매번 CSS를 입력해야하기 때문에 반복되는 내용을 똑같이 입력해야하는 불편함이 있습니다.
또, HTML 문서가 길어질 경우 CSS 수정을 위해 위치를 일일이 찾는게 상당히 번거로워집니다.
내부 CSS
태그에 적용할 CSS 속성을 별도의 이름으로 정의해서 반복사용할 수 있도록 CSS를 작성하는 것을 내부 CSS라고 합니다.
태그에 정의하는 CSS 속성은 클래스라는 별칭으로 정의해 여러 태그에서 반복적으로 사용할 수 있습니다.
때문에 불필요한 중복 속성 정의를 피할 수 없고, 미리 정의한 CSS 클래스를 사용함으로써 HTML 문서의 가독성을 끌어올릴 수 있습니다.
예를들어 헤드 태그 안에 스타일은 다음과 같이 정의합니다.
<head> <style> .paragraph{ font-size:12px; font-family:Helvetica; } </style></head>
CSS를 정의하는 영역을 표시하는 태그는 <style></style> 입니다.
CSS는 클래스(Class)와 태그이름(Tag)으로 속성을 정의할 수 있습니다.
속성들을 하나로 묶어서 하나의 단위로 표시하는 것을 클래스(Class) 라고 하고 "." 또는 "#" 뒤에 클래스 이름을 붙여 클래스 이름을 부여합니다.
클래스 이름은 "./#"+"영문자1개이상+영문자숫자/-/_" 와 같이 특수문자를 제외한 문자와 숫자/기호를 조합해 만듭니다.
그리고 속성들은 중괄호({})를 이용해 묶어서 클래스의 속성임을 표시하게 됩니다.
태그 이름 자체에 CSS 속성을 부여할 수도 있습니다.
클래스를 정의하고 사용하는 기본 규칙을 간단하게 알아보겠습니다.
"." 으로 시작하는 클래스는 태그 속성으로 class="클래스명1 클래스명2" 와 같은식으로 클래스명(들)을 주어 태그에 클래스를 적용합니다.
2개 이상의 클래스를 하나의 태그에 적용할 경우 1개 이상의 공백으로 띄어서 구분합니다.
태그에는 1개의 클래스 속성이 오는 것이 원칙입니다. 2개 이상의 클래스 속성이 올 경우 먼저 나온 클래스 속성만 적용됩니다.
클래스명이 오는 순서대로 CSS 속성이 적용되기 때문에 태그에 같은 CSS 속성을 적용하는 클래스를 2개이상 사용한 경우 나중에 오는 CSS 속성이 최종 적용됩니다.
예를 들어
.txt1{font-size:12px;text-decoration:underline}.txt2{font-size:18px;color:red}
처럼 txt 클래스를 정의했다면
<p class="txt1">.txt1 클래스 적용</p>
와 같이 p 태그에 txt1 클래스를 지정하면 해당 태그에 "font-size:12px;text-decoration:underline" 속성이 지정됩니다.
지금 CSS 속성에 대해서 자세히는 다 몰라도 됩니다.
"font-size:12px;" 는 텍스트에 12px 글자 크기 적용, "text-decoration:underline" 은 텍스트에 밑줄 적용입니다.다.
또
<p class="txt1 txt2">txt1 적용 후 txt2 적용</p>
과같이 2개의 클래스를 지정한 경우 txt1 클래스 적용 후 txt2 클래스가 적용됩니다.
중복되는 CSS 속성은 나중의 나오는 클래스의 것으로 덮어쓰기가 됩니다.
최종적으로 p 태그에 있는 텍스트에는 "font-size:18px;color:red;text-decoration:underline" 이 적용됩니다.
클래스 속성이 중복되는 것만 나중에 나오는 클래스의 것으로 덮어쓰기가 되고 나머지는 누적된다는 점을 주의해야 합니다.
<p class="txt1" class="txt2">class 속성이 2개 정의. txt1만 적용됨</p>
이렇게 class 속성을 2개 정의한 경우 앞의 txt1 클래스만 적용됩니다.
"#" 으로 시작하는 클래스는 태그에 지정된 ID값에 적용되는 고유한 클래스입니다.
ID명은 HTML 문서 1개에 1개만 올 수 있는 고유한 이름이기 때문에 별도 클래스를 태그에 지정할 필요가 없습니다.
문서 안에 해당 ID를 가진 태그가 1개만 있기 때문에 CSS로 정의해 놓으면 CSS 속성(들)이 자동 적용됩니다.
예를 들어
#special{ font-size:20px}
라고 클래스를 정의했다면
<p id="special">문서안에서 ID는 중복되지 않습니다.</p>
이 태그에는 "font-size:20px" 속성이 자동으로 적용됩니다.
태그이름으로 클래스 속성을 정의하면 문서안의 모든 태그에 클래스 속성이 적용됩니다.
예를 들어보면
p{font-size:12px}
이렇게 정의했다면
<p>자동으로 속성이 적용됩니다.</p>
이제 문서 안에 있는 모든 <p> 태그 안의 텍스트 내용은 "font-size:12px" 속성이 자동으로 지정됩니다.
외부 CSS
별도의 텍스트 파일에 내부 CSS 정의한 것을 분리해 저장한 것이 외부 CSS 입니다.
이렇게 별도의 파일로 CSS 정의를 분리하게 되면 여러 HTML 파일에서 이 CSS 파일을 불러와 사용할 수 있게 됩니다.
CSS 파일의 URL을 알 경우 다른 웹사이트의 CSS를 사용할 수도 있습니다.
이렇게 함으로써 여러 HTML 문서들이 동일한 레이아웃, 또는 디자인을 가질 수 있게 되며,
여러 HTML 파일의 레이아웃을 CSS 파일 한개에 정의한 CSS 속성을 수정함으로써 간편하게 관리할 수 있게 됩니다.
모든 면에서 외부 CSS가 HTML 문서의 레이아웃을 생성하고 관리하는데 좋기 때문에
특별한 경우가 아니면 인라인 CSS나 내부 CSS는 사용하지 않는 것을 원칙으로 합니다.
HTML 문서에서 외부 CSS 파일을 가져와 사용하는 방법은 아주 간단합니다.
예를들어 style.css 파일에 CSS 클래스들을 정의해 HTML 문서와 같은 경로에 저장했다면
HTML 문서 <head></head> 태그 안에 다음과 같이
<link rel="stylesheet" href="./style.css">
와 같이 CSS 파일의 경로만 <link> 태그로 연결해주면 HTML 문서 안의 모든 태그에 이 CSS 파일에서 정의한 클래스를 사용할 수 있게 됩니다.
외부 CSS 파일에는 <style></style> 태그 없이 CSS 정의 내용만을 작성해 저장합니다.
CSS 기초 핵심 요약
인라인 CSS는 CSS 속성 강제 대체, 또는 CSS 적용 테스트 등의 특정 상황에서만 사용합니다.
기본적으로는 인라인 CSS는 사용하지 않는다고 생각하고 내부 CSS나 외부 CSS 파일을 사용합니다.
내부 CSS는 작은 HTML 문서를 만들때나 CSS 양이 작아서 별도로 CSS 파일을 만들 필요성이 없을 때, 또는 특정 HTML 문서에만 사용하는 CSS를 정의할때만 사용합니다.
외부 CSS 파일의 확장자는 css(예: style.css) 를 사용합니다. 웹브라우저에서 css 확장자가 아닌 파일은 css 파일로 처리하지 않습니다.