CSS - 빠른 가이드
안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 CSS의 다채로운 세계로 접수합니다. 안전벨트를 채우세요,因为你即将踏上一段将永远改变你看待网站的旅程!
CSS는 무엇인가요?
CSS, 즉 캐스케이딩 스타일 시트는 웹 세계의 패션 디자이너입니다. HTML이 웹사이트의 뼈대라면, CSS는 피부, 옷차림, 그리고 메이크업입니다. 웹사이트가 아름답고 독특하게 보이는 것을 만드는 것입니다.
당신이 집을 짓는다고 상상해보세요. HTML은 벽돌과 시멘트라면, CSS는 페인트,壁纸, 그리고 가구입니다. 단순한 구조를 집으로 만드는 것입니다.
simple 예제로 시작해보겠습니다:
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}이 작은 CSS 조각은 브라우저에게 전체 페이지를 연한 회색(#f0f0f0)으로 칠하도록 지시하고, Arial을 기본 폰트로 사용하도록 합니다. Arial이 사용할 수 없다면, 임의의 산세리프 폰트를 사용합니다.
CSS - 문법
CSS 문법은 레시피와 같습니다. 두 가지 주요 부분으로 구성됩니다: 선택자와 선언 블록.
selector {
property: value;
}선택자는 스타일을 적용하고 싶은 HTML 요소를 가리킵니다. 선언 블록은 세미콜론으로 구분된 하나 이상의 선언을 포함합니다. 각 선언은 CSS 속성 이름과 값으로 구성되어 콜론으로 구분됩니다.
보다 복잡한 예제를 살펴보겠습니다:
h1 {
color: blue;
font-size: 24px;
text-align: center;
}여기서 우리는 모든 <h1> 요소를 타겟으로 삼습니다. 텍스트를 파랑색으로 만들고, 크기를 24픽셀로 설정하고, 페이지 중앙에 정렬합니다.
CSS - 포함
HTML에 CSS를 포함하는 방법은 세 가지가 있습니다:
- 인라인 CSS
- 내부 CSS
- 외부 CSS
인라인 CSS
인라인 CSS는 style 속성을 사용하여 직접 HTML 요소에 적용됩니다. 한 사람에게 패션 조언을 주는 것과 같습니다.
<p style="color: red; font-size: 16px;">이것은 빨간색段落입니다.</p>내부 CSS
내부 CSS는 HTML 페이지의 <head> 섹션에 <style> 태그 안에 배치됩니다. 모든 파티 참석자에게 드레스 코드 규칙을 설정하는 것과 같습니다.
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
</style>
</head>외부 CSS
외부 CSS는 별도의 .css 확장자 파일에 저장되며, <link> 태그를 사용하여 HTML 파일에 연결됩니다. 모든 사람이 참조할 수 있는 패션 잡지를 만드는 것과 같습니다.
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>CSS - 측정 단위
CSS에는 길이를 표현하는 여러 단위가 있습니다. 가장 일반적인 단위를 살펴보겠습니다:
| 단위 | 설명 |
|---|---|
| px | 픽셀 (1px = 1/96인치) |
| % | 백분율 |
| em | 요소의 폰트 크기에 상대적 (2em은 현재 폰트 크기의 2배를 의미) |
| rem | 루트 요소의 폰트 크기에 상대적 |
| vw | 뷰포트 너비의 1%에 상대적 |
| vh | 뷰포트 높이의 1%에 상대적 |
다양한 단위를 사용하는 예제:
div {
width: 300px;
height: 50%;
font-size: 1.5em;
padding: 2rem;
margin-top: 10vh;
}CSS - 색상
CSS에서 색상은 여러 가지 방법으로 지정할 수 있습니다:
- 이름으로:
red,blue,green등 - RGB 값으로:
rgb(255, 0, 0)은 빨간색을 의미 - 16진 코드로:
#FF0000은 빨간색을 의미
이这些东西을 실제로 사용해보겠습니다:
h1 {
color: blue;
}
p {
color: rgb(255, 0, 0);
}
div {
background-color: #00FF00;
}CSS - 배경
배경은 웹사이트를 더욱 돋보이게 할 수 있습니다. 배경색, 배경 이미지, 또는 둘 다 설정할 수 있습니다!
body {
background-color: #f0f0f0;
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}이 CSS는 연한 회색 배경색을 설정하고, 페이지 중앙에 배치된 이미지를 추가하며, 이미지가 반복되지 않고 전체 뷰포트를 덮도록 합니다.
CSS - 폰트
폰트는 가독성과 스타일에 매우 중요합니다. 폰트를 설정하는 방법을 보겠습니다:
body {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 16px;
font-weight: normal;
font-style: italic;
}이것은 Helvetica를 선호 폰트로 설정하고, Arial과 임의의 산세리프 폰트를 예비 폰트로 사용하며, 크기를 16픽셀로 설정하고, 무게를 정상으로 하고, 스타일을 이탤릭으로 합니다.
CSS - 텍스트
텍스트 속성은 텍스트가 어떻게 표시되는지 제어합니다:
p {
color: #333;
text-align: justify;
text-decoration: underline;
text-transform: uppercase;
line-height: 1.5;
}이 CSS는 텍스트를 어두운 회색으로 만들고, 정렬을 정리하고, 밑줄을 추가하고, 모두 대문자로 변환하고, 줄 간격을 1.5배로 설정합니다.
CSS - 이미지
이미지는 다른 요소와 마찬가지로 스타일링할 수 있습니다:
img {
width: 100%;
max-width: 500px;
height: auto;
border-radius: 50%;
}이것은 이미지를 반응형(최대 500px 너비의 100%)으로 만들고, 가로 세로 비율을 유지하며, 둥근 모양을 부여합니다.
CSS - 링크
링크는 상태에 따라 다르게 스타일링할 수 있습니다:
a {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
a:visited {
color: purple;
}이것은 링크의 색상을 파랑색으로 설정하고 밑줄을 제거하며, 호버 상태에서는 빨간색으로 바뀌고 밑줄이 추가되며, 방문한 링크는 보라색으로 변합니다.
기억하세요, CSS는 창의성과 실험에 관한 것입니다. 다양한 속성과 값을 조작해보지 마세요. 연습을 통해 더 나은 아름다운 반응형 웹 디자인을 만드는 데 능숙해질 것입니다. 행복한 코딩을!
Credits: Image by storyset