CSS
HTML문서를 이용해서 웹 페이지에서 읽을 수 있습니다. 제목은 일반 텍스트보다 크게 보이며, 단락은 줄바꿈이 되고 공백이 있습니다. 링크는 텍스트의 나머지 부분과 구분하기 위해 색상과 밑줄이 표시됩니다. 하지만 이러한 기본적인 스타일은 모든 웹사이트가 똑같아 보이는 지루하고 따분해 보일 것입니다.
CSS 는 사용자에게 문서를 표시하는 방법을 지정하는 언어입니다 CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 스타일과 레이아웃을 지정하기 위해 사용되는 스타일 시트 언어입니다. HTML과 함께 사용되어 웹 페이지의 디자인과 표현을 제어하는 역할을 합니다.
CSS 기능
CSS를 사용하면 다음과 같은 기능을 수행할 수 있습니다.
- 스타일 지정: CSS를 사용하여 HTML 요소의 색상, 글꼴, 크기, 간격 등의 스타일을 지정할 수 있습니다. 예를 들어, 헤더 요소의 배경색을 변경하거나 본문 텍스트의 글꼴을 설정하는 등의 스타일을 적용할 수 있습니다.
- 레이아웃 제어: CSS를 사용하여 웹 페이지의 레이아웃을 조정할 수 있습니다. 예를 들어, 컨테이너 요소의 너비와 높이를 설정하거나, 요소를 정렬하는 등의 레이아웃 조작이 가능합니다.
- Responsiveness: CSS를 사용하여 반응형 웹 디자인을 구현할 수 있습니다. 다양한 디바이스와 화면 크기에 대응하여 웹 페이지의 모습을 조정할 수 있습니다.
- 애니메이션과 전환: CSS를 사용하여 요소에 애니메이션 효과를 추가하거나 전환 효과를 적용할 수 있습니다. 이를 통해 웹 페이지에 동적이고 시각적으로 흥미로운 요소를 추가할 수 있습니다.
CSS적용
CSS를 적용하기 위해서는 HTML 문서에 <style> 태그를 사용하거나 외부 CSS 파일을 연결하여 스타일 규칙을 작성합니다. 선택자(selector)를 사용하여 스타일을 적용할 HTML 요소를 선택하고, 중괄호 내에서 속성(property)과 값(value)을 설정하여 스타일을 지정합니다.
<style>태그 사용
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS 스타일 규칙을 작성합니다 */
h1 {
color: blue;
font-size: 24px;
}
p {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<h1>CSS를 적용해보자</h1>
<p>CSS를 적용하는 예시!!</p>
</body>
</html>
별도의 css파일 사용
<style>태그 이외에 별도의 css파일을 사용할 때는 <link> 요소를 사용합니다. <link>요소는 HTML 문서와 외부 리소스를 연결하는 역할을 합니다. CSS 파일을 연결하는 경우 rel 속성의 값으로 "stylesheet"를 사용합니다.
href 속성의 값으로 CSS 파일의 경로를 지정합니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSS를 적용해보자</h1>
<p>CSS를 적용하는 예시!!</p>
</body>
</html>/* CSS 스타일 규칙을 작성합니다 */
h1 {
color: blue;
font-size: 24px;
}
p {
color: red;
font-size: 16px;
}
CSS 기본 문법
CSS 는 규칙 기반 언어입니다 — 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의합니다.
CSS의 기본 문법은 다음과 같은 구성 요소로 이루어져 있습니다:
selector {
property: value;
}- 선택자 (Selectors): 선택자는 CSS 규칙이 적용될 HTML 요소를 선택하는 역할을 합니다. 선택자는 HTML 요소의 태그 이름, 클래스, 아이디, 속성 등을 사용하여 지정할 수 있습니다.
- 속성 (Properties): 속성은 스타일을 적용할 HTML 요소의 특정 특성을 지정합니다. 예를 들어, 텍스트의 색상, 폰트 크기, 여백 등을 설정할 수 있습니다.
- 값 (Values): 속성에 설정되는 값은 스타일의 세부적인 특성을 나타냅니다. 예를 들어, 색상 속성의 값으로는 키워드 (예: "red", "blue") 또는 색상 코드 (예: "#FF0000", "rgb(255, 0, 0)")를 사용할 수 있습니다.
- 선언 (Declaration): 선언은 선택자와 속성-값의 쌍으로 구성되며, 스타일 규칙을 정의합니다. 선택자와 속성-값은 중괄호({})로 묶여 선언 블록을 형성합니다.
스타일 속성과 값
CSS에서는 다양한 스타일 속성과 해당 속성에 사용되는 값들을 활용하여 웹 요소의 스타일을 지정할 수 있습니다. 일부 흔히 사용되는 스타일 속성과 그에 대응하는 값들입니다.
h1 {
color: blue;
background-color: yellow;
}
color: 텍스트의 색상을 지정합니다.
background-color: 요소의 배경 색상을 지정합니다.
p {
font-size: 16px;
font-family: Arial, sans-serif;
}
font-size: 텍스트의 크기를 지정합니다.
font-family: 텍스트의 글꼴을 지정합니다.
.bold-text {
font-weight: bold;
}
font-weight: 텍스트의 굵기를 지정합니다.
.centered-text {
text-align: center;
}
text-align: 텍스트의 정렬 방식을 지정합니다.
.container {
margin: 10px;
padding: 20px;
}margin: 요소의 외부 여백을 지정합니다.
padding: 요소의 내부 여백을 지정합니다.
.divider {
border: 1px solid black;
}
border: 요소의 테두리 스타일을 지정합니다.
.image {
width: 300px;
}
width: 요소의 너비를 지정합니다.
박스 모델
CSS의 박스 모델은 웹 요소를 사각형의 박스로 표현하는 개념입니다. 이 모델은 웹 요소의 크기, 여백, 테두리, 내용 등을 관리하기 위해 사용됩니다. 박스 모델은 다음과 같이 구성됩니다:
콘텐츠 영역 (Content area): 박스 모델의 가장 안쪽에 위치하며, 요소의 실제 내용을 포함합니다. 텍스트, 이미지 또는 다른 HTML 요소가 이 영역에 포함됩니다.
패딩 영역 (Padding area): 콘텐츠 영역의 주변에 위치하며, 콘텐츠와 테두리 사이의 여백을 제공합니다. 패딩 영역의 크기는 padding 속성을 사용하여 지정할 수 있습니다.
테두리 영역 (Border area): 패딩 영역 주위에 위치하며, 요소의 경계를 표시합니다. 테두리의 스타일, 두께, 색상은 border 속성을 사용하여 지정할 수 있습니다.
여백 영역 (Margin area): 테두리 영역 주위에 위치하며, 다른 요소와의 간격을 설정합니다. 여백 영역의 크기는 margin 속성을 사용하여 지정할 수 있습니다.
'Frontend > 개념,공부' 카테고리의 다른 글
| JS - JavaScript? (0) | 2023.06.17 |
|---|---|
| HTML - HTML에 대해서 (0) | 2023.06.11 |
