6. HTML 방식

2024. 10. 29. 16:58ㆍ파이썬(python)의 HTML

1. FLEX 레이아웃 방식

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉스 레이아웃</title>
    <style>
        #container1 {
            width: 600px;
            height: 200px;
            margin: 0 auto;
            border: 3px solid red; 
            /*플렉스는 가로로 나열한다*/
            display: flex;
            /*flex-wrap : nowrap(기본값) 컨테이너를 넘어가더라도 해당 크기에 맞춤 
            
                :wrap 요소의 여유 공간이 없다면 다음줄로 넘김
                :wrap-reverse: wrap과 동일하지만 위쪽으로 넘김
            */
            flex-wrap: wrap;
        }
        #container1 > div {
            width: 250px;
            border:  1px solid black;
            background-color: gold;
        }
        span {
            font-size: 30px;
            font-weight: bold;
            padding: 20px;
        }

        #container2{
            width: 600px;
            height: 200px;
            margin: 0 auto;
            border: 3px solid red;
            display: flex;
            /*justify-content :  수평으로 정렬 flex-start(기본값)
              왼쪽에서 시작
               flex-end 오른쪽 정렬
               : center 가운데 정렬
               : space-between: 앞 뒤 요소를 붙히고 여유 공간을 두고 배치
               : space-around : 앞뒤 약간의 공간을 두고 요소들 사이를 배치
            */
            /* justify-content: space-around; */
            
            /* 
                align items : 수직 방향 정렬 방식을 설정 
                :stretch:(기본값) 위 아래 요소를 꽉 채움
                :flex-start 위에서 시작
                flex-end : 밑에서 시작
                : center : 가운데 정렬
                : baseline : 요소들이 텍스트 베이스라인 기준으로 정렬
                */
            align-items: baseline;
        }

        #container2 > div {
            width:  50px;
            border: 3px solid black;
            background-color: gold;
        }
        #box2 {
            /* align self로 하면 따로 설정할수가 있다*/
            align-self: end;
        }
        /* 순서를 바꿔서 정해줄수도 있다. */
        #box1 {order : 4;}
        #box2 {order : 1;}
        #box3 {order : 5;}
        #box4 {order : 2;}
        #box5 {order : 3;}
    </style>
</head>
<body>
    <div id="container1">
        <!-- div*3>span{$} -->
        <div><span>1</span></div>
        <div><span>2</span></div>
        <div><span>3</span></div>
    </div>
    <hr>
    <!-- #container2>div#box$*5>p{$} -->
    <div id="container2">
        <div id="box1">
            <p>1</p>
        </div>
        <div id="box2">
            <p>2</p>
        </div>
        <div id="box3">
            <p>3</p>
        </div>
        <div id="box4">
            <p style="font-size: 30px;">4</p>
        </div>
        <div id="box5">
            <p>5</p>
        </div>
    </div>
</body>
</html>

 
-->
결과 화면

2. 미디어 쿼리

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>미디어 쿼리</title>
    <style>
        body { background-color: deeppink; }

        /*조건이 만족하면 800px가 적용되어 덮어쓰게 된다*/
        /* 1024 PC 스타일 */
        @media screen and (min-width: 1025px) {
            body { background-color: deepskyblue;}
        }

        /* 태블릿 스타일 */
        @media (min-width: 768px) and (max-width: 1024px) {
            body { background-color: gold;}
        }
        
        /* 휴대폰 스타일 */
        @media (max-width: 767px) {
            body { background-color: purple;}
        }
    </style>
</head>
<body>
    <h1>미디어 쿼리 테스트</h1>
</body>
</html>

 
-->
결과 화면

더보기
화면 크기에 따라 색깔이 변한다

3. 미디어쿼리 활용

<!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="./media.css">
</head>
<body>
    <div id="container">
        <header>
            <h1>여행 가자!</h1>
        </header>
        <!-- section#menus -->
        <section id="menus">
            <!-- #menu$*5>h2 -->
            <div id="menu1">
                <h2>풍선</h2>
            </div>
            <div id="menu2">
                <h2>등산</h2>
            </div>
            <div id="menu3">
                <h2>비행기</h2>
            </div>
            <div id="menu4">
                <h2>배낭</h2>
            </div>
            <div id="menu5">
                <h2>기차</h2>
            </div>
        </section>
        <footer>
            <p>ⓒ 2024. 요니 All rights reserved.</p>
        </footer>
    </div>
</body>
</html>

 

/* media.css 파일 */
#container {
    width: 100%;
}

header {
    width: 100%;
}

header > h1 {
    /* text-align: center;
    font-size: 40px; */
}

#menus {
    width: 100%;
}

#menus > div {
    height: 300px;
    border: 1px solid black;
    margin-bottom: 15px;
    position: relative;
}

#menus h2 {
    position: absolute;
    font-size: 30px;
    right: 3%;
    bottom: 10px;
    color: white;
    text-shadow: 3px 3px 5px white;
}

#menu1, #menu2, #menu3, #menu4, #menu5 {
    width: 100%;
}

