[HTML/CSS] 6. CSS의 필수 속성

2023. 3. 24. 18:00

안녕하세요. HTML강사 코딩하는 고양이입니다.

오늘은 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>Document</title>
    <style>
    </style>
</head>
<body>
    
</body>
</html>

이것을 복사하세요.

1. 넓이 속성 (width, height)

먼저 넓이부터 정해야 합니다.

width는 가로 길이고

height는 세로 길이입니다.

길이의 단위는 px을 사용합니다.

형태는 width: (길이);

height: (길이);

입니다.

예)

<!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>Document</title>
    <style>
        p{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <p>하이하이</p>
</body>
</html>

결과

2. 배경 색상 속성 (background-color)

위의 결과를 정확히 확인하려면 배경 색상을 바꿔야 합니다.

형태는 background-color: (색상);입니다.

예)

<!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>Document</title>
    <style>
        p{
            width: 100px;
            height: 100px;
            background-color: black; /*검은색 배경*/
        }
    </style>
</head>
<body>
    <p>하이하이</p>
</body>
</html>

결과

3. 여백 속성 (margin, padding)

여백 속성 태그에는 margin과 padding이 있는데요

margin은 바깥쪽 여백, padding은 안쪽 여백을 만드는 속성입니다.

역시나 길이의 단위는 px을 사용합니다.

형태는 margin: (길이);

padding: (길이);

입니다.

예)

<!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>Document</title>
    <style>
        p{
            width: 100px;
            height: 100px;
            margin: 20px;
            padding: 20px;
            background-color: pink; /*검은색 배경*/
        }
    </style>
</head>
<body>
    <p>하이하이</p>
</body>
</html>

결과

만약 특정 방향에 여백을 주고 싶다면

margin-top

margin-left

margin-right

margin-bottom

의 형태로 만들어주세요

4. 테두리 속성 (border)

테두리 속성은 border로

형태는 border: (길이(px)) solid (색상);입니다.

역시나 특정 방향에만 테두리를 지정할 수 있습니다.

border-top

border-bottom

예)

<!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>Document</title>
    <style>
        p{
            width: 100px;
            height: 100px;
            margin: 20px;
            padding: 20px;
            background-color: pink; /*검은색 배경*/
            border-bottom: 2px solid #000;
        }
    </style>
</head>
<body>
    <p>하이하이</p>
</body>
</html>

결과

5. 글자 속성 (color, font-size, text-decoration)

하나씩 설명하자면

color는 글자의 색을 바꾸는 속성입니다.

font-size는 글자의 크기를 바꾸는 속성입니다.

text-decoration은 글자의 꾸밈을 바꾸는 속성입니다.

형태는

color: (색상);

font-size: (크기(px));

text-decoration: none;

입니다

예)

<!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>Document</title>
    <style>
        p{
            width: 100px;
            height: 100px;
            margin: 20px;
            padding: 20px;
            background-color: pink; /*검은색 배경*/
            border-bottom: 2px solid #000;
            color: blue;
            font-size: 30px;
        }
        a{
            text-decoration: none; /*링크의 밑줄을 없애줌*/
        }
    </style>
</head>
<body>
    <p>하이하이</p>
    <a href="#">하하하</a>
</body>
</html>

결과

6. 기타 필수 속성

속성	설명
text-align: center;	글자를 중앙으로 위치시킨다.
list_style: none;	리스트의 점이나 숫자를 없앤다.
overflow: hidden;	이미지나 글이 상자 밖으로 넘어갈때 숨긴다.
display: inline;	태그의 형태를 인라인으로 만든다.

오늘의 문제!

1번 문제

100x100의 크기의 갈색 상자에 25px의 크기인 빨간색 "너 뒤에"라는 글씨가 있는 상자를 CSS를 이용해 만드세요.

(단, 태그는 p로 한다.)

2번 문제

"마냥"이라는 글씨를 120x120의 크기의 상자 중앙에 배치하고 상자의 색을 주황색으로 하기 위해 CSS를 이용해 만드세요

(단, 태그는 p로 한다.)

3번 문제 (심화)

리스트 태그 <li> 태그의 점을 없애고 배경 색을 밝은 회색으로 하기 위해 CSS를 이용해 만드세요.

(단, <ul> 태그 안에 <li> 태그가 있어야 한다.)

1번 모범답안

<!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>Document</title>
    <style>
        p{
            width: 100px;
            height: 100px;
            background-color: brown; /*검은색 배경*/
            color: red;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <p>너 뒤에</p>
</body>
</html>

2번 모범답안

<!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>Document</title>
    <style>
        p{
            width: 120px;
            height: 120px;
            background-color: orange; /*검은색 배경*/
            text-align: center;
        }
    </style>
</head>
<body>
    <p>마냥</p>
</body>
</html>

3번 모범답안

<!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>Document</title>
    <style>
        li{
            list-style: none;
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <ul>
        <li>하이</li>
        <li>gkdl</li>
    </ul>
</body>
</html>

오늘은 여기까지 ㅂㅂ

'HTML, CSS > 이론' 카테고리의 다른 글

[HTML/CSS] 8. CSS 선택자 (0)	2023.03.26
[HTML/CSS] 7. 기타 CSS 속성 (0)	2023.03.25
[HTML/CSS] 5. 표 태그 (0)	2023.03.23
[HTML/CSS] 4. CSS의 기초 (1)	2023.03.22
[HTML] 3. 이미지 태그와 링크 태그 (2)	2023.03.21

코딩하는 고양이

[HTML/CSS] 6. CSS의 필수 속성

'HTML, CSS > 이론' 카테고리의 다른 글

+ Recent posts

티스토리툴바