[1] 개념과 선언하기
- 2021.08.25 -
- 2023.05.05 -
기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다
CSS ( Cascading Style Sheets)
html 웹 문서의 스타일을 표현하는 언어로써 html 코드로 작성된 웹의 요소들이 어떻게 표시되어야 할지를 정의
CSS는 CSS속성, 속성값, 선택자를 이용해서 표현한다.
body { font-size:9pt; } |
body 는 선택자(selector)
font-size 는 CSS 속성
9pt 는 CSS 속성 값
CSS를 선언하는 법
CSS를 html에 적용하는 3가지 방법
(1) 인라인(inline) 스타일
(2) 내부 스타일 시트
(3) 외부 스타일 시트
(1) inline 선언
각 html 태그에 직접 style속성을 이용해서 선언
<p style="font-size:11pt"> ... </p>
장점
Inline 선언은 특정 부분에 대해서 폰트를 다르게 줄 수 있다는 장점이 있다.
단점
Inline선언은 매 태그마다 반복해서 써야함에 따라 코드가 불필요하게 길어지게 되고 추후에 사후관리시 일일이 다 바꿔줘야 하는. 즉, 유지보수의 어려움도 존재한다. 더불어 html과 css코드의 분리가 되지않아서 복잡하게 된다.
(2) 내부 스타일 시트
기존의 html코드안에서 style 태그를 사용하여 태그 내부에서 선언한다.
보통 head태그 내에서 style태그를 작성하는데 선택자라는 문법을 사용한다.
장점
Inline 선언에 비해서 1번만 선언하면 해결된다.
단점
Inline선언의 문제점과 비슷한데 A시트에서 p선언을 통해 내부 스타일시트를 설정했다면 B,C,D ``` 시트들을 모두 선언을 해줘야한다.
Inline보다는 수정이 쉬울 수 있으나 마찬가지로 비슷한 문제가 발생한다.
(3) 외부 스타일 시트
내부 스타일 선언에 선언된 스타일 세트들을 외부파일(*.css)에 선언하고 link태그로 적용하려는 html에 불러오는 방법
main.css
P { font-size:11pt; } |
위 코드를 메인 css파일로 폰트사이즈를 11포인트로 만드는 코드라고 정하자.
사이트 A,B,C,D 시트에서 모두 link태그를 이용해 main.css를 불러오기만하면 사용이가능하고
반대로 수정할때에도 main.css만 수정하면 A,B,C,D 시트 모두 수정할 수 있게 된다.
<head> <link rel="stylesheet" type="text/css" href="main.css"/> <head> |
불러오는 link태그 문법
주 석
개발자를 위한 코드이다.
무효한 코드이고 개발자에게 노트역할을 하는 코드이다.
/* 주석내용을 쓰기 */
마 치 며
어쩌다보니 html에서 css로 넘어가서 공부하게 되었다.
html언어만 배우면 사실 사이트를 만들 수 있을 줄 알았는데
내 크나큰 착각이였다 ㅋㅋ
html이 스케치라면
css은 물감이랄까..
좀 복잡해지는것같은데 아직까지는 잘 따라갈 수 있다.
'Develope > CSS' 카테고리의 다른 글
[4] CSS셀렉터의 종류 및 설명(조합,상태,특성 선택자) (0) | 2023.05.05 |
---|---|
[3] HTML로 작성한 페이지에 Style을 적용해보자 (0) | 2023.05.05 |
[2] 글자와 관련된 스타일 (0) | 2023.05.05 |
댓글
이 글 공유하기
다른 글
-
[4] CSS셀렉터의 종류 및 설명(조합,상태,특성 선택자)
[4] CSS셀렉터의 종류 및 설명(조합,상태,특성 선택자)
2023.05.05 -
[3] HTML로 작성한 페이지에 Style을 적용해보자
[3] HTML로 작성한 페이지에 Style을 적용해보자
2023.05.05 -
[2] 글자와 관련된 스타일
[2] 글자와 관련된 스타일
2023.05.05