#menu1 {
    background: url(./images/travel1.jpg) no-repeat center/cover;
}

#menu2 {
    background: url(./images/travel2.jpg) no-repeat center/cover;
}

#menu3 {
    background: url(./images/travel3.jpg) no-repeat center/cover;
}

#menu4 {
    background: url(./images/travel4.jpg) no-repeat center/cover;
}

#menu5 {
    background: url(./images/travel5.jpg) no-repeat center/cover;
}

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

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

/* 태블릿 스타일 */
@media (min-width: 768px) and (max-width: 1024px) {
     #menus {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
     }
     
     #menu1, #menu2, #menu3, #menu4 {
        width: 49%;
     }
}
        
/* PC 스타일 */
@media screen and (max-width: 1025px) {
    #menus {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
     }

    #menu1, #menu2, #menu3, #menu4 {
        width: 32%;
     }
     #menu5 {
        width: 65%;
     }
}

 
-->
결과 화면

4. 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 {
            padding: 30px;
            margin:  30px;
            background-color: gold;
        }
        .class-style {
            background-color: greenyellow;
        }
        .class-style2 {
            background-color: pink; font-size: 30px;
        }
        .class-style3 {
            background-color: beige !important; }
        ul > li.li-class {background-color: orange;}
        ul > li {background-color:  violet;}
        
    </style>
</head>
<body>
    <!-- (id class element) -->
    <div style="background-color: aqua;">1번(인라인 스타일 우선)</div>
    <div id="id-style" class="class-style">2번(id가 우선순위)</div>
    <div class="class-style">3번(class 우선순위)</div>
    <div class="class-style2 class-style">4번(동일한 속성은 나중에 적용한 것이 우선)</div>
    <div>5번(gold)</div>
    <!-- ul>li.li-class -->
    <ul>
        <li class="li-class">6번(점수가 높은 속성이 우선순위)</li>
    </ul>
    <div id="id-style2" class="class-style3">7번(important는 0순위)</div>
</body>
</html>

 
-->
결과 화면

5. 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 (max-width: 768px){
            :root {
                --background-color: deeppink;
                --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>
    </ul>

</body>
</html>

 
-->
결과 화면

6. 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(50deg);
        background-color: gold;
        }
    #scale {
        transform: scale(1.5, 1.2);
        background-color: orange;
    }
    #skew {
        transform: skew(30deg, 15deg); /* x축 기울기 각도, y축 기울기 각도*/
        background-color: yellowgreen;
    }
    #gradient {
        background: pink;
        /* chrome, edge를 위한 코드 */
        background: -webkit-linear-gradient(left, pink, gray);
        /*opera를 위한 코드 */
        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(to left, pink, gray);
        /* background: linear-gradient(left, pink, gray); */
    }
    
    </style>
</head>
<body>
    <p>original</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>

 
-->
결과 화면

7. transition

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin: 30px;
        }
        #bg-tr {
            background-color: gold;
            /* ease : 천천히 -> 빨라지고 -> 천천히 */
            /* linear : 처음부터 끝까지 일정힌 속도 */
            transition: background-color ease 2s;
        }
        #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>
    <!--div#bg-tr-->
    <div id="bg-tr"></div>
    <!-- div#border-tr -->
    <div id="border-tr"></div>
</body>
</html>

 
-->
결과 화면

8. transition 활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition 활용</title>
    <style>
        #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;
        }
        #nodelay {
            transition-duration: 3s;
        }
        #delay {
            transition-delay: 1s; transition-duration: 2s;
        }


    </style>
</head>
<body>
    <!-- #ex>#delay.box*2>p -->
    <div id="ex">
        <div id="nodelay" class="box">
            <p>(^*^)</p>
        </div>
        <div id="delay" class="box">
            <p>(*m*)</p>
        </div>
    </div>
</body>
</html>

 
-->
결과 화면

더보기
박스가 굴러가는 화면 캡쳐

9. 애니메이션

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>애니메이션</title>
    <style>
        .box {
            margin: 100px;
            padding: 20px;
            height: 60px;
            animation-name: moving;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
        @keyframes moving {
            /* 
                1. from ~ to
                2. 0%, 1% ~ 100%
            */
            from {
                width: 200px;
                background-color: gold;
                opacity: 0.5;
                transform: rotate(0deg);
            }
            to {
                width: 400px;
                background-color: pink;
                opacity: 1;
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <!--div.box>h3{CSS Animation}-->
    <div class="box">
        <h3>CSS Animation</h3>
    </div>

</body>
</html>

 
-->
결과 화면

더보기
색깔이 바뀌면서 돌아가는 상자 캡쳐

 

 

728x90
LIST

'파이썬(python)의 HTML' 카테고리의 다른 글

5. HTML 위치 지정방식  (0) 2024.10.29
4. CSS 관련 모음집  (6) 2024.10.28
3. HTML 태그  (0) 2024.10.25
2. VS Code(Visual Studio Code) 설치  (16) 2024.10.24
1. HTML(HyperText Mark-up Language)  (3) 2024.10.24

관련글

티스토리툴바