본문 바로가기
HTML+CSS/CSS

웹개발(13)- 우선순위, css변수

두설날 2024. 4. 12. 09:46

*이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*

CSS 우선순위 계산

1. 동일한 속성을 적용할 경우 나중에 적용한 것이 우선입니다.
2. 외부 스타일 시트와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선입니다.
3. 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시 적용합니다.
4. 우선순위 계산:
    - inline: 1000점
    - id: 100점
    - class, 속성 선택자: 10점
    - element: 1점
5. !important를 적용하면 0 순위로 적용합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 우선순위</title>
    <style>
        #id-style { background-color: deeppink; }
        #id-style2 { background-color: deepskyblue; }
        div {
            display: block;
            padding: 30px;
            margin: 30px;
            background-color: gold;
        }
        .class-style3 {
            background-color: beige !important;
        }
        .class-style {
            background-color: greenyellow;
        }
        .class-style2 {
            background-color: pink;
            font-size: 25px;
        }
        ul > li.li-class {
            background-color: orange;
        }
        ul > li {
            background-color: violet;
        }
    </style>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h2>CSS 우선순위</h2>
    <div style="background-color: aqua;">div 1번(인라인 스타일 우선)</div>
    <div id="id-style" class="class-style">div 2번(id 우선)</div>
    <div class="class-style">div 3번(class 우선)</div>
    <div class="class-style2 class-style">div 4번(같은 속성의 경우 나중에 적용한 것이 우선)</div>
    <div>div 5번(같은 속성의 경우 나중에 적용한 것이 우선, 외부 스타일시트 적용)</div>
    <ul>
        <li class="li-class">li 1번(점수가 높은 속성이 적용)</li>
    </ul>
    <div id="id-style2" class="class-style3">div 6번(!important가 우선시되어 실행)</div>
</body>
</html>

CSS Custom Properties

CSS의 속성 값을 재사용하고 동적으로 변경할 수 있게 해주는 기능입니다.

정의
:root {
    --main-color: #FF0000;
    --font-size:15px;
}

사용
.box {
    background-color: var();
    font-size: var();
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 변수</title>
    <style>
        :root {
            --background-color: deepskyblue;
            --text-color: white;
        }
        .first-list {
            background-color: var(--background-color);
            color: var(--text-color);
        }
        .second-list {
            background-color: var(--background-color);
            color: var(--text-color);
        }
        @media screen and (max-width:768px) {
            :root{
                --background-color: darkblue;
                --text-color: ivory;
            }
        }
    </style>
</head>
<body>
    <h2>css 변수</h2>
    <ul class="first-list">
        <li>김사과</li>
        <li>반하나</li>
    </ul>
    <ul class="second-list">
        <li>오렌지</li>
        <li>이메론</li>
        <li>배애리</li>
    </ul>
</body>
</html>


활용: 카페소개 페이지 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>카페소개</title>
    <link rel="stylesheet" href="./coffee.css">
</head>
<body>
    <div id="container">
        <header>
            <nav>
                <ul>
                    <li><a href="#intro">카페소개</a></li>
                    <li><a href="#map">오시는 길</a></li>
                    <li><a href="#choice">이달의 추천</a></li>
                </ul>
            </nav>
        </header>
        <section id="intro">
            <div class="page-title">
                <h2>카페 소개</h2>
            </div>
            <div class="content">
                <div class="photo"><img src="./coffee.jpg" alt="커피"></div>
                <div class="text">
                    <p>영업 시간 : 오전 9시 ~ 밤 10시</p>
                    <p>휴무 : 매주 수요일 <i><small>(수요일이 공휴일인 경우 수요일 영업, 다음날 휴무)</small></i></p>
                </div>
            </div>
        </section>
        <section id="map">
            <div class="page-title">
                <h2>오시는 길</h2>
            </div>
            <div class="content">
                <div class="photo"><img src="./map.jpg" alt="지도"></div>
                <div class="text">
                    <p>서귀포시 안덕면 사계리 000-000</p>
                    <p>제주 올레 10코스 산방산 근처</p>
                </div>
            </div>
        </section>
        <section id="choice">
            <div class="page-title">
                <h2>이달의 추천</h2>
            </div>
            <div class="content">
                <div class="photo"><img src="./ice.jpg" alt="추천"></div>
                <div class="text">
                    <h2>핸드드립 아이스 커피</h2>
                    <ol>
                        <li>1인분 기준으로 서버에 각 얼음 5조각(한조각은 20cc) 넣고 추출을 시작한다.</li>
                        <li>평상시 보다 원두의 양은 2배정도(20g)와 추출액은 얼음 포함해서 200cc까지 내린다.</li>
                        <li>아이스 잔에 얼음 6~7개 섞어서 시원하게 마신다.</li>
                    </ol>
                </div>
            </div>
        </section>
        <footer>
            <p>My times with Coffee</p>
        </footer>
    </div>
</body>
</html>
@font-face {
    font-family: 'WAGURITTF';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2403@1.0/WAGURITTF.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'WAGURITTF';
}

#container {
    width: 100%;
    margin: 0 auto;
}

