오늘은 CSS에 대해 알아보는 시간을 갖겠습니다.
CSS(Cascading Style Sheet)란 무엇인가?
CSS는 사용자에게 문서를 표시하는 방법을 지정하는 언어이다. ex) 스타일, 레이아웃 등. - MDN
웹 사이트에서 화면에 표시되는 정보들을 꾸며주는 역할
즉, html은 문장의 구조를 만들고 css는 문장을 브라우저에 어떻게 보여줄지 지정하는 언어
이렇게 하여 구조와 디자인이 분리되었습니다.
📝 CSS를 사용하는 방법은?
1. HTML 안에서 Style 속성을 이용 (인라인 스타일)
=> 태그 안에 스타일 속성을 주고 속성값을 넣어주는 방법
2. <style> 태그를 통해 HTML 문서 내부에서 이용 (내부 스타일 시트)
=> <head> 태그 안에 <style> 태그를 넣어주고 타입으로 "text/css" 속성값을 주는 방법
3. 별도로 CSS 파일을 분리하여 HTML의 문서에 연결 (외부 스타일 시트)
=> 기존에 *.html 파일 말고도 *.css 파일을 생성해 .css 파일 내에서 스타일링을 하고 html에서 연결하는 방법
=> link라는 태그를 이용해 css 파일 이름을 넣어주면 *.html 파일이 해당 css 파일을 로드함
📝 스타일 적용의 우선 순위
인라인 스타일 > 내부 스타일 시트, 외부 시타일 시트 > 웹 브라우저 기본 스타일
* 스타일 적용 방법들이 혼합되어 사용될 경우, 내부나 외부 사타일 시트와 상관없이 인라인 스타일이 적용됩니다.
📝 CSS 기본 구조
다음엔 CSS 기본 속성에 대해 포스팅 하겠습니다! (업로드 완료)
CSS 기초 개념 완전 정복(2) - CSS 기본 속성
[Deep Dive] CSS 기초 개념 완전 정복(2) - css 기본 속성
오늘은 자주 사용하는 CSS 기본 속성들에 대해 포스팅하려고 해요. 예시 코드는 내부 스타일 시트를 사용했습니다. 1. 백그라운드 색 지정- 색 이름: white, blue, black- rgb값: rgb(10. 150, 255)- Hax값: #F
zero-talk.tistory.com
'☁️ 구름 x 카카오 Deep Dive 풀스택' 카테고리의 다른 글
| [Deep Dive] CSS 기초 개념 완전 정복(3) - CSS 색을 표현하는 방법 (0) | 2024.11.19 |
|---|---|
| [Deep Dive] CSS 기초 개념 완전 정복(2) - CSS 기본 속성 (0) | 2024.11.17 |