CSS 기본 스타일링

소요 시간: 5분 조회수: 97

CSS로 웹페이지를 꾸미는 건 생각보다 정말 쉬워요. 몇 가지 기본적인 방법만 알면 금방 예쁜 웹페이지를 만들 수 있답니다. 자, 그럼 시작해볼까요?


CSS란?

CSS는 프로그래밍 언어도 아니고 마크업 언어도 아니에요. 그냥 '스타일 시트 언어'라고 불러요. 이게 무슨 뜻이냐면, HTML 문서에 있는 요소들(예: 제목, 문단, 이미지 등)에 스타일을 입힐 수 있다는 거예요. 쉽게 말해, 웹페이지를 꾸미는 도구라고 생각하면 돼요.


CSS로 기본 스타일링 하기

이제 HTML 파일과 CSS 파일을 생성한 다음, 아래 단계를 따라 해보세요.

  1. 텍스트 에디터(메모장도 괜찮아요)를 열고, 위의 HTML 코드를 복사해 붙여 넣으세요. 이 파일을 index.html로 저장하세요.
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS 기본 스타일링 예제</title>
        <link href="styles/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <h1>CSS 기본 스타일링 예제</h1>
        <p>이 문단의 글자는 빨간색으로 바뀔 거예요.</p>
        <p>이제 CSS를 사용해서 더 다양한 스타일링을 적용해보세요!</p>
        <div>
            <p>이 div 요소에는 여백과 패딩이 적용될 거예요.</p>
        </div>
    </body>
    </html>
  2. styles라는 폴더를 만들고, 그 안에 style.css라는 이름으로 아래의 CSS 코드를 저장하세요.
  3. index.html 파일을 열고, <head> 태그 사이에 아래 코드를 추가하세요.
    <link href="styles/style.css" rel="stylesheet" type="text/css" />

이제 문단의 글자가 빨간색으로 바뀌었다면, 첫 번째 CSS 스타일링을 성공적으로 완료한 거예요! 축하해요!


더 알아두면 좋은 CSS 기본 스타일링

CSS는 글자 색 바꾸기 외에도 다양한 스타일을 적용할 수 있어요. 몇 가지 예를 들어볼게요:

배경색 바꾸기

웹페이지 배경색을 바꿀 수 있어요. 예를 들어, 전체 배경을 연한 파란색으로 하고 싶다면:

body {
    background-color: lightblue;
}

글자 크기 조정

제목이나 문단의 글자 크기를 바꿀 수 있어요. 예를 들어, 큰 제목을 더 크게 만들고 싶다면:

h1 {
    font-size: 36px;
}

글꼴 바꾸기

문단의 글꼴을 바꿀 수 있어요. 예를 들어, Arial 글꼴로 바꾸고 싶다면:

p {
    font-family: Arial, sans-serif;
}

여백과 패딩 조정

요소 주위의 여백(margin)과 요소 안쪽의 여백(padding)을 조정할 수 있어요. 예를 들어, 상자 모양의 div 요소 주위에 20px 여백을 주고, 안쪽에 10px 패딩을 주고 싶다면:

div {
    margin: 20px;
    padding: 10px;
}

이런 식으로 CSS를 사용하면 웹페이지를 예쁘고 기능적으로 만들 수 있어요. CSS 기본을 잘 익히면 점점 더 복잡하고 멋진 디자인을 할 수 있을 거예요. 계속 공부하고 여러 가지 실습을 통해 경험을 쌓아보세요!


CSS 파일 예시 코드

CSS 파일 (styles/style.css):

p {
    color: red;
}
    
body {
    background-color: lightblue;
}
    
h1 {
    font-size: 36px;
}
    
p {
    font-family: Arial, sans-serif;
}
    
div {
    margin: 20px;
    padding: 10px;
}

이렇게 HTML 파일과 CSS 파일을 준비하면, 위에서 설명한 CSS 스타일링이 적용된 웹페이지를 확인할 수 있어요. 한번 직접 해보세요!


정리

오늘은 CSS를 이용해 웹페이지를 간단하게 스타일링하는 방법을 배웠어요. CSS는 HTML과 함께 사용되어 웹페이지의 외관을 멋지게 꾸밀 수 있는 도구예요. 기본적인 글자 색 변경, 배경색 변경, 글자 크기 조정, 글꼴 변경, 여백과 패딩 조정을 통해 다양한 스타일을 적용할 수 있었죠. 이 기본만 잘 익혀도, 앞으로 더 복잡하고 멋진 디자인을 만들어낼 수 있을 거예요. 계속해서 연습하고 실습하면서 CSS를 더 깊이 이해해보세요. 화이팅!

인기글

CSS 리스트