4/3(월) IT K-DT(23일차) / 17.CSS2D변형~18.CSS우선순위계산

17. CSS 2D 변형

17-1. translate

17-2. rotate

17-3. scale

17-4. skew

17-5. linear-gradient

17-6. transition

17-7. CSS animation

18. CSS 우선순위 계산

예제

과제

17. CSS 2D 변형

Cascading Style Sheets (CSS)의 2차원(Transforms) 변형 기능을 의미.

이를 통해 HTML 요소의 위치, 크기, 회전 및 기타 속성을 조정하여 웹 페이지의 레이아웃과 모양을 변경.

17-1. translate: 이동

예) 수평으로 30px, 수직으로 50px 이동시키려는 경우.

<head>
<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: lightcyan;
        }
</style>
</head>

<body>
    <h2>transform</h2>
    <p>original</p>
    <p id="translate">translate</p>
</body>

17-2. rotate: 회전

예) 시계방향으로 60도 회전시키려는 경우.

<head>
    <title>transform</title>
    <style>

        p {
            width: 600px;
            padding: 20px;
            border: 3px solid rgba(0, 0, 0, 0.5);
        }

   #rotate {
            transform: rotate(60deg);
            background-color: lightcoral;
        }

    </style>
</head>

<body>
    <h2>transform</h2>
    <p>original</p>
    <p id="rotate">roatate</p>
</body>
</html>

17-3. scale: 확대, 축소

예) 가로로 1.5배, 세로로 1.2배 증가시키고 싶은 경우.

<head>
    <title>transform</title>
    <style>

        p {
            width: 600px;
            padding: 20px;
            border: 3px solid rgba(0, 0, 0, 0.5);
        }

#scale {
            transform: scale(1.5, 1.2);
            background-color: lightgoldenrodyellow;
        }
</style>
</head>

<body>
    <h2>transform</h2>
    <p>original</p>
    <p id="scale">scale</p>
</body>

17-4. skew: 경사

예) x축의 기울기각도를 시계방향으로 30도, y축의 기울기각도를 시계방향으로 15도 회전

<head>
    <title>transform</title>

    <style>
        p {
            width: 600px;
            padding: 20px;
            border: 3px solid rgba(0, 0, 0, 0.5);
        }

        #skew {
            transform: skew(30deg, 15deg);
            background-color: lightgreen;
        }

    </style>
</head>

<body>
    <h2>transform</h2>
    <p>original</p>
    <p id="skew">skew</p>
</body>

벤더 프리픽스(vendor prefix)

주요 웹 브라우저 제조사가 제공하는 고유한 CSS 속성 접두어.
웹 브라우저 제조사들은 CSS3에서 새로 추가된 속성들을 브라우저에서 안정적으로 사용하기 전에 특정한 접두어를 사용하여 이전 버전에서 실험적으로 지원할 수 있도록 함.
이러한 실험적인 기능을 제공하기 위해 접두어가 추가되었고, 이를 벤더 프리픽스라고 함.

W3C CSS 권고란에 포함되지 않은 기능이나 ,포함되어있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 적용.

이러한 벤더 프리픽스는 브라우저 호환성을 위해 필요하지만,
속성을 정규화(normalize)하거나 대체할 수 있는 경우에는 최대한 사용하지 않는 것이 좋음.
벤더 프리픽스가 남용되면 코드의 가독성을 떨어뜨리고, 유지보수를 어렵게 만들 수 있기 때문.

해당 속성이 적용되지 않았을 경우 표현해야 할 코드를 가장 먼저 작성해야 하며, 표준 문법 코드는 가장 마지막에 작성해야 함.

   -webkit: 크롬, 엣지를 위한 접두사
    -o-: 오페라를 위한 접두사
    -ms-: 익스플로러를 위한 접두사
    -moz-: 파이어폭스를 위한 접두사

17-5. linear-gradient : 그라데이션

색상의 그라데이션을 설정

<head>
    <title>transform</title>
    <style>

        p {
            width: 600px;
            padding: 20px;
            border: 3px solid rgba(0, 0, 0, 0.5);
        }

        #gradient {
            background-color: pink;
            /* 크롬, 엣지를 위한 코드 */
            background: -webkit-linear-gradient(left, pink, gray);
            /* 오페라를 위한 코드 */
            background: -o-linear-gradient(left, pink, gray);
            /* 익스플로러를 위한 코드 */
            background: -ms-linear-gradient(left, pink, gray);
            /* 파이어폭스를 위한 코드 */
            background: -moz-linear-gradient(left, pink, gray);
            /* CSS 표준 문법 코드 */
            background: linear-gradient(left, pink, gray);
        }
    </style>
