🔵 CSS - summary

jea_i·2022년 2월 7일

목록 보기

1/19

<!DOCTYPE html>
<html lang="en">
<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>css_summary</title>
    <style>
        /* 문서의 모든 h2요소를 선택한 상태 */
        h2{color: olivedrab;}
        h3{color: orange;}
        /* 아이디이름으로 요소 선택하기 */
        #a1{font-size: 48px;}
        <!--클래스를 더 많이 사용 . 찍기 너무너무 중요-->
        /* 클래스이름으로 요소 선택하기 */
        .title1{color: palegreen;}
        .title2{color:peru;}
    </style>
</head>
<body>
    <!--스타일 속성, 인라인적용방식or 태그직접적용방식 ; 안 씀-->
    <h4 style="color:burlywood; font-size: 36px; font-style: italic;">CSS 개요</h4>
    <h4 style="color: burlywood; font-size: 36px;">CSS 개요</h4>
    <ul style="color:olive;">
        <li>요소는 스타일을 통해 모양을 바꿀 수 있습니다.</li>
        <li>스타일특성에서 사용되는 값은 속성이라고 하겠습니다.</li>
        <li>*같은 스타일의 속성은 딱 한번씩만 사용 가능하다.</li>
        <li>속성은 속성명과 속성값으로 구성되어 있습니다.</li>
        <li>속성명과 속성값은 콜론으로 구분하고 하나의 속성정의가 끝나면 세미콜론으로 마쳐야 합니다.</li>
        <li>위를 하나의 속성블럭이라 부를 것이고 반드시 세미콜론으로 구분해야 합니다.</li>
    </ul>
    <!-- a1 : 어떤의미로 작명되었는지 주석으로 기술-->
    <h2 id="a1">CSS알아보기</h2>
    <p>
        Cascading Style Sheet는 폭포와 같이 위에서 아래로 연속적으로 적용되는 스타일을 가리킵니다.
        <br>폭포와 같이 위에서 아래로란 부모요소가 자식요소에게 혹은 조상요소가 후손요소에게 속성을 전달하는 것을 의미합니다.
    </p>
    <h3 class="title1">내부정의 방식</h3>
    <p>
        style을 문서안에 정의하는 방식을 가리킵니다.
        <br>이 떄, 속성이 어떤 요소에게 적용되는지 선택자를 통해 명확히 해줘야 합니다.
    </p>
    <h3 class="title2">외부정의 방식</h3>
    <p>
        css는 독립된 언어입니다. 따라서 주석을 처리하는 방식도 html과 다른 형태를 가지게 됩니다.
        <br>
    </p>
</body>
</html>

css_summary

CSS 개요

요소는 스타일을 통해 모양을 바꿀 수 있습니다.
스타일특성에서 사용되는 값은 속성이라고 하겠습니다.
*같은 스타일의 속성은 딱 한번씩만 사용 가능하다.
속성은 속성명과 속성값으로 구성되어 있습니다.
속성명과 속성값은 콜론으로 구분하고 하나의 속성정의가 끝나면 세미콜론으로 마쳐야 합니다.
위를 하나의 속성블럭이라 부를 것이고 반드시 세미콜론으로 구분해야 합니다.

CSS알아보기

Cascading Style Sheet는 폭포와 같이 위에서 아래로 연속적으로 적용되는 스타일을 가리킵니다.
폭포와 같이 위에서 아래로란 부모요소가 자식요소에게 혹은 조상요소가 후손요소에게 속성을 전달하는 것을 의미합니다.

내부정의 방식

style을 문서안에 정의하는 방식을 가리킵니다.
이 떄, 속성이 어떤 요소에게 적용되는지 선택자를 통해 명확히 해줘야 합니다.

외부정의 방식

css는 독립된 언어입니다. 따라서 주석을 처리하는 방식도 html과 다른 형태를 가지게 됩니다.

css 작성
body{
background-color: #cccccc;
}

jea_i

열정열정열정🔥

다음 포스트

🔵 CSS - summary

CSS

CSS 개요

CSS 개요

CSS알아보기

내부정의 방식

외부정의 방식

🔵 CSS - basic selecter

0개의 댓글

관련 채용 정보