CSS란 ???
css는 CascadingStyleSheet의 약자입니다.
Cascading(계단식)처럼 위에서 아래로 스타일이 적용되는 문서라고 이해하시면 됩니다.
위에는 스타일 문서의 작동원리지만, CSS는 html의 뼈대에 디자인을 입혀 가독성을 더 뛰어나게하고, 웹사이트의 분위기를 한층 더 업그레이드 해줍니다. 또한 CSS로 반응형 웹을 만들 수 있습니다.
CSS 문법과 규칙
선택자 { 속성1: 속성값1; 속성2: 속성값2; }
- 선택자(html태그)를 적어준다.
- 중괄호를 열어준다
- 속성 : 속성값; 을 넣어주고
- 중괄호를 닫아준다.
❗️여기서 중요한건 속성 :(콜론) 속성값을 넣어준다음에 ;(세미콜론)을 넣어줘야만 합니다.
속성이 하나만 들어가는게 아니라 여러개 들어간상태에서 세미콜론을 빼먹게되면 그 이후에 css(스타일)이 적용이 안됩니다.
CSS 연결방법
인라인 스타일 방식
인라인 스타일은 html 태그에다가 작성하는 방식을 말합니다.
이 방법을 사용하게되면 너무나도 안좋습니다
- 유지보수 관리가 힘들다.
- 반응형 웹을 만들 수가 없다.
- html은 뼈대의 역할이지만 css도 같이 사용하게되면 가독성이 너무 떨어진다.
<!-- 인라인방식
<h1 style="속성: 속성값;">DH Blog!!!<h1>
-->
<h1 style="color: red; font-size: 20px; ">DH Blog!!!<h1>내부 스타일 방식
내부 스타일 방식은 head태그에다가 style태그를 넣어서 사용하는 방식이고, 가볍게 무엇을 만들어볼 때 많이 사용하지만 실제로 작업할때에는 사용하지 않는다.
<!DOCTYPE html>
<html>
<head>
<title>DH Blog</title>
<style>
h1 {
font-size: 30px;
}
</style>
</head>
<body>
<h1>DH BLOG CSS PART</h1>
</body>
</html>외부링크 방식
외부링크 방식은 무조건적으로 사용한다고 생각하면 좋습니다. 아니 무조건 사용하셔야합니다.
외부링크 방식은 확장자명(.css) 파일을 새로 만들어서 head태그에서 불러오는 방식입니다.
<!DOCTYPE html>
<html>
<head>
<title>DH Blog</title>
<link rel="stylesheet" href="CSS 경로" />
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<h1>DH BLOG CSS PART</h1>
</body>
</html>혹시나 rel="stylesheet"에서 오타가 나게되면 스타일 문서로 읽질못합니다.
매우 주의하셔야합니다. 아니면 vscode에서 emmet기능을 이용하시는게 좋습니다.
(link치고 enter 누르시면 됩니다.)
참고자료
FE개발자로 가보자.