CSS STEP 32 - Variable

웹페이지

CSS STEP 32 - Variable

IT의 큰손 2023. 4. 20. 09:34

728x90

★ CSS 변수

변수 선언

--변수명 : 값

변수 값

1. 열거형(색상)
2. 열거형(그외, left, center, solid, dashed..)
3. 수치(10px)

변수 사용(호출)

var(--변수명)

■ HTML 코드

<body>
    <!-- div#box$.box{상자$}*3 -->
    <div id="list">
        <div id="box1" class="box">상자1</div>
        <div id="box2" class="box">상자2</div>
        <div id="box3" class="box">상자3</div>
    </div>
</body>

■ CSS 코드 : 지역변수로 설정을 했기때문에 적용이 자신의 지역에만 가능함.

#box1 {
    --fore-color : blue;
    color : var(--fore-color);
}
#box2 {
    /* 선언되지 않은 변수 > 초기값(기본값) 적용됨 */
    color : var(--fore-color);
}

■ CSS 코드 : 해결법 -> 부모지역에 변수를 설정하면 적용이 가능하다.

 #list {
    --main-color : gold;
}

#box1 {
    color : var(--main-color);
}

#box2 {
    color : var(--main-color);
}

#box3 {
    color : var(--main-color);
}

■ CSS 코드 : 더 좋은 해결 방법 -> 가장 상위인 root변수에 선언

:root {
    --background-color : skyblue;
}

★ 기본 셋팅 ex)

HTML 코드

<!-- ((h1.title>lorem10)+(p.content>lorem)*5)*3 -->
<h1 class="title">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo, praesentium?</h1>
<p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates non praesentium recusandae, officia atque modi error doloremque harum, adipisci laborum asperiores ipsum tempora nulla odio nostrum culpa temporibus obcaecati? Molestias.</p>
<p class="content">Deleniti officia vel laboriosam. Cum nostrum repellat nisi quae hic minus! Dolorem deserunt laudantium reiciendis voluptatem enim facere incidunt ut voluptates sequi aliquam tenetur eos, rerum non, repellendus, error eaque.</p>
<p class="content">Placeat, ex neque. Aliquid possimus accusantium, sapiente consequatur debitis asperiores facilis architecto. Fuga, cumque. Eius architecto mollitia ipsum sunt. Cum repellendus nisi molestias quae laudantium quam, sit sunt facilis omnis!</p>
<p class="content">Voluptas fuga reiciendis ut nostrum quaerat, consectetur atque vero, molestiae mollitia quam ab sint tempora accusantium quis necessitatibus culpa! Sint natus provident ipsam, recusandae non debitis corporis esse distinctio voluptatibus.</p>
<p class="content">Libero ad nobis accusamus reiciendis officia, quis ea hic vero rerum excepturi nostrum asperiores iusto quae tempora in? Repudiandae fuga quo, saepe corrupti similique ut! Assumenda eos id illo placeat.</p>
<h1 class="title">Pariatur officiis quidem corrupti ipsum et expedita impedit illo mollitia!</h1>
<p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sint amet provident hic magni nobis ducimus recusandae nostrum natus. Debitis neque deleniti voluptate quisquam? Reiciendis eum ducimus veritatis nesciunt vel.</p>
<p class="content">Accusantium molestiae animi dolore recusandae minima ullam eveniet officiis quo aperiam deleniti atque quas cumque, quia maiores architecto blanditiis, libero saepe, deserunt beatae eius veniam. Beatae blanditiis itaque dignissimos nesciunt?</p>
<p class="content">Sint, ipsum iure velit architecto nihil dolorem, dolores, odit nulla minus magni molestiae autem incidunt cum pariatur voluptatem deleniti repudiandae blanditiis id beatae est error doloremque amet. Sed, commodi illo.</p>
<p class="content">Exercitationem dolore minima nulla culpa praesentium soluta amet, eos dignissimos illo blanditiis ipsa delectus nihil, molestias voluptates, at neque! Deleniti mollitia a recusandae rerum voluptate quae veritatis non libero optio.</p>
<p class="content">Ipsum quis quisquam pariatur ut eveniet at aspernatur praesentium, laboriosam nulla repudiandae aliquam rem sapiente dolor commodi fugiat aut fuga perferendis, nesciunt cum a laudantium. Doloremque quaerat et quo provident.</p>
<h1 class="title">Omnis, quisquam? Aliquid, perspiciatis nostrum. Deleniti dolore possimus porro esse?</h1>
<p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis nam ad illo rem maiores dolore saepe, non magnam esse quae perferendis, cum eos quisquam blanditiis voluptates accusantium maxime. Cum, culpa.</p>
<p class="content">Dolores quidem et excepturi quam sequi. Exercitationem, voluptas hic! Cupiditate commodi architecto voluptates veritatis eaque. Sapiente labore animi qui voluptatibus maxime voluptates similique tempore optio commodi? Laudantium accusamus placeat deserunt.</p>
<p class="content">Error cumque illum suscipit consequatur eum. Illo, mollitia cupiditate numquam fugiat laudantium magni tenetur placeat natus voluptatum quisquam recusandae iusto labore. Quaerat, non? Doloremque nostrum earum adipisci, esse amet minima?</p>
<p class="content">Eius debitis, non consequatur, dolore libero fugit cupiditate possimus iure, ipsum doloremque aut vero nobis. Optio nihil aliquid sed iusto magni molestias magnam voluptate excepturi, quaerat exercitationem cupiditate? Itaque, dolorum!</p>
<p class="content">Vel dolorem pariatur, consequuntur voluptatum hic soluta blanditiis commodi, atque labore beatae est illo velit libero ducimus rerum officia, quia esse nulla voluptas et! Amet totam labore molestiae ut commodi!</p>

CSS 코드

:root {
    /* --background-color : skyblue; */
    --main-background-color : #dad7cd;
    --main-text-color : #344e41;
    --main-title-color : #588157;

    --main-title-size : 20px;
    --main-text-size : 14px;
}

body {
    background-color: var(--main-background-color);
}

h1.title {
    color:var(--main-title-color);
    font-size : var(--main-text-size);
}

p.content {
    color : var(--main-text-color);
    font-size : var(--main-text-size);
}

실행 결과

728x90

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