티스토리 뷰

Front-End/CSS

CSS 기본 문법

on1ystar 2019. 6. 25. 01:12
728x90
반응형

기본적인 문법

div = 선택자로 HTML에 스타일을 적용하기 위해 HTML의 특정한 요소를 선택하는 사인
{
    font-size(속성) : 20px(값);
    color(속성): red(값);
}

<div>
    <h1>제목</h1>
    <p>본문</p>
</div>

h1 = 선택자{
    color : red;
}
p {
    color : blue;
}

 

여러 속성과 값들

div{
    color: red; /* 글자색 */
    font-size: 20px; /* 글자 크기 */
    width: 300px; /*  가로 너비 */
    margin: 20px; /* 바깥 여백 */
    padding: 10px 20px; /* 안쪽 여백: 위아래, 좌우 */
    position: absolute; /* 위치 (부모 요소 기준) */
}

 

css 선언 방식

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <!--HTML에 포함하기 = 내장(엠베디드) 선언 방식
    선택자에 해당하는 태그에 모두 CSS 속성 값이 적용-->
    <style>
        h1{
            color: red;
        }
    </style>

    <!--HTML 외부에서 불러오기-->
    <link rel="stylesheet" href="/css/test.css">
</head>
<body>
    <!--태그에 직접 작성하기 = 인라인 선언 방식
    해당 태그에만 CSS 속성 값이 적용-->
    <div style="color: red;"></div>
</body>
</html>

 

클래스 선택자

/* 명확하게 원하는 요소를 찾기 위해 '클래스 선택자'라는 것이 존재한다*/
.title /* .이 찍혀 있으면 클래스 선택자로 title이라는 
            class를 가지고 있는 요소에 적용*/{
    color: red;
}
.main-text{
    color: black;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
        <!--class는 태그의 별명(별칭)-->
        <h1 class="title">제목</h1>
        <h1>css 적용 x</h1>
        <p class="main-text">본문</p>
        <p>css 적용 x</p>
</body>
</html>

 

 

728x90
반응형
댓글