웹 개발의 중요한 요소인 CSS에 대해 알아보겠습니다.
CSS는 웹 페이지의 디자인과 레이아웃을 담당하는 역할을 하며,
html로 만든 사이트를 더욱 이쁘게 보이도록 하는데 도움을 줍니다.
1. CSS란 무엇인가?
CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 정의하는 언어입니다. HTML이 구조를 담당한다면, CSS는 그 구조를 시각적으로 꾸며주는 역할을 합니다. CSS를 사용하면 글꼴, 색상, 간격, 정렬 등 다양한 시각적 요소를 쉽게 조정할 수 있습니다.
CSS의 기본 구조
CSS는 선택자와 선언 블록으로 이루어집니다.
선택자 {
속성: 값;
}
예를 들어, 아래의 코드는 모든 <h1> 태그의 색상을 파란색으로 설정하는 방법입니다.
h1 {
color: blue;
}2. CSS 적용 방법
CSS를 HTML에 적용하는 방법은 세 가지가 있는데요:
1.인라인 스타일: HTML 요소 안에 style 속성을 사용하여 적용함
<h1 style="color: blue;">Hello World</h1>2. 내부 스타일 시트: HTML 파일의 <head> 태그 안에 <style> 태그를 사용하여 적용함
<style>
h1 {
color: blue;
}
</style>
3. 외부 스타일 시트: 별도의 CSS 파일을 생성하고 <link> 태그를 사용하여 HTML에 연결함
<link rel="stylesheet" href="styles.css">외부 스타일 시트는 유지보수가 쉽고 코드 재사용이 가능해서 권장되는 방식이라고 합니다.
3. CSS 선택자 기본
CSS에서 특정 HTML 요소에 스타일을 적용하기 위해서는 선택자를 사용해야 합니다!
대표적인 CSS 선택자에는 다음과 같은 것들이 있습니다.
- 태그 선택자: HTML 태그 이름을 기준으로 선택함
p { color: gray; }- 클래스 선택자: 클래스 이름을 기준으로 선택하며 클래스는 .을 사용하여 표시함
.highlight { background-color: yellow; }- 아이디 선택자: HTML 요소의 아이디를 기준으로 선택하며 아이디는 #을 사용하여 표시함
#main-title { font-size: 24px; }4. CSS 레이아웃 기법
CSS로 웹 페이지의 레이아웃을 구성하는 방법은 다양한데요. 주로 사용하는 기법에는 Flexbox와 Grid가 있다고 합니다!
Flexbox
Flexbox는 요소들을 1차원으로 정렬할 때 사용하기 좋고, 간단한 수평 및 수직 정렬에 유용함
.container {
display: flex;
justify-content: center;
align-items: center;
}Grid
Grid는 2차원 레이아웃을 구성하는 데 좋으며, 복잡한 레이아웃을 효과적으로 설계할 수 있음.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}5. CSS로 애니메이션 추가하기
CSS로 웹 페이지에 간단한 애니메이션을 추가할 수도 있습니다.
애니메이션을 사용하면 요소가 천천히 나타나거나 움직이는 등의 효과를 줄 수 있는데요.
알아봅시다.
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 2s ease-in;
}6. 반응형 웹 디자인
반응형 웹 디자인은 다양한 기기 화면 크기에 따라 웹 페이지가 자동으로 조정되도록 만드는 기술로
주로 미디어 쿼리를 사용하여 특정 조건에 따라 다른 스타일을 적용한다고 합니다.
@media (max-width: 600px) {
body {
font-size: 14px;
}
}이렇게 코드를 짜게 되면 화면 크기가 600px 이하일 경우 글꼴 크기가 자동으로 조정된다고 보면 될 것 같습니다.
(ps. 늦어서 죄송합니다)
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2024-2 웹기초 스터디] 김재승 #3주차 (1) | 2024.11.14 |
|---|---|
| [2024-2 웹기초 스터디] 김지수 #3주차 (0) | 2024.11.14 |
| [2024-2 웹기초 스터디] 이민형 #2주차 (3) | 2024.11.07 |
| [2024-2 웹기초 스터디 #2주차] 김민재 - CSS (0) | 2024.11.07 |
| [2024-2 웹기초 스터디] 김지수 #2주차 (1) | 2024.11.06 |
