CSS (Cascading Style Sheets)의 의미
- HTML이 문서의 골격을 만든다면 CSS는 문서의 디자인적 요소를 담당한다.
- CSS를 사용하면 HTML의 내용이나 구조를 건드리지 않고 디자인을 일괄적으로 수정할 수 있어 용이하다.
- CSS를 사용하면 PC환경 뿐만 아니라 모바일 기기 등에도 최적화화여 반응형 웹 디자인을을 할 수 있다.
준비하기
- 크롬 Web Developer 확장 기능 설치하기 (chrome.google.com/webstore)
- Web Developer 검색 후 설치
- 기능 테스트 (CSS 꺼보기)
스타일의 기본 형식
선택자 {
속성1: 속성값1; 속성2: 속성값2;
}
예시 (P 태그로 쓰인 모든 글을 가운데 정렬하고 파란색으로 바꾸기)
p {
text-align: center;
color: blue;
}※ 한 줄로 쭉 나열해도 되지만 한 줄에 속성 하나만 표기하는 것이 가독성이 좋아 많은 개발자가 이런 방식으로 CSS 소스를 작성하고 있다.
CSS 경량화 하기
CSS는 최대한 용량이 적고 가벼워야 다운로드 및 페이지 로드에 유리하다. 따라서 작성된 CSS의 주석을 없애고 코드를 한 줄로 줄여주는 것을 CSS 경량화 (CSS minify 또는 CSS compress)라고 한다. 이걸 도와주는 사이트가 많이 있다.
최종 배포 전에는 이런 식으로 경량화하여 배포하면 좋다.
CSS Style의 위치
내부 스타일 시트
CSS는 웹 페이지의 정보가 load 되기 전 결정해야 하므로 문서의 내용인 body보다 상단인 head 내에 <style>로 감싸 작성한다. 이것을 내부 스타일 시트라고 한다.
<head>
<style>
</style>
</head>외부 스타일 시트
여러개의 .html 파일에 모두 같은 <style>을 수정할 때마다 복사 붙여넣기 하는 것은 불필요한 낭비다. 따라서 별도의 .css파일을 만들어 같은 디렉토리에 위치시키고 CSS를 적용시킬 html 파일에서는 아래의 링크를 걸어준다. 일반적으로 <title>아래에 걸어준다.
<link rel="파일 위치" href="css/style.css(파일명)">인라인 스타일
단순히 한 두 개의 태그 등에만 적용시키는 경우 태그 자체에 스타일을 적용시킬 수 있다.
<p style="color:blue;"></p>
'Programing > CSS' 카테고리의 다른 글
| 케스케이딩 스타일 시트 (0) | 2024.02.26 |
|---|---|
| CSS의 기본 선택자 (0) | 2024.02.26 |
| CSS Grid (0) | 2024.02.24 |
| 부트스트랩 사용 (0) | 2024.02.22 |
| 웹 폰트 (0) | 2024.02.22 |
댓글