</head>

<body>
    <h2>transform</h2>
    <p>original</p>
    <p id="gradient">gradient</p>
</body>
</html>

17-6. transition : 전환

요소에 추가할 css 스타일 전환효과를 설정.
추가할 전환효과나 지속시간도 설정.

    property: 요소에 추가할 전환효과를 설정.
    timing-function: 전환효과의 값을 설정.
        linear: 처음부터 끝까지 일정한 속도.
        ease: 전환효과가 천천히 → 빨라지고 → 천천히 → 끝.
    duration: 전환효과를 나타내는 시간을 설정.
    delay: 설정한 시간만큼 대기하다 전환효과를 나타냄.

예) 노란 사각형 → 커서를 올리면 빨간 사각형으로 변화.

<head>
    <title>transition1</title>
    <style>

        div {
            width: 100px;
            height: 100px;
            float: left;
            margin: 30px;
        }

        #bg-tr {
            background-color: gold;
            transition: background-color ease 2s; /* hover 시 2초간 천천히 변화함 */
        }

        #bg-tr:hover { /* 마우스 커서가 올라갔을 때의 변화 */
            background-color: red;
        }
        }
    </style>
</head>

<body>
    <h2>transition1</h2>
    <div id="bg-tr"></div>
</body>

예) 핫핑크 점선 사각형 → 커서를 올리면 분홍 점선 동그라미로 변화.

<head>
    <title>transition1</title>
    <style>

        div {
            width: 100px;
            height: 100px;
            float: left;
            margin: 30px;
        }

        #border-tr {
            background-color: deeppink;
            border: 3px dotted black;
            transition: all linear 1s;
        }

        #border-tr:hover {
            background-color: pink;
            border: 3px dotted gray;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <h2>transition1</h2>
    <div id="border-tr"></div>
</body>

예) 두 개의 노란 사각형 → 커서를 올리면 오른쪽으로 회전해서 이동하도록 하고싶은 경우.

<head>
    <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); 총 3바퀴를 돌아서 이동하는 것을 의미
            margin-left: 650px; 왼쪽에서부터 650px의 마진의 위치가 마지막 위치
        }

        #no-delay {
            transition-duration: 3s;
        }

        #delay { 아래 사각형은 1초 후에 출발하며, 2초동안 회전해서 위의 사각형과 동시에 도착한다.
            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-7. CSS animation : 애니메이션

요소의 현재 스타일을 다른 스타일로 변환.

    @keyframe
    시작: 0%, from
    과정: 1%, 3%, 10%, ...
    끝: 100%, to
    ( 0%일 때 장면1, 5%일 때 장면2, 50%일 때 장면 3 ..... 100%일 때 완료 장면을 삽입.)

animation-name: 애니메이션 및 해당 요소에 이름을 설정.
animation-fill-mode: 애니메이션이 끝난 후 어떻게 처리할지를 설정.
    forwards: 애니메이션 키프레임이 완료되었을 때 마지막 프레임을 유지.

animation-direction: 애니메이션의 진행방향을 정하는 설정.
    reverse: 역방향으로 진행.
    alternate: 정해진 순서로 진행했다가 다시 반대 순서로 진행.
    reverse-alternate: 반대 순서로 진행했다가 다시 정해진 순서로 진행.

animation-duration: 애니메이션이 일어나는 시간을 설정.
animation-iteration-count: 애니메이션이 몇 번 반복할지를 설정.
infinite: 무한 반복.
숫자: 숫자만큼 반복.

예) 200px길이의 노란색 바가 무한반복하여 회전하면서 400px길이의 황록색 바로 반복해서 변하는 경우.

