CSS란?
CSS는 마크업언어가 실제로 표시되는 방법을 기술하는 스타일 언어이다. (Cascading Style Sheet)는 HTML과 XHTML에 주로 쓰이며, 스타일을 정의할 때 자유도가 높다. 마크업이 뼈라면 CSS는 살로 보면 된다.
HTML은 그대로 냅두고, CSS만 변경해도 전혀 다른 홈페이지로 구현할 수 있다는 것을 알 수 있다.
CSS적용방법은 3가지가 있다.
인라인 스타일( Inline CSS )
빠르고 편리하지만, 많아질수록 가독성이 떨어지고 화면에 웹 페이지가 로딩되는 시간을 오래 걸리게 한다.
태그와 스타일이 혼잡해져 유지보수에 좋지 않다는 단점이 있다.
<h1 style="color: red"></h1>
내부 스타일( Embedded CSS )
HTML 파일 내에 style(css)를 구분하여 작성하는 방법이며 이 또한 편리하고 빠른 방법이다.
하지만 HTML과 분리되어있지 않기 때문에 유지보수에 적합하지 않는다는 단점이 있다.
inline과 embedded의 차이는 inline은 특정 HTML 태그에만 스타일이 적용되지만,
embedded는 <head> 태그가 로드되는 하위에 모든 HTML 페이지에 스타일이 적용된다.
<style>
h1 {color: #ccc}
</style>
외부 스타일 CSS 파일( External CSS ) 과 사용 방법
일반적으로 가장 권장하는 방법이다. 이 방법은 CSS와 HTML이 물리적 파일로 분리가 되어 유지보수가 편해지는 장점이 있다.
먼저 'style.css'라는 파일을 만들고 HTML안에 Link로 삽입해주자.
여기서 팁! 🫰파일을 미리 만들어놓지말고 링크 태그 삽입 후 css의 파일명을 입력해준다.
그리고 ctrl+링크를 클릭하면 "파일이 없습니다. 새로 만들까요?" 라는 문구가 나온다.
확인을 눌러주면 파일이 생성 되는 것을 볼 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset"utf-8">
<title>웹 페이지 제목</title>
<link href="테스트.css" rel="stylesheet">
</head>
CSS 작성법
먼저 body 안에 클래스명을 지정해주고
방법1.
<body>
<h1 class="title">안녕하십니까~~</h1>
</body>
css 파일에서는 h1에 해당하는 클래스명을 입력해주고 본인이 주고싶은 효과를 넣어준다.
.title {color: #red;}
그러면 위와 같은 텍스트 효과를 줄 수 있다.
방법2.
<body>
<h1 class="title">안녕하십니까~~</h1>
<h2 class="title">하이루하이루</h2>
</body>
조심해야할 점은 클래스명을 해당 영역에 맞게 잘 지어야하고, 같은 요소가 아닌 이상 중복되는 클래스명을 사용하지 말아야한다.
만약 클래스명을 중복해서 입력할 경우, 같은 텍스트 효과 속성을 위 이미지와 같이 동일하게 가져갈 수 있다.
방법3.
영역만 잘 구분지어서 하면 중복되는 텍스트 속성값이 없다. 하지만 이 방법은 좋지 않은 방법이므로 사용하지 않는 것을 권장한다.
만약 똑같은 요소를 가져가야한다면 그 때는 클래스값이 중복되어도 좋다.
ex) 똑같은 컨텐츠가 있을 여러 개일 경우에는 클래스명을 중복해도 좋음.
<body>
<div class="box1">
<h1 class="title">안녕하십니까~~~</h1>
</div>
<div class="box2">
<h2 class="title">하이루하이루</h2>
</div>
</body>.box1 > .title {color: red;}
.box2 > .title {color: blue;}
CSS 우선 순위
inline > embedded > external위 세 가지 방법을 동시에 적용했을 때, 우선 순위가 가장 높은 것은 inline이다.
'CSS > CSS' 카테고리의 다른 글
| [CSS] CSS3이 뭘까? CSS의 역사 알아보기 (0) | 2023.11.27 |
|---|