Front-End/HTML & CSS
[CSS] 정의 & 특징 & 적용방법
Voyage_dev
2022. 2. 22. 23:19
정의
- Cascading Style Sheet
- HTML과 함께 웹을 구성하는 기본 프로그래밍 요소
- 색상이나 크기, 이미지 크기나 위치, 배치 방법 등 웹 문서의 디자인 요소를 담당
- 웹 페이지에 다양한 스타일을 적용하므로 애플리케이션 페이지를 표시하는 프로세스를 단순하게 만들어주는 디자인 언어
- css가 없으면 옷을 입지 않은 것과 같다
- 자바스크립트와 연계해 동적인 콘텐츠 표현이나 디자인 적용 가능
Cascading 의미
- 사전적 의미로는 폭포처럼 떨어져 내리는
- 상위 태그에서 정의된 디자인 속성은 하위 태그로 상속
- 하위 태그에서 상위 태그에 정의된 디자인 속성을 변경할 수 있음
- 동일한 디자인 속성이 외부,내부,인라인 스타일 시트에 적용 되어 있는 경우 우선순위는 가장 나중에 정의되는 스타일에 있다
- 정의된 세부적인 정의가 있다면 쓰고, 없다면 다음 기본 지정된 아이로 넘어간다
Author style - 우리가 지정하는 style sheet 파일
User style - 브라우저 상에서 우리가 다크 모드를 쓴건지 글자 크기를 조정하고 싶은지 사용자 취향에 맞게 브라우저에서 스타일링을 바꿀 수 있듯이 유저가 사용자가 지정한 스타일
Browser - 기본적으로 지정된 스타일
- 우리가 정의한 스타일이 최고의 우선순위
- 우리가 정의한 스타일이 없다면 → 유저로 (사용자) → 브라우저
- 딱딱딱 떨어지는 연결고리가 cascading
브라우저 디자인 정의 → 외부 스타일시트 → 내부 스타일시트 → 인라인 스타일시트
이 순서가 우선순위가 결정된다!
CSS (Cascading Style Sheet) 특징
기능 확장성
- HTML 요소들 대부분 기능에 다양한 기능을 추가할 수 있다
- 기능까지도 변경 가능
- 다양한 폰트 사이즈와 줄간격 등의 기능 사용 가능
양식의 모듈화
- 통일감 있게 구성가능
- 스타일 변경이 생겨도 css파일만 변경
간편성
- 문서의 형식을 다양하게 구성할 수 있다
- 각 요소를 문서의 원하는 위치에 자유롭게 배치 할 수 있다
CSS를 사용해야 하는 이유
- 반응형 디자인이 가능 : 다양한 기기에 맞게 탄력적으로 바뀌는 콘텐츠
- 동일한 문서구조를 가지고 서로 다른 css 테마 적용이 가능
CSS 적용 방법
- CSS를 적용하는 방법에는 내부, 외부 스타일시트 와 인라인 스타일 총 3가지
내부 스타일시트
- html 파일 안에 스타일을 기술하는 방법으로 head태그 사이에 style 태그 부분에 작성
- 작업이 쉽고 간편하지만 css의 재활용이 안되는 문제가 있어 권장하지 않는 방법
<head> <style> body { background-color: red; }
h1 { color: maroon; margin-left: 40px; } </style> </head> <body> ... </body>`
외부 스타일시트
- 가장 기본적인 방법
- 별도의 파일에 css 문서를 작성하고 필요로 하는 html 문서에 불러와 사용하는 방법
- 동일한 서버에 있어도 되며 url을 통해 다른 서버의 css를 불어오는 것도 가능
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="http://cdn.site.com/css/mystyle.css">
인라인 스타일
- html 태그에 필요한 디자인 속성을 직접 작성하는 방법
- 필요한 디자인을 그때그때 바로 적용가능
- 일관된 디자인 체계가 아니므로 권장하지 않는 방법
🔥 <h1 style="color:blue; margin-left:30px;">This is a heading</h1>
참고 :
https://www.1day.co.kr/board/skin/ggambo6210_board/print.php?id=lec_html&no=63
HTML웹 프로그래밍 입문 - 윤인성