nav {
    height: 50px;
    background-color: black;
}

nav > ul {
    list-style: none;
    margin: 0;
    padding: 3px;
}

nav > ul > li {
    display: inline-block;
    margin: 15px 20px;
}

a {text-decoration: none;}
a:link {text-decoration: none; color: white;}
a:visited {text-decoration:none; color: white;}
a:active, a:hover {text-decoration: underline; color: gold}

header {
    width: 100%;
    height: 300px;
    background-image: url(./header.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: 0;
}

.photo {display:none;}

section {
    position: relative;
    width: 100%;
    padding: 15px 5%;
}
.page-title {
    position: absolute;
    top: 20px;
    left: 0px;
    padding: 30px 50px;
}

.content {
    margin: 80px auto 10px;
    width: 90%;
    padding: 20px;
    box-sizing: border-box;
}

#container section:nth-child(even){
    background-color: beige;
}

footer {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: black;
}

footer > p {
    color: white;
    text-align: center;
    line-height: 100px;
}

/* 태블릿 */
@media screen and (min-width: 768px) {
    header {height: 400px;}
    #intro, #map {
        box-sizing: border-box;
        width: 50%;
        float: left;
        margin: 0;
        height: 300px;
    }
    #choice {
        clear: both;
    }
}

/* PC버전 */
@media screen and (min-width: 1024px) {
    #container {
        width: 1000px;
        margin:0 auto;
    }
    header { height: 450px;}
    #intro, #map, #choice {
        box-sizing: border-box;
        position: relative;
        width: 100%;
        height: 400px;
        padding: 15px 5%;
    }

    .photo {
        display: block;
        width: 40%;
        margin-top: 20px;
    }

    .content {
        margin: 80px auto 10px;
        width: 90%;
        padding: 20px;
    }
    
    .photo > img {
        width: 100%;
        max-width: 320px;
        height: auto;
        margin-bottom: 30px;
    }

    #intro .photo, #map .photo {
        float: left;
        margin-right: 5%;
    }
    
    #choice .photo {
        float: right;
    }
    
    .text {width: 45%;}

    #intro .text, #map .text {float: right;}

    #choice .text {float: left;}

    #choice .photo img {border: 1px solid white; border-radius: 50%;}

    footer {clear:both;}
}

 

'HTML+CSS > CSS' 카테고리의 다른 글

과제(8)-홈페이지 만들기  (0) 2024.04.12
웹개발(14)-transform, transition, animation  (0) 2024.04.12
웹개발(12)-미디어쿼리, em,rem  (0) 2024.04.11
웹개발(11)-float, layout  (0) 2024.04.11
웹개발(10)-CSS position 지정  (0) 2024.04.09

'HTML+CSS/CSS' Related Articles

티스토리툴바