🍁CSS
CSS(Cascading Style Sheets)는 스타일 시트를 의미한다.
CSS는 디자인을 담당하며, HTML 페이지의 서식을 만드는 언어이다.
독립 실행이 안 되며, 반드시 HTML 문서가 있어야 실행할 수 있다.
HTML 서식 기능에서 CSS 서식 기능으로 확장하여 사용한다.
CSS 주요 역할
1. 스타일링
HTML 요소들에 스타일을 적용하여 웹 디자인 작업을 한다.
2. 레이아웃
요소들의 배치와 크기를 조절하는 페이지 레이아웃 작업을 한다.
3. 반응형 웹
디바이스 크기에 맞춰 적절한 레이아웃과 스타일을 제공한다.
4. 웹 접근성 향상
시각 장애인을 위한 스크린 리더의 작업을 한다.
🍁CSS의 시작
html:5!<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
html:5 또는 !를 Enter와 함께 입력하여 자동으로 html 초기 구성을 만들어 줄 수 있다.
CSS의 단축키
주석을 Ctrl + /를 입력하여 작성할 수 있다.
라인 Shift + Alt + 방향키로 코드를 복사할 수 있다.
Ctrl + X로 한 줄 지우기를 할 수 있다.
블럭을 잡고 Ctrl + Shft + P로 코드를 태그 안에 넣을 수 있다.
vertical select
Ctrl + Alt + 방향키로 여러 코드를 동시에 블럭 잡아 수정할 수 있다. 이를 vertical select라고 한다.
Alt와 마우스 클릭으로 구분되어 있는 코드를 동시에 수정할 수도 있다.
🍁CSS의 활용
<style>
하나의 파일은 하나의 언어로만 작성해야 한다.
하나의 파일에 여러 개의 언어로 프로그래밍을 하면 컴파일러가 해야 하는 일이 많아지기 때문이다.
그러나 CSS는 어쩔 수 없이 여러 파일을 붙여야 하는 성질 때문에 <style> 태그가 만들어지게 되었다.
<style> 영역은 HTML 영역이 아닌 CSS 영역으로 생각하면 된다.
- 요구 사항: "안녕하세요." x 5번 출력
- 추가 사항: 글자색을 파란색으로 변경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* CSS 주석 */
div {
color: blue;
}
</style>
</head>
<body>
<h1>HTML만 사용</h1>
<p><font color="blue">안녕하세요.</font></p>
<p><font color="blue">안녕하세요.</font></p>
<p><font color="blue">안녕하세요.</font></p>
<p><font color="blue">안녕하세요.</font></p>
<p><font color="blue">안녕하세요.</font></p>
<hr>
<h1>CSS 활용</h1>
<div>안녕하세요.</div>
<div>안녕하세요.</div>
<div>안녕하세요.</div>
<div>안녕하세요.</div>
</body>
</html>
같은 작업이지만 HTML만을 사용했을 때보다 CSS를 활용할 때 서식 작성을 더욱 편리하게 할 수 있다.
🍁HTML과 CSS 연결
HTML 문서에 CSS를 적용하는 방법을 알아보도록 하자.🍂
인라인 스타일 시트 (Inline Style Sheet)
우리가 사용하는 모든 태그에는 style이라는 속성값을 가지고 있다.
이 style 속성값은 인라인 스타일 시트를 위한 속성값이다.
태그 안에 직접 작성한다고 해서 인라인 스타일 시트라고 한다.
서식을 태그에 직접 적용한다는 특징이 있다.
- 장점: 가독성이 높다.
- 단점: 재사용이 불가능하다.
<h2>오늘의 할 일</h2>
<ul>
<li style="color: blue">VS CODE 설치하기</li>
<li>VS CODE 설정하기</li>
<li style="color: orange">수업 복습하기</li>
<li>개인 과제 제출하기</li>
</ul>
인라인 스타일 시트는 관리하기 힘들기 때문에 사용을 배제하는 게 나을 수 있다.
내부 스타일 시트 (Embeded Style Sheet)
<style> 태그 내에 서식을 명시하는 방법이다.
문서 내의 여러 태그를 한 번에 서식을 일괄 적용할 수 있다.
- 장점: 재사용이 가능하다.
- 단점: 가독성이 낮다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 내부 스타일 시트 */
li {
font-style: italic;
}
</style>
</head>
<body>
<h2>오늘의 할 일</h2>
<ul>
<li style="color: blue">VSCODE 설치하기</li>
<li>VSCODE 설정하기</li>
<li style="color: orange">수업 복습하기</li>
<li>개인 과제 제출하기</li>
</ul>
</body>
</html>
위 코드는 문서 전체를 통틀어서 <li> 태그를 찾아내어 이태릭체로 바꾸라는 의미이다.
해당 파일에서만 서식을 적용하려고 할 때 내부 스타일 시트를 사용하면 좋다.
외부 스타일 시트 (External Style Sheet)
*.css 파일에 서식을 명시하는 방법이다.
<link> 태그를 사용해서 CSS 파일을 HTML 파일에게 적용해야 한다.
HTML 파일에 종속되지 않고 문서를 별도로 분리했기 때문에 재사용성이 가장 높지만, 가독성이 가장 낮다.
- 장점: 재사용성이 가장 높다.
- 단점: 가독성이 가장 낮다.
/* ex02.css */
h2 {
color: orange;
}<h2>오늘의 할 일</h2>
<ul>
<li style="color: blue">VS CODE 설치하기</li>
<li>VS CODE 설정하기</li>
<li style="color: orange">수업 복습하기</li>
<li>개인 과제 제출하기</li>
</ul>
글꼴, 글자 크기 등의 페이지마다 따로 정의하지 않는 서식이 있다.
이런 서식에 외부 스타일 시트로 변경을 해 두면 페이지를 100개를 만들더라도 일괄적으로 적용할 수 있다.
