CSS 기초 웹페이지 스타일 지정 방법에 대해 알려드리겠습니다. Cascading Style Sheets의 약자로 기본적인 html을 시각적으로 더 매력적인 페이지로 보일 수 있도록 변환해 줍니다. css 기초를 잘 아는 개발자가 반응성이 좋고 잘 디자인 된 웹 사이트를 만들 수 있습니다. 지금부터 단계별 기초 설명과 예시를 통해 웹 페이지 스타일 지정 방법을 알아보겠습니다.
CSS란?
css는 html에서 만든 코드를 제어하는 스타일 언어입니다. 레이아웃, 글꼴, 색상 등 요소가 어떻게 표현될지를 정의해주며 코드 자체도 분리해서 작성할 수 있기 때문에 개발자 입장에서도 더 깔끔하고 관리하기 쉬운 코드 작성이 가능합니다.
간단한 예시를 보여드리겠습니다.
아래의 코드처럼 제목<h1> 코드에 css 스타일을 입혀주면 아주 쉽고 간편하게 꾸미는 것이 가능합니다.
<!-- HTML -->
<h1>Hello, My Buddy!</h1>
<!-- CSS -->
<style>
h1 {
color: blue;
font-family: Arial, sans-serif;
}
</style>
CSS 시작하기 전 준비
정상적인 css 기초 작동을 위해서는 3가지 정도는 미리 준비하는 것을 권장드립니다.
- HTML에 대한 기초 상식
- 코드 편집 프로그램(비주얼 스튜디오 or 노트패드)
- 작성한 코드를 미리 볼 수 있는 웹 브라우저(크롬, 사파리, 웨일 등)
CSS 적용하는 3가지 방법
css는 3가지의 주요한 방법으로 html에 추가할 수 있으니 참고하시기 바랍니다.
1. 인라인 inline css
인라인 css는 <style>이라는 속성을 사용해 html 코드 안에 추가하는 방식입니다. 인라인으로 사용할 경우 속도는 빠르지만 html 코드랑 섞여 있다 보니 복잡하고 긴 코드에 사용할 수록 효율성이 떨어집니다. 간단한 페이지를 만들 때 사용하는 것을 추천합니다.
<p style="color: green; font-size: 16px;">나는야 인라인(inline) CSS 다.</p>2. 내부 internal css
내부 css는 html 파일에 있는 <head> 섹션의 <style> 태그를 생성해 작성하는 방식입니다. 인라인 코드 보다는 분리되어 있지만 이것도 역시 대규모 프로젝트 보다는 단일 페이지 정도의 규모 디자인에서 유용하게 사용될 수 있습니다.
<head>
<style>
p {
color: purple;
font-size: 18px;
}
</style></head><body>
<p>나는 내부(internal) CSS 다.</p></body>3. 외부 external css
외부 css는 큰 프로젝트를 만들거나 깔끔한 관리를 위해 많은 개발자들이 사용하는 방식입니다. html 내부가 아니라 별도의 ‘.css’로 끝나는 파일을 생성하고 이후 html 문서에 연결을 시켜줍니다. 이렇게 분리된 방식으로 진행해야 개발 코드와 스타일 코드가 헷갈리지 않고 효율적으로 관리할 수 있습니다.
<!-- HTML -->
<head>
<link rel="stylesheet" href="styles.css"></head><body>
<p>나는야 외부(external) CSS 다.</p></body>
<!-- styles.css -->
p {
color: red;
font-size: 20px;
}기본 CSS 구문
css라고 해서 대단히 어려운 것이 아니라 코드와 비슷하게 약속된 구문을 사용해서 간단하게 작성하는 방식이라 몇 가지 속성을 알고 있으면 쉽게 사용할 수 있습니다.
- 선택 : HTML 요소를 선택하여 작성합니다(ex. ‘h1’, ‘p’ 코드)
- 속성 : 어떤 스타일을 지정할 것인지 작성합니다(ex. color, font-size)
- 값 : 원하는 스타일을 지정해 줍니다.(ex. blue, 14px)
h1 {
color: blue; /* Property: color, Value: blue */
font-size: 14px; /* Property: font-size, Value: 24px */
}웹 페이지 스타일 지정 가이드
이제 실전으로 들어가 웹 페이지에 어떻게 스타일을 적용시킬 수 있는지 단계별 가이드를 정리해 보겠습니다.
1. HTML 파일 만들기
웹 페이지의 기본 뼈대를 구성할 수 있도록 파일을 만들어 줍니다. (VS Code 같은 프로그램 사용 시 단축키만 입력해도 기본 폼으로 생성됩니다.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내 첫 번째 웹 페이지</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>내 첫 번째 웹 페이지에 오신 것을 환영합니다!</h1>
<p>내 웹 페이지에 대한 설명 부분입니다.</p>
</body>
</html>2. CSS 파일 생성하기
이제 html 파일과 같은 폴더에 ‘sytle.css’로 지정한 새 파일을 만들어 줍니다.
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #555;
font-size: 18px;
line-height: 1.6;
}3. CSS를 HTML에 연결
<head> 섹션에 <link> 태그를 사용해서 따로 생성한 ‘style.css’ 파일을 html에 연결해 줍니다. 아래의 코드 형식으로 넣으면 연동 시킬 수 있습니다.
<link rel="stylesheet" href="styles.css">4. 브라우저에서 테스트
html과 css의 연동까지 마친 파일을 브라우저 탭에 열어서 제대로 적용 되었는지 테스트를 해봅니다.
알아두면 좋은 기초 요소
css 사용에 아주 자주 쓰이는 몇 가지 요소를 모아보았으니 하나씩 적용해 보시기 바랍니다.
1. color
색상 이름이나 16진수 코드, RGB, HSL 값을 넣어 원하는 색상을 나타낼 수 있습니다.
h1 {
color: #ff5733;
}2. font
웹 페이지의 글꼴을 원하는 폰트나 사이즈, 두께 등을 변경할 수 있습니다.
p {
font-family: 'Times New Roman', serif;
font-size: 16px;
font-weight: bold;
}3. margin / padding
여백(margin)은 해당 요소의 외부에 공간을 두는 것이고 패딩(padding)은 내부에 공간을 만들어 줍니다.
div {
margin: 20px;
padding: 15px;
}4. border
보더(border)는 테두리를 뜻하며 해당 요소에 윤곽선을 줄 때 사용합니다. 여기서 radius는 모서리를 뾰족한 것이 아니라 둥글게 해주는 효과라 픽셀을 조정하여 어느 정도 둥글게 할 것인지 정할 수 있습니다.
p {
border: 1px solid black;
border-radius: 5px;
}5. align
얼라인(align)은 텍스트나 요소를 정렬하는 데에 쓰이며 보통 센터로 보낼 때 자주 이용합니다.
h1 {
text-align: center;
}CSS 기초 FAQ
html 없이 css만 단독으로 사용 되나요?
안 됩니다. css는 html 코드의 스타일을 변형하는 것이기 때문에 무조건 html 파일이 먼저 필요합니다.
id랑 class 차이가 뭔가요?
‘#id’는 단일 요소를 대상으로 하기 때문에 고유한 한 개의 아이디 값 외에는 사용할 수 없습니다. ‘.class’는 같은 클래스를 가진 여러 요소에 쓰일 수 있습니다.
css도 반응형으로 할 수 있나요?
네 가능합니다. 미디어 쿼리 코드를 사용하면 화면이 바뀌어도 스타일이 그에 맞춰 적용됩니다.
총 정리
html과 css는 떼어놓을 수 없는 관계이며 웹 페이지를 예쁘게 가꿀 때 꼭 필요한 코딩 과정입니다. 본문에서 소개한 css 기초만 충분히 숙지해도 텍스트나 프레임 같은 기본적인 스타일은 무리 없이 적용해 볼 수 있습니다.