HTML을 이용해 웹페이지를 제작 할 때 허전함과 동시에 웹페이지를 이쁘게 꾸미고 싶은 욕심이 생긴다. 이러한 욕심을 채워 줄 'CSS'. 기초부터 알아보자!
CSS이란?
각 요소들이 어떻게 보이는가에 대한 정의를 하는데 사용되는 스타일 시트(style sheet)언어로, 웹페이지 스타일 즉 디자인 요소를 담당한다.
CSS 기본 문법
선택자(Selector) {
속성(Property):값(Value);
속성2(Property2):값(Value);
}*** CSS에서 주석은 이런 식으로 진행된다.
/* 주석처리 */CSS 스타일의 종류
1. 외부 스타일 시트(External Style Sheet)
외부에서 작성된 CSS문서 즉, 스타일 시트 파일을 연결하여 사용한다.
HTML 파일의 <head> 부분에 외부 스타일 시트를 연결하기 위한 정보를 추가해준다.
<head>
<link rel="stylesheet" href="외부 스타일 파일 주소" type="text/css">
</head>
href: 링크할 파일의 경로. HTML 문서와 같은 폴더에 있으면 확장자를 포함한 파일명만 써주고, 그렇지 않으면 파일의 주소 전체를 써준다.
rel: 현재 문서와 링크할 문서의 관계.
type: 연결할 문서의 유형(text/css는 텍스트 파일로 된 CSS 유형이라는 뜻).
2. 내부 스타일 시트(Internal Style Sheet)
<head>태그 부분에 <style>태그를 사용하여 CSS스타일을 적용한다.
<head>
<style>
body{
color:blue;
}
</style>
</head>3. 인라인 스타일(Inline Style)
HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용한다.
<h1 style="color:blue;">선택자(Selector)
선택자라는 것을 통해 특정 요소들을 선택하여 스타일 적용 가능!
tag선택자
h1{속성:값;}id선택자
#name{속성:값;}class선택자
.name{속성:값;}- 전체 선택자
* {속성:값;}스타일의 우선 순위
- !important → 스타일에 강제 스타일 적용 시 사용
ex)color:blue; !important;- 인라인 스타일(Inline style)
ex)<h2 style="color:blue;">- 선택자
id- 선택자
class- 선택자
tag
RN App Developer