CSS
*AI의 설명 (Notion AI를 활용해봤습니다.)
CSS란 Cascading Style Sheets의 약자로, 웹 페이지의 디자인과 레이아웃을 지정하기 위해 사용되는 스타일 시트 언어입니다.
CSS는 HTML과 함께 웹 페이지의 미적인 요소를 꾸며주는 역할을 하며, 선택자와 속성, 값으로 이루어진 규칙들을 사용하여 웹 페이지의 폰트, 색상, 배경, 간격 등의 스타일을 정의할 수 있습니다.
또한, CSS는 웹 페이지의 반응형 디자인을 구현하는 데에도 중요한 역할을 합니다. 미디어쿼리를 사용하여 뷰포트의 크기에 따라 스타일을 다르게 적용할 수 있으며, 이를 통해 PC, 스마트폰, 태블릿 등 다양한 기기에서 최적화된 레이아웃을 제공할 수 있습니다.
CSS는 웹 개발에서 필수적인 기술 중 하나이며, 다양한 프레임워크와 라이브러리가 존재하여 보다 쉽게 스타일링을 할 수 있습니다.
CSS를 사용하여 웹 페이지를 꾸미는 방법은 다양합니다. 클래스(class)나 아이디(id)를 사용하여 HTML 요소를 선택하고, 선택한 요소에 스타일을 적용하는 방법이 가장 기본적인 방법입니다.
또한 CSS에서는 상속(inheritance)이라는 개념이 존재합니다. 상위 요소에 스타일을 적용하면 하위 요소에도 그 스타일이 적용되는데, 이를 이용하여 코드의 양을 줄일 수 있습니다.
CSS의 다양한 속성과 사용법을 숙지하면, 보다 다양하고 멋진 웹 페이지를 제작할 수 있습니다. 하지만, CSS는 처음 접하면 어려울 수 있으므로, 많은 연습과 경험이 필요합니다.
CSS의 개념
Cascading Style Sheet의 약자
- CSS는 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소
- 색상이나 크기, 이미지 크기나 위치, 배치 등의 디자인 요소
- 자바스크립트와 연계해 동적 콘텐츠 표현 가능
기본 문법
- 선택자와 선언부로 구성
- 콜론(:) 으로 구분 되어진 다수의 항목을 포함하고, 선언은 항상 세미콜론(;)으로 끝남
선택자 {속성 : 값; 속성: 값; 속성 : 값, ....}
h1 { /* h1태그의 색을 하늘색, 25px로 설정하기 */
color : skyblue;
font-size : 25px;
}
스타일 시트 작성 방법
1. 내부 스타일시트
- 내부에 CSS를 작성하는 방법으로 <head> 태그 사이에 <style> 태그를 이용 이용하여 작성
- 한 파일에 있어 작업이 쉽고 간편하나 CSS가 재활용이 안되어 가급적 외부 스타일시트 사용 권장
<head>
<style>
.h1{
color : skyblue;
font-size : 22px;
}
.box{
margin-left : 20px;
color : white;
</style>
</head>
<body>
/* (생략) */
</body>2. 외부 스타일시트
- css를 작성하는 가장 기본적인 방법
- 별도 파일에 CSS문서를 작성하여 html 문서에서 불러와 사용하는 형식
- CSS의 재활용성이 높음
<link rel="stylesheet" href="파일명.css">
<!-- link 에멧(emmet)을 사용하면 쉽게 사용가능! -->
3. 인라인 스타일
- 디자인 속성을 직접 작성하는 형태
- 디자인을 바로 적용할 수 있다는 편리함
- 일관된 디자인 체계를 유지하는 데에는 방해가 될 수 있음
<div class="box" style="color: aqua; height: 20px; width: 30px;"></div>
<h1 style = "color : yellow; margin-right: 10px;">안녕하세요</h1>
특징
- 케스 케이딩 → 디자인 속성이 상위 요소에서 하위 요소로 전달되는 상속 개념에서 유래
<!-- body 태그 안의 요소들이 파란색으로 표시 -->
<body style="font-color:blue">
<h1>Hello</h1>
</body>
- CSS의 스타일 시트는 우선 순위가 존재
- (우선순위 낮음) 브라우저 디자인 정의 → 외부 스타일시트 → 내부 스타일시트 → 인라인 스타일시트 (우선순위 높음)
셀렉터
- 스타일의 적용 대상
- 태그, 아이디, 클래스를 셀렉터로 사용
- 디자인이 적용되기 원하는 부분에 적절한 태그 구조를 사용
- .class / #id / * / 태그 등의 셀렉터 존재
기본 셀렉터
- 태그 셀렉터 : h1, p, div 등의 태그 이름으로 셀렉터 지정
p {
color : green;
font-size: 20px;
text-align: center;
}
/* 같은 디자인 속성을 가지는 여러 태그는 ,로 나열해 적용 가능 */
h1, h2 {
color : orange;
}
- 클래스 셀렉터 : .class 이름으로 셀렉터 지정
.box {
color: aqua;
border: 1px solid black;
}
/* 특정 클래스 속성이 있는 요소를 선택하여 .name(클래스 이름) 형태로 사용 */
...
<div class = "box">
...
- ID 셀렉터 : #id 이름으로 셀렉터 지정할 수 있고, id는 페이지 내에서 유일한 값
#name {
font-size: 35px;
}
...
<div id="name">
...
'개발 > html & CSS' 카테고리의 다른 글
| CSS의 기본 개념 - 정리 3 (0) | 2023.03.19 |
|---|---|
| HTML의 기본 개념 - 정리 (0) | 2023.03.19 |
| CSS의 기본 개념 - 정리 2 (0) | 2023.03.10 |
댓글