css기초
- html이 문서의 뼈대를 만든다면 css는 뼈대에 디자인을 입히는 언어이다.
- css는 위에 있는 속성보다 아래에 있는 속성이 먼저 적용된다는 특징이 있다.
- css문법을 쓸 때에는 선택자가 가장 먼저 등장하고 그 다음 {}안에 속성과 속성값을 :으로 구분하여 나열한다.
- 하나의 속성 선언이 끝나면 ;으로 문장의 마침표를 찍어주어야 한다.
스타일시트
1.내부 스타일시트
: html웹 문서에 < head>태그 안에 < style>태그를 이용해 css를 작성하는 방식을 말한다.
내부 스타일시트는 html코드와 css코드가 길어질 경우 작성과 수정이 불편하고, 파일크기가 커진다는 단점이 있어 잘 쓰이지 않는다.
2. 외부 스타일시트★
: CSS문서를 만들고 CSS폴더에 따로 분리하여 html과 연결해 쓰는 방식을 말한다.
기본적으로 실무에서 가장 많이 사용되는 방식으로 문서관리가 편하고 수정이 편리하다는 장점이 있다.
외부 스타일시트를 만들었을때 link태그로 html파일과 연결할 수 있다. link태그는 < head>안에 써야한다.
[css파일을 html과 연결하는 link태그의 기본형]
<link rel="stylesheet" href="외부파일 경로">
-rel : 연결하려는 파일의 형식을 지정하는 속성.
-hred : 파일 경로 3. 인라인 스타일
: 태그 내부에 style속성을 이용하여 직접 적용하는 스타일을 말한다.
인라인 스타일은 외부스타일 시트와 내부 스타일시트보다 우선순위가 높다.
우선순위가 높으면 다른 방식으로 코드 수정이 어렵기 때문에 인라인스타일은 쓰이지 않는다.
스타일시트의 우선순위
1. 인라인 스타일
2. 내부 스타일
3. 외부 스타일
css의 선택자
- 선택자란 css에서 불러온(선택된) 태그 요소를 말하고 id, class, 태그 선택자로 크게 3가지로 나눠진다.
- 선택자에 따라 우선순위가 달라진다.
id와 class는 태그 안에 쓰는 '속성명'으로, 태그에 이름을 붙여주는 역할을 한다.
1. 태그선택자
: html태그에 스타일을 적용하는 선택자로 태그에 직접 스타일을 적용한다.
태그 선택자는 연결된 html파일안에 동일한 태그가 있으면 공통적으로 동일한 스타일을 적용한다.
태그 선택자는 우선순위가 가장 낮다.
예시) p{속성:속성값;}
img {속성:속성값;}
=> 선택자 자리에 태그 이름을 그대로 쓴다.
2. class선택자
: 특정한 태그에만 스타일을 적용하고 싶은 경우 사용하는 선택자로, 태그에 class="이름(클래스명)"형식으로 이름을 붙여주면
css에서 class선택자를 불러올 때에는 앞에 ,을 붙인후 class이름을 붙여서 {속성:속성값;}을 쓴다. 두번째 우선순위를 가지며 제일 많이 사용
예시)
html에서 이름 붙일때
< h2 class="title">제목< /h2>
< h2 class="title headtitle">제목< /h2> *여러개의 이름을 지은 경우
CSS에서 불러올때
.title{속성: 값;}
3.ID선택자
: id선택자도 이름을 붙여주는 역할을 한다.
이름을 짓는 방법은 class와 동일하며 class와 다른 점은 id로 지은 이름은 단 한번만 사용이 가능하다는 것이다.
자바스크립트에서 이 태그 하나만 불러올 때 주로 사용
태그에 id속성을 적용할때에는 id="아이디명"으로 이름을 지어주고, css에서 이름을 불러올때에는 앞에 '#아이디명' 형식으로 불러온다.
id선택자는 선택자 중에서 제일 우선순위가 높다.
예시)
html에서 이름 붙일때
< h2 id="title">제목< /h2>
CSS에서 불러올때
#title{속성: 값;}
css선택자 적용
- text-decoration : 글자꾸밈. 밑줄이나 취소선등을 보여준다.
- text-align: 글자 정렬. left / centre / right 값을 사용한다. justify는 양끝 정렬
- font-family: 글꼴, 'notosans'과 같이 폰트의 이름을 입력하면 해당 서체로 보인다.
- font-size : 글자 크기. 기본값이 16px이며, 기본 단위는 px이다.
- line-height: 행간(줄 간격) 기본값 28px
- background-color : 배경색
