스타일과 스타일 시트
웹문서의 스타일(style)은 미리 약속한 스타일 속성을 입력해 웹을 디자인하는 것을 말하며 한 문서에 반복적으로 쓰이는 스타일을 모아 놓은 것을 '스타일 시트'라고 부릅니다.
스타일을 사용하는 이유는 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용들을 가리킵니다.
텍스트 단락에서 줄 간격을 조절하고 표의 테두리를 점선으로 바꾸는 것도 스타일로 정의가 가능합니다.
내용 변경없이 일괄적으로 스타일 변경이 가능해져서 유지보수가 쉬워집니다.
| 기본형 | 설명 |
| p { text-align: center; } | p는 선택자라고 부르며 text-align은 스타일 속성 center은 속성 값이다. |
스타일과 스타일시트
웹 문서 안에는 여러 개의 스타일 규칙이 사용되는 경우가 많습니다. 이러한 스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한 군데 묶어 놓은 것을 '스타일 시트'라고 합니다.
내부 스타일시트
웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것을 '내부 스타일 시트'라고 합니다.
모든 스타일 정보는 <head> 스타일 정보 </head> 식으로 정의해야 하고 <style> 스타일 정보 </style>식으로 작성합니다.
외부 스타일시트
디자인의 일관성을 위해 같은 스타일을 여러 웹 문서에 적용할 때 사용하는 방법입니다. 다운로드 시간을 줄여주며. css라는 확장자명을 사용합니다.
| 기본형 | 설명 |
| <link rel="stylesheet" href="외부 스타일 파일 경로"> | 외부 스타일 시트를 연결할 때는 <style> 태그 없이 <link> 태그만 사용해 미리 만들어 놓은 외부 스타일 시트파일을 연결합니다. |
인라인 스타일(가급적 사용을 피해야 할 스타일)
간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시합니다.
스타일을 적용하고 싶은 부분이 있다면 해당 태그에 style속성을 사용해 style="속성:속성 값;"형태로 스타일을 바꿀 수 있습니다.
| 기본형 | 속성 |
| <p style="color:blue;"> 블루베리는 항산화제인 ......</p> | 대상에 스타일을 직접 지정 |
주요 선택자
스타일 속성을 적용하는 요소를 '선택자(selector)'라고 부릅니다. 태그 하나 혹은 여러 개를 묶어서 별도의 선택자로 지정할 수 있습니다.
전체 선택자
모든 요소에 스타일 적용하기
전체 선택자로는 *를 사용하며 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용합니다.
예를 들어 웹 문서를 브라우저에 표시할 때 브라우저 창에 바짝 붙지 않도록 문서 내용 바깥쪽에는 '마진'을 두고 문서 내용 안쪽에는 '패딩'이라는 여백을 두는데 이런 여백 때문에 디자인이 깔끔하지 않을 경우, 전체 선택자를 이용해 웹 문서 전체에 마진과 패딩 여백을 0으로 지정할 수 있습니다.
| 기본형 | 설명 |
| * {속성:속성 값; 속성:속성 값; ...} | 스타일을 모든 요소에 적용할때 사용 |
태그 선택자
특정 태그를 사용한 요소에 스타일 적용하기
전체 선택자 다음으로 많은 요소에 스타일을 적용하는 태그 선택자(tag selector)는 특정 태그가 쓰인 모든 요소에 스타일을 적용합니다.
| 기본형 | 설명 |
| p { font-size: 12px; /* 글자 크기 */ font-family: 돋움; /* 글꼴 */ } |
특정 태그가 쓰인 모든 요소에 스타일을 적용할 때 사용 |
클래스 선택자
특정 부분에 스타일 적용하기
| 기본형 | 설명 |
| .bluetext { /* .클래스 명 */ color: blue; /* 스타일 */ } |
특정부분에만 스타일을 적용한다. 클래스 이름 앞에는 반드시 마침표(.)을 붙여야 한다. |
| <span class="bluetext"> 도움 </span> | <span> 텍스트 일부에만 클래스 스타일을 적용하고 싶을 때 사용 |
| h2.accent { background-color:#222; color:#fff; padding:5px; } |
선택자 적용 범위 제한 한꺼번에 둘 이상의 클래스 스타일을 적용하기 위해서는 공백으로 구분해서 두 개의 스타일을 나란히 적습니다. |
| #container { ... } <div id="container"> |
id 선택자 특정 부분에 스타일 적용하기 마침표대신#으로 적용하며 문서에 한번만 적용가능 중복사용이 불가능하기 때문에 문서의 레이아웃과 관련된 스타일을 지정하거나 자바스크립트 프로그램에서 웹 요소들을 구 분하기 위해 사용한다. |
| h1, h2 { ... } |
그룹 선택자 둘 이상 요소에 같은 스타일 적용하기 따옴표(,)로 구분 |
캐스 케이싱 스타일 시트(CSS)
적용된 많은 스타일 중에 어떤 스타일을 나타낼지를 결정함을 뜻합니다.
브라우저에서 기본적으로 정해 놓은 스타일을 따를 수 있고 웹 제작자가 정해 놓은 스타일을 따를 수 있는데, 우선순위에 따라 달라집니다.
1. 스타일 우선순위 - 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고
그 우선순위에 따라 위에서 아래로 스타일이 적용됩니다
2. 스타일 상속 - 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달합니다.
스타일의 우선순위는 세 가지 개념에 따라 지정됩니다.
1. 얼마나 중요한가(Importance)
스타일이 어디서 선언되었는가에 따라 달라집니다.
사용자 스타일 시트의 중요(! important) 스타일 > 제작자 스타일 시트의 중요 스타일 > 제작자 스타일 시트의 일반 스타일 > 기본적인 브라우저 스타일 시트
2. 적용 범위가 어디까지 인가?(Specificity)
스타일 적용 범위가 좁을수록 우선순위가 높아집니다.
인라인스타일 > id 스타일 > 클래스 스타일 > 태그 스타일
3.소스에서의 순서(Source Order)
중요도와 적용범위가 같다면, 나중에 온 스타일이 먼저온 스타일을 덮어씁니다.
스타일 상속
웹 문서에서 사용하는 여러 태그들은 서로 포함관계가 있는데 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 합니다. 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달되는데 이것을 '스타일 상속'이라고 합니다.
CSS3와 CSS 모듈
CSS3란? CSS3는 이전 CSS1, CSS2보다 정교하고 화려한 화면을 구성할 수 있게 되었습니다. CSS3부터는 배경이나 글꼴 박스 모델 등 수십 개 기능을 주제별로 규약을 따로 만들었는데 이것을 'CSS 모듈'이라고 합니다.
모듈별로 진행 속도도 다르고 필요에 따라 새로운 모듈이 생기기 때문에 CSS3는 한번에 표준 규약이 결정되지 않습니다. 다시 말해 CSS3는 'CSS3 표준'이라고 하나로 묶어 말할 수 없고 계속 새로운 CSS모듈이 등장합니다.
https://www.w3.org/Style/CSS/ 사이트에 접속하면 관련 규약을 확인할 수 있습니다.
CSS3와 브라우저 접두사(prefix)
CSS3는 CSS 모듈들이 많고 표준 규약이 완성되지 않은 부분도 많지만 모던 브라우저에서 지원하기 위해 계속 개발되고 있습니다.
또한 표준 규약이 만들어졌더라도 이전 버전의 모던 브라우저 사용자를 고려해 계속 브라우저 접두사를 붙여 사용하기도 합니다.
| 기본형 | 설명 |
| -webkit-column-count:3; | 웹키트 방식 브라우저용(사파리, 크롬 등) |
| -moz-column-count:3; | 게코 방식 브라우저용(모질라, 파이어폭스 등) |
| -o-column-count:3; | 오페라 브라우저 |
| -ms-column-count:3; | 마이크로소프트 인터넷 익스플로러(잘 안쓰임) |