CSS는 영어로 Cascading Style Sheet 약자로 HTML과 함께 사용되는 기본 웹 디자인 요소입니다. 개발자는 이를 통해 스타일, 레이아웃, 색상과 크기 등을 원하는 대로 지정하여 웹 페이지의 디자인을 조정할 수 있습니다 . 텍스트 색상이나 배경화면 색상 같은 기본 CSS 속성은 언제나 쉽게 변경이 가능하며 다양한 기기 (pc, 스마트폰, 노트북 등)에 맞게 콘텐츠가 변경하게 할 수 있습니다.
CSS 기본 개요
특정 요소 또는 요소 그룹을 지정하는 것을 선택자라고 합니다. 선택자를 속성과 값으로 스타일링하는 것을 CSS 선언이라고 합니다. CSS 선언은 중괄호 '{}' 안에 작성되며, 세미콜론 ' ; '으로 구분됩니다.
CSS 적용하기
1. 외부 스타일 (External style) : css 작성할때 가장 기본적인 방법으로 html 파일이 아닌 별도의 파일에 css 작성하고 html 문서에서 불러와 적용하는 방식입니다. css 파일명은 보통 style, styles 등으로 작성하며 파일명 끝에 .css가 들어가야 css 파일인걸 인식합니다. html 파일에서 css 파일 적용하려면 <link rel="stylesheet" href="css 파일명.css" />으로 서로 연결해 줍니다. (<link> 태그는 <head> 태그안에 있어야 합니다)
2. 내부 스타일 (Internal style) : 외부 css 파일에서 작성하는 것이 아니라 html 파일 내에서 css 스타일링을 해줍니다. 단 html <head> 안에 포함된 <style> 요소 내부에 css 내용 작성합니다.
3. 인라인 스타일 (Inline style) : css 내용을 html 요소내에 직접 포함하는 것입니다, 따라서 css 파일에서 작성하지 않고 html 파일에서 작성하면 됩니다.
css Selector: html 요소에 id나 class를 지정하고 css 파일에서 지정된 이름으로 스타일링 적용이 가능합니다. 하단에 <h3>에 class "hello"을 지정해 주고 css 파일에서 h3가 아닌 .hello로 css을 적용했습니다.
참고 : https://dinfree.com/lecture/frontend/122_css_1.html
CSS 프로그래밍 기초
CSS가 무엇인지 배우고 HTML 문서에서 CSS 를 작성하는 법을 배웁니다.
dinfree.com
참고 : https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps/What_is_CSS
CSS 란 무엇인가? - Web 개발 학습하기 | MDN
CSS (Cascading Style Sheets) 를 사용하면 멋진 웹 페이지를 만들 수 있지만, 어떻게 작동할까요? 이 기사에서는 간단한 구문 예제를 통해 CSS가 무엇인지 설명하고 CSS에 대한 몇 가지 주요 용어를 다룹
developer.mozilla.org
'웹 개발 (Frontend Developer) > CSS' 카테고리의 다른 글
| 여백 상쇄 (Margin Collapse) (1) | 2024.09.20 |
|---|---|
| CSS : 박스 모델 (Box Model) (5) | 2024.09.20 |
