css 기초 맛보기

네 안녕하세요, 이번 포스팅부터는 css를 삽입을 하여 html을 작성하는 법에 대하여 익힐 것입니다.

전 포스팅 까지는 css 없이 순수 html만 사용하여 웹 페이지를 만들었다면,

이번에는 css를 이용하여 살을 붙이는 작업을 할 것입니다.

이번 포스팅에서는 그러한 작업을 돕는 css를 간단히 맛을 보는 시간을 가져보려 합니다.

그럼 지금부터 시작하겠습니다.

1. css란?

css는 문자의 색, 모양, 출력 위치 등 외관을 꾸밀 때 사용을 합니다.

그래서 스타일 시트라고 부릅니다.

그리고 css는 style 태그를 이용하여 작성을 하며,

head 태그 내에서 작성을 합니다.

그리고 보통 이러한 것을 주로 다룹니다.

색상 및 배경
텍스트
폰트
박스 모델(box model)
비주얼 포맷 및 효과
리스트
테이블
사용자 인터페이스

우리가 생각하는 외관에 관한 것들은 다 css로 한다고 보시면 됩니다.

그럼 이제 간단히 css를 입혔을 때와 그렇지 않았을 때의 차이를 보여드리기 위한 코드를 작성해보도록 하겠습니다.

먼저 css를 입히지 않고서 순수 html만 작성을 했을 경우입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스타일 없는 웹 페이지</title>
</head>
<body>
    <h3>CSS 스타일 맛보기</h3>
    <hr>
    <p>나는 <span>웹 프로그래밍</span>을 좋아합니다.</p>
</html>

이렇게 css 없이 작성을 해봤습니다.

그럼 결과화면도 같이 보시죠.

그냥 글자만 있는 평범한 화면이 나옵니다.

그래서 시인성은 좋을 수 있으나, 이목을 끌기에는 다소 문제가 있어 보입니다.

그래서 여기에 이제 살을 붙입니다.

우리가 여기에 css를 붙일 경우 이렇게 씁니다.

간단한 예제 코드를 준비했으니 같이 보시죠.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스타일 있는 웹 페이지</title>
    <style>
        /*CSS# 스타일 시트 작성*/
        body {background-color: mistyrose;}
        h3 {color : purple;}
        hr {border : 5px solid yellowgreen;}
        span {color : blue; font-size : 20px;}
    </style>
</head>
<body>
    <h3>CSS 스타일 맛보기</h3>
    <hr>
    <p>나는 <span>웹 프로그래밍</span>을 좋아합니다.</p>
</html>

이렇게 <head> 태그 안에 css를 작성을 해줬습니다.

여기에서 명심을 해야 하는 것은, css는 무조건 head 태그 안에서 작성이 이루어져야 합니다.

그럼 결과 화면도 같이 보시죠.

이런 식으로 색도 입혀지고, 뭔가 시각적으로 돋보이는 것이 생겨났습니다.

그래서 css를 잘 다룰 줄 안다면,

웹 또는 앱 개발 프런트엔드 포지션에서 퍼블리셔로 취직도 가능합니다.

기능적인 편리함도 중요하지만, 시각적으로 보이는 사이트의 외관도 중요합니다.

사이트가 깔끔하고 예뻐야 사람들의 이목도 끌 수 있기 때문입니다.

여기까지 css를 간단히 맛보는 포스팅을 작성했습니다.

다음 포스팅에서는 css 스타일 시트를 작성하는 방법을 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 다시 한번 감사드립니다 ~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css 클래스 셀렉터에 대하여 알아보기 (0)	2023.03.13
css 태그 이름 셀렉터에 대하여 알아보기 (0)	2023.03.13
css 규칙에 대하여 알아보기 (0)	2023.03.13
css link 태그 이용하여 외부 스타일 시트 불러오는 방법 알아보기 (2)	2023.03.13
css style 태그로 스타일 시트 만들기 (0)	2023.03.13

개발러 L의 뻔fun한 코딩

css 기초 맛보기