반응형
CSS란 무엇일까요?
CSS는 Cascading Style Sheets의 약자로 웹 페이지의 디자인을 정의하는 데 사용되는 스타일시트 언어입니다. HTML 코드로 작성된 웹 페이지의 요소들을 어떻게 표시할지 결정하며, 글꼴, 색상, 크기, 위치, 배치 등을 조정하여 웹 페이지를 더욱 아름답고 사용자 친화적으로 만들 수 있도록 합니다.
CSS 코드 작성을 위한 준비
CSS 코드는 텍스트 편집기 또는 전용 CSS 편집기를 사용하여 작성할 수 있습니다. HTML 코드와 마찬가지로, Visual Studio Code나 Sublime Text와 같은 무료 코드 편집기를 사용하는 것을 추천합니다.
CSS 코드 작성 방법
CSS 코드는 다음과 같은 형식으로 작성됩니다.
selector {
property: value;
/* ... 다른 속성 */
}
- selector: 스타일을 적용할 HTML 요소를 선택합니다. 예를 들어, h1 요소를 선택하려면 h1을 사용하고, 모든 단락 요소를 선택하려면 p를 사용합니다.
- property: 요소의 특정 속성을 나타냅니다. 예를 들어, 글꼴 색상을 변경하려면 color 속성을 사용하고, 글꼴 크기를 변경하려면 font-size 속성을 사용합니다.
- value: 속성의 값을 나타냅니다. 속성의 종류에 따라 적절한 값을 지정해야 합니다.
예제: 웹 페이지 디자인하기
다음은 HTML 코드에서 만든 웹 페이지의 디자인을 CSS 코드로 변경하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>제목</h1>
<p>본문 내용입니다.</p>
<img src="image.jpg" alt="이미지 설명">
<a href="https://www.example.com">링크</a>
</body>
</html>
h1 {
color: blue; /* 제목 글꼴 색상을 파란색으로 변경 */
font-size: 24px; /* 제목 글꼴 크기를 24px로 변경 */
}
p {
font-family: Arial, sans-serif; /* 본문 글꼴을 Arial 또는 다른 산セリフ 폰트로 변경 */
line-height: 1.5; /* 본문 행 높이를 1.5배로 설정 */
}
img {
width: 50%; /* 이미지 너비를 페이지 너비의 50%로 설정 */
margin: 0 auto; /* 이미지를 가운데 정렬 */
}
a {
text-decoration: none; /* 링크 밑줄 제거 */
color: red; /* 링크 색상을 빨간색으로 변경 */
}
위 CSS 코드를 style.css라는 이름으로 저장하고, HTML 코드의 <head> 태그에 <link> 요소를 추가하여 연결하면 웹 페이지의 디자인이 변경됩니다.
반응형