이번 포스팅에서는 웹 브라우저에 스타일을 입혀주는 CSS에 대하여 다뤄보겠습니다.
웹 퍼블리싱의 꽃인 CSS이니 재밌게 따라하실 수 있을 겁니다.
1. CSS란?
CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념인데요.
HTML이 웹 문서의 뼈대를 만드는 것이라면 CSS는 웹 문서의 디자인을 담당하는 살을 입히는 과정입니다.
CSS를 통하여 같은 내용의 문서라도 다양한 스타일로 표현할 수 있으며, 다양한 기기에서도 적절하게 표현이 가능하도록 만들어 줍니다.
2. 스타일 적용 방법
CSS는 적용 방법이 총 세가지가 있는데요.
내부 스타일 시트, 외부 스타일 시트, 인라인 스타일이 있습니다.
가장 많이 사용되는 방법은 외부 스타일 시트 방법이지만, 내부 스타일 시트와 인라인 스타일도 상황에 따라 사용되고 있으니 모두 알고 계시는게 좋습니다.
▶ 내부 스타일 시트
내부 스타일 시트는 HTML 문서의 <head>에 작성하며, <style> 태그 내부에 스타일을 작성합니다.
<head>
<style>
h1 {
font-size:12px;
}
</style>
</head>
위의 예시는 HTML 문서에 있는 <h1> 태그의 폰트 크기를 12px로 스타일을 지정하는 것입니다.
▶ 외부 스타일 시트
외부 스타일 시트는 웹 문서에 적용할 스타일을 별도의 파일로 저장해둔 뒤, 필요할 때 마다 파일에서 스타일을 가져와 사용하는 방법입니다.
따로 저장하는 파일은 ".css" 확장자를 사용하며, HTML 문서의 <head> 안에서 파일을 불러옵니다.
<head>
<link rel="stylesheet" src="../css/style.css">
</head>
"rel" 의 속성값으로 stylesheet가 선언되어 스타일 시트로 사용할 파일을 불러오는 것이며, 앞서 포스팅에서 설명한 상대 경로로 css 파일을 불러온 예시입니다.
해당 예시대로 css 파일을 불러오게 되면 기존에 style.css에 적용해둔 스타일이 불러온 HTML 문서에 자동으로 적용됩니다.
▶ 인라인 스타일
인라인 스타일은 스타일을 적용할 대상에 직접 스타일을 작성하는 방법인데요.
스타일을 적용할 태그에 "style" 속성을 사용하여 스타일을 지정할 수 있습니다.
<h1 style="font-size:12px;">
위의 예시는 내부 스타일 시트 예시와 동일하게 h1 태그에 폰트 크기를 12px로 지정하는 것이지만, 내부 스타일 시트와 다르게 문서 전체의 <h1> 태그에 스타일이 적용되지 않고 인라인 스타일을 선언한 태그에만 해당 스타일이 적용되는 것이 차이점입니다.
스타일은 적용 방법에 따라 우선 순위가 있는데요.
차례대로 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트 순으로 우선 순위가 높습니다.
따라서, 외부 스타일 시트를 불러와도 인라인 스타일이 적용되어 있는 태그에는 영향을 미치지 않습니다.
3. 스타일 표기법/주석
스타일을 적용하기 위해서는 정해진 규칙에 따라 작성해야 합니다.
스타일 적용 방법은 아래와 같습니다.
h1 {
font-size:12px;
}
위의 예시에서 h1을 "선택자"라고 하며, font-size를 "속성", 12px을 "속성값"이라고 하는데요.
스타일 적용 방법은 [선택자 {속성: 속성값;}] 입니다.
선택자를 선언한 후 중괄호 속에 속성과 속성값을 넣어 사용하며, 속성과 속성값 사이는 콜론(:)으로 구분합니다.
그리고 속성값 뒤에 세미콜론(;)으로 선언이 종료됨을 알리면 됩니다.
h1 {
font-size:12px;
color:#000;
}
위의 예시처럼 한개의 선택자에 여러개의 스타일을 작성하는 것도 무관한 점 참고해 주세요.
css에도 주석 기능을 사용하여 설명이나 메모를 남길 수 있는데요.
주석을 선언하는 방법은 아래와 같습니다.
/* 주석입니다. */
h1 {
font-size:12px;
}
주석 선언은 [/* 내용 */] 으로 사용하며, 내용은 개행이 되어도 상관없습니다.
실제 업무를 진행하다보면 주석으로 프론트엔드나 백엔드 개발자에게 전달해야하는 메모가 많아지므로, 연습할때부터 주석 기능을 많이 활용해보시면 좋을 것 같습니다.
여기까지 CSS의 기본에 대하여 설명드렸는데요.
다음 포스팅부터는 직접 스타일링에 필요한 속성들에 대하여 다루도록 하겠습니다.
오늘도 읽어주셔서 감사합니다.
좋은 하루 보내세요! :)
'웹 퍼블리싱 > CSS' 카테고리의 다른 글
| 16. Web font, line-height (0) | 2023.05.02 |
|---|---|
| 15. font-weight, font-style, color (0) | 2023.04.30 |
| 14. font-family, font-size (0) | 2023.04.28 |
| 13. 문서 구조 선택자, 가상 선택자 (0) | 2023.04.27 |
| 12. 주요 선택자 (0) | 2023.04.25 |
댓글