<head>
    <title>animation1</title>
    <style>

        .box {
            margin-top: 100px;
            margin-left: 100px;
            padding: 20px;
            height: 60px;
            animation-name: moving; /* @keyframes에 쓴 이름 moving을 애니메이션으로 가져옴 */
            animation-duration: 3s; /* 한번 왕복하는데 3초 */
            animation-iteration-count: infinite; /* 무한반복 */
            animation-direction: alternate;/* 왔다갔다함 */
        }

        @keyframes moving {

            from {
                width: 200px;
                background-color: gold;
                opacity: 0.5; /* 투명도는 0.5 */
                transform: rotate(0deg);
            }

            to {
                width: 400px;
                background-color: greenyellow;
                opacity: 1;
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <h2>animation1</h2>
    <div class="box">
        <h3>CSS3 Animation</h3>
    </div>
</body>

CSS3 Animation

18. CSS 우선순위 계산

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

예) 6개의 사각형에 대한 우선순위를 찾고 싶은 경우.

<HTML>

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

</head>

<body>

<h2>css 우선순위</h2>

<div style="background-color: aqua;">div 1번 : inline 스타일이 최우선이므로 aqua가 적용됨.</div>

<div id="id-style" class="class-style">div 2번 : id의 점수가 제일 높으므로 deeppink가 적용됨.</div>

<div class="class-style">div 3번 : class의 점수가 제일 높으므로 greenyellow가 적용됨.</div>

<div class="class-style2 class-style">div 4번 : 동일한 속성을 적용할 경우 나중에 적용한 것(.class-style2)이 우선되므로 pink가 적용됨. </div>

<div>div 5번 : 동일한 요소를 적용할 경우 나중에 적용한 속성(./css/css.css)이 우선되므로 purple이 적용됨. </div>

<ul>
    <li class="li-class">li 1번 : 점수가 높은 속성(orange:12점, violet:2점)이 적용되므로 orange가 적용됨.</li>
</ul>

<div id="id-style2" class="class-style3">div 6번 : !important 우선이므로 beige가 적용됨. </div>

</body>

<CSS>

div {
background-color: purple;
}

예제

<사진>

<HTML>

...

<head>

    <title>introduce</title>

    <link rel="stylesheet" href="./css/cafe.css">

</head>

<body>

    <div id="container"> 전체 화면을 가운데정렬시킬 container가 필요.

        <header> header (내부에 navi태그 + 사진)
            <nav> 사진 위에 메뉴바를 얹는 구조 (nav 안에 ul > li*3 으로 구조설정)
                <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="./images/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="./images/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="./images/ice.jpg" alt="추천"></div>
                <div class="text">
                    <h2>핸드드립 아이스커피</h2>
                    <ol>
                        <li>1인분 기준으로 서버에 각 얼음 5조각(1조각: 20cc)을 넣고 추출을 시작.</li>
                        <li>평상시보다 원두의 양은 2배 정도(20g)로 추출액은 얼음을 포함해서 200cc까지 내림.</li>
                        <li>아이스 잔에 얼음 6~7개를 섞어 시원하게 마심.</li>
                    </ol>
                </div>
            </div>
        </section>

        <footer> footer
            <p> My times with Coffee</p>
        </footer>

    </div>

</body>
</html>

<CSS>

눈누에서 폰트를 가져오기
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

가져온 폰트를 body 탭에 적용
body {
    font-family: 'GmarketSansMedium';
}

전체 box인 container style 적용
#container {
    width: 100%;
    margin: 0 auto;
}

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

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

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

텍스트들이 link이므로 link인 a의 style 적용
a { text-decoration: none; }

a:link, a:visited {color: white}
a:active {color: yellow;}
a:hover {color: yellow}

header {
    width: 100%;
    height: 300px;
    background-image: url(../images/header.jpg);
    background-repeat: no-repeat; /* 배경이 반복이 되지 않도록 */
    background-position: center; /* 배경이 가운데에 위치하도록 */
    background-size: cover; /* 배경크기를 비율로 줄여 최적으로 보이도록 */
    margin: 0; /* 배경 가장자리의 마진이 없도록 */
}

/* .photo의 이름이 붙은 사진을 모두 보이지않게 함. */
.photo{
    display: none;
}

section{
    position: relative;
    width: 100%;
    padding: 15px 5%;
}

/* 단락 제목인 page title의 style 적용 */
.page-title{
    position: absolute;
    top: 20px;
    left: 0px;
    padding: 30px 50px;
}

/* 단락 내용인 content의 style 적용 */
.content{
    margin: 80px auto 10px; /* 위 80px, 좌우 auto, 아래 10px 마진 */
    width: 90%;
    padding: 20px;
    box-sizing: border-box;
}

/* container 안에서 section에 해당하는 번호의 style 적용 */
/* 짝수 section에 해당하는 style 적용 */
#container section:nth-child(even){
    background-color: bisque;
}

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

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

/* mobile로 확인을 하고싶은 경우 */
@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;
    }

}

/* #choice.text와 #choice .text는 차이가 매우 큼.
전자는 동급의 요소, 후자는 부모자식요소의 포괄형태의 유무
확실히 구분하는 것이 필요.
*/

과제

특정 사이트 메인페이지를 클론코딩하기. (~수요일 오전까지)

http://wnsgml0420.dothome.co.kr/

초기 화면

wnsgml0420.dothome.co.kr

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

yj.cho

4/3(월) IT K-DT(23일차) / 17.CSS2D변형~18.CSS우선순위계산