본문 바로가기
웹 개발

16. 웹 개발을 위한 기본 CSS 태그 모음 & 요약 정리6

by 곽정우 2024. 4. 12.

1. css 우선순위

<!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="./css/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>

2. css변수

<!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: dark;
                --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>

3. 카페 소개(반응형 웹 디자인)

PC버전, 태블릿 버전, 모바일 버전에 대한 이미지 입니다

4. transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transform</title>
    <style>
        p {
            width: 600px;
            padding: 20px;
            border: 3px solid rgba(0, 0, 0, 0.5);
        }
        #translate {
            transform: translate(30px, 50px);
            background-color: deeppink;
        }
        #rotate {
            transform: rotate(60deg);
            background-color: gold;
        }
        #scale {
            transform: scale(1.5, 1.2);
            background-color: orange;
        }
        #skew {
            transform: skew(30deg, 15deg);
            background-color: yellowgreen;
        }
        #gradient{
            background-color: pink;
            /* 크롬, 엣지를 위한 코드 */
            background: -webkit-linear-gradient(left, pink, red);
            /* 오페라를를 위한 코드 */
            background: -o-linear-gradient(left, pink, red);
            /* 익스플로러를 위한 코드 */
            background: -ms-linear-gradient(left, pink, red);            
            /* 파이어폭스를 위한 코드 */
            background: -moz-linear-gradient(left, pink, red);  
            /* CSS 표준 문법 */
            background: linear-gradient(left, pink, red);  
        }
    </style>
</head>
<body>
    <h2>transform</h2>
    <p>origina</p>
    <p id="translate">translate</p>
    <p id="rotate">rotate</p>
    <p id="scale">scale</p>
    <p id="skew">skew</p>
    <p id="gradient">gradient</p>

</body>
</html>

5. transform1

도형 위에 마우스를 올리면 나오는 반응 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>translation1</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            float: left;
            margin: 30px;
        }
        #bg-tr {
            background-color: gold;
            transition: background-color ease-in-out 0.5s;
        }
        #bg-tr:hover{
            background-color: red;
        }
        #border-tr {
            background-color: deeppink;
            border: 3px dotted black;
            transition: all linear 2s;
        }
        #border-tr:hover{
            background-color: pink;
            border:3px dotted gray;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <h2>translation1</h2>
    <div id="bg-tr"></div>
    <div id="border-tr"></div>

</body>
</html>

6. transform2

이미지가 1>2>3>2>1 으로 움직이는 애니메이션이 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition2</title>
    <style>
        .box {
            margin-top: 100px;
            margin-left: 100px;
            padding: 20px;
            height: 60px;
            animation-name: moving;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        @keyframes moving {
            from {
                width: 200px;
                background-color: gold;
                opacity: 0.5;
                transform: rotate(0deg);
            }
            to {
                width: 300px;
                background-color: pink;
                opacity: 1;
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <h2>animation1</h2>
    <div class="box">
        <h3>CSS Animation</h3>
    </div>
</body>
</html>

7. animation1

2개의 박스가 왼쪽에서 오른쪽으로 이동하는 애니메이션이 생성됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition2</title>
    <style>
        h2 { text-align: center; }
        #ex {
            position: relative;
            width: 800px;
            height: 400px;
            margin: 0 auto;
            border: 5px solid black;
            padding: 30px;
        }
        p {
            text-align: center;
            padding-top: 50px;
            font-weight: bold;
        }
        .box {
            font-size: 20px;
            position: relative;
            width: 140px;
            height: 140px;
            margin-bottom: 50px;
            background-color: gold;
        }
        #ex:hover > .box {
            transform: rotate(720deg);
            margin-left: 650px;
        }
        #no-delay {
            transition-duration: 3s;
        }
        #delay {
            transition-delay: 1s;
            transition-duration: 2s;
        }
    </style>
</head>
<body>
    <h2>transition2</h2>
    <div id="ex">
        <div id="no-delay" class="box">
            <p>(●'◡'●)</p>
        </div>
        <div id="delay" class="box">
            <p>(⊙_⊙;)</p>
        </div>
    </div>
</body>
</html>

 

 

'웹 개발' 카테고리의 다른 글

17. 자바스크립트 기본 정리1  (0) 2024.04.15
과제- 웹 사이트 CSS(애니메이션) 적용 하기  (0) 2024.04.15
15. CSS 스타일링 기술(우선순위&Custom&Graphic)  (0) 2024.04.12
과제- 웹 사이트 CSS 적용 하기(뉴스기사,즐겨찾기,이력서,로그인,회원가입)  (0) 2024.04.12
14. 웹 개발을 위한 기본 CSS 태그 모음 & 요약 정리 5  (0) 2024.04.12

관련글

티스토리툴바