관리 메뉴

거니의 velog

230830_CSS 강의 본문

대덕인재개발원_Front End

230830_CSS 강의

Unlimited00 2023. 8. 30. 08:57

[structure_pseudo.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="author" content="LeeGJ" />
        <meta name="copyright" content="대덕인재개발원" />
        <meta name="description" content="구조의사클래스" />
        <meta name="keywords" content="대덕인재개발원, html, 구조의사클래스" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>구조의사클래스</title>
        <link href="css/style5.css" rel="stylesheet" type="text/css" />
        <style>
            div>p {
                border: 1px solid orange;
                padding: 10px;
                transition: all 0.4s;
                cursor: pointer;
                margin-bottom: 10px;
            }
            div>p:first-of-type {
                background-color: greenyellow;
            }
            div>p:last-of-type {
                border: 5px dotted green;
            }
            div>p:nth-of-type(3) {
                background-color: aqua;
            }
            div>p:nth-of-type(4) {
                background-color: rgba(255, 0, 0, 0.2);
            }
            div>p:nth-of-type(even) {
                color: red;
            }
            div>p:hover {
                background-color: orange;
            }
            div>p:active {
                font-size: 1.5rem;
            }
        </style>
    </head>
    <body>

        <div>
            <p>무궁화 꽃이 피었습니다.</p>
            <p>사랑은 늘 도망가</p>
            <p>우리들의 블루스</p>
            <p>모래 알갱이</p>
            <p>능소화 꽃이 피었습니다.</p>
            <p>진달래 꽃이 피었습니다.</p>
            <p>개나리 꽃이 피었습니다.</p>
        </div>
   
    </body>
</html>

[style5.css]

@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;500;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Noto Sans KR", sans-serif;
    color: #333;
    word-break: keep-all;
}

pre {
    font-family: "Noto Sans KR", sans-serif;
    color: #333;
    word-break: keep-all;
    background-color: lightblue;
    border: 4px inset red;
    padding: 10px;
    margin: 20px 0px;
    font-size: 1.5rem;
}

.cen {
    max-width: 1000px;
    width: 100%;
    margin: auto;
}

/***********************************/


[fontFamily.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="author" content="LeeGJ" />
        <meta name="copyright" content="대덕인재개발원" />
        <meta name="description" content="폰트 패밀리" />
        <meta name="keywords" content="대덕인재개발원, html, 폰트 패밀리" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>폰트 패밀리</title>
        <link href="css/style5.css" rel="stylesheet" type="text/css" />
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
        <style>
            p {
                border: 2px solid gold;
                padding: 20px;
                margin-bottom: 10px;
            }
            p#p1 {
                line-height: 50px;
            }
            p#fvari {
                font-variant: small-caps;
            }
            #p2 {
                font: italic bold 150%/40px serif;
            }
            #pp {
                font-family: "Nanum Pen Script", cursive;
                font-size: 2rem;
                line-height: 50px;
            }
        </style>
    </head>
    <body>

        <div>
            <p>이제는 내가 첫 번째 자식이다!!</p>
            <p id="p1">
                무궁화 꽃이 피었습니다.
                <br />
                작은키나무로, 1~ 2미터의 높이에 팔목 정도의 굵기로 자란다. 줄기는 흰빛이 도는 회색을 띠고 있으며, 어린 가지에 있는 털은 자라면서 점차 없어진다. 달걀 모양 또는 마름모형 달걀 모양인 잎은 어긋나며, 세 갈래로 얕게 갈라진다. 잎자루는 짧고, 잎 가장자리에는 고르지 않은 톱니가 있다.
            </p>
            <p>사랑은 늘 도망가</p>
            <p>우리들의 블루스</p>
            <p>모래 알갱이</p>
            <p id="p2">
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
            </p>
            <p>진달래 꽃이 피었습니다.</p>
            <p>개나리 꽃이 피었습니다.</p>
            <p id="fvari">
                Good Morning~ Happy New Year~
            </p>
            <p id="pp">
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
            </p>
        </div>
   
    </body>
</html>


[fontStyle.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="author" content="LeeGJ" />
        <meta name="copyright" content="대덕인재개발원" />
        <meta name="description" content="폰트 스타일" />
        <meta name="keywords" content="대덕인재개발원, html, 폰트 스타일" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>폰트 스타일</title>
        <link href="css/style5.css" rel="stylesheet" type="text/css" />
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
        <style>
            p {
                border: 2px solid gold;
                padding: 20px;
                margin-bottom: 10px;
            }
            p#p1 {
                line-height: 50px;
                text-indent: 50px;
            }
            p#fvari {
/*                font-variant: small-caps;*/
                width: 350px;
                background-color: gold;
                box-shadow: 30px 20px 5px pink;
                text-transform: lowercase;
                text-transform: uppercase;
                text-transform: capitalize;
            }
            #p2 {
                font: italic bold 150%/40px serif;
            }
            #pp {
                font-family: "Nanum Pen Script", cursive;
                font-size: 2rem;
                line-height: 50px;
            }
            #love {
                letter-spacing: 30px;
                line-height: 40px;
                text-decoration: underline;
            }
            #p1 span {
                text-decoration: underline;
            }
            h1 {
                text-shadow: 50px 20px 5px red;
            }
            input[type=text] {
                margin-bottom: 10px;
                /* 입력 방향이 right to left로 바뀜 */
                direction: rtl;
            }
        </style>
    </head>
    <body>

        <div>
            <input type="text" size="100" placeholder="아무거나 입력하세요." />
            <p>이제는 내가 첫 번째 자식이다!!</p>
            <p id="p1">
                무궁화 꽃이 피었습니다.
                <br />
                작은키나무로, 1~ 2미터의 높이에 팔목 정도의 굵기로 자란다. 줄기는 흰빛이 도는 회색을 띠고 있으며, 어린 가지에 있는 털은 자라면서 점차 없어진다. <span>달걀 모양 또는 마름모형 달걀 모양인 잎</span>은 어긋나며, 세 갈래로 얕게 갈라진다. 잎자루는 짧고, 잎 가장자리에는 고르지 않은 톱니가 있다.
            </p>
            <p id="love">
                <h1>사랑은 늘 도망가</h1>
                <br />
                작은키나무로, 1~ 2미터의 높이에 팔목 정도의 굵기로 자란다. 줄기는 흰빛이 도는 회색을 띠고 있으며, 어린 가지에 있는 털은 자라면서 점차 없어진다. 달걀 모양 또는 마름모형 달걀 모양인 잎은 어긋나며, 세 갈래로 얕게 갈라진다. 잎자루는 짧고, 잎 가장자리에는 고르지 않은 톱니가 있다.
                <br />
                작은키나무로, 1~ 2미터의 높이에 팔목 정도의 굵기로 자란다. 줄기는 흰빛이 도는 회색을 띠고 있으며, 어린 가지에 있는 털은 자라면서 점차 없어진다. 달걀 모양 또는 마름모형 달걀 모양인 잎은 어긋나며, 세 갈래로 얕게 갈라진다. 잎자루는 짧고, 잎 가장자리에는 고르지 않은 톱니가 있다.
            </p>
            <p>우리들의 블루스</p>
            <p>모래 알갱이</p>
            <p id="p2">
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
            </p>
            <p>진달래 꽃이 피었습니다.</p>
            <p>개나리 꽃이 피었습니다.</p>
            <p id="fvari">
                Good Morning~ Happy New Year~
            </p>
            <p id="pp">
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
            </p>
        </div>
   
    </body>
</html>


[textMake.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="author" content="LeeGJ" />
        <meta name="copyright" content="대덕인재개발원" />
        <meta name="description" content="글자생성" />
        <meta name="keywords" content="대덕인재개발원, html, 글자생성" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>글자생성</title>
        <link href="css/style5.css" rel="stylesheet" type="text/css" />
        <style>
            div {
                width: 300px;
                height: 200px;
                border: 1px solid orange;
                word-wrap: break-word;
                margin-bottom: 10px;
            }
            #makeText {
                word-wrap: normal;
                word-break: break-all;
                overflow: auto;
            }
        </style>
        <script>
            function addText() {
                // 동적으로 글자 생성
                const arr = ["HTML", "Javascript", "jQuery", "CSS", "모래알갱이", "무지개", "사랑은 늘 도망가", "우리들의 블루스", "런던보이", "폴라로이드"];
//                console.log(arr);
//                console.log(arr.length);
                
                // arr[0], arr[7], arr[2]... 선택해야 함.
                let randIdx = parseInt(Math.random() * arr.length);
//                console.log(randIdx);
                
                let mkTxt = document.getElementById("makeText");
//                mkTxt.innerText += arr[randIdx];
//                mkTxt.innerHTML += '&nbsp;';
                
                // 문자를 document 문서에 하나의 text 요소로 추가 - createTextNode()
                let txt = document.createTextNode(arr[randIdx]);
                
                // div에 txt를 추가한다.
                mkTxt.append(txt);
            }
        </script>
    </head>
    <body>

        <div>
            aasfasklfjaslkjdliqjwidjlsakjdiqjclijqjldkjqwifjlkasjiqjwljdfpioqjswdl;kjqwojqf
            <br />
            asdsa asdas sa das as d
        </div>
        
        <div id="makeText"></div>
        <button type="button" onclick="addText()">확인</button>
   
    </body>
</html>


[imageAndColor.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="author" content="LeeGJ" />
        <meta name="copyright" content="대덕인재개발원" />
        <meta name="description" content="이미지와색" />
        <meta name="keywords" content="대덕인재개발원, html, 이미지와색" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>이미지와색</title>
        <link href="css/style5.css" rel="stylesheet" type="text/css" />
        <style>
            div {
                border: 20px solid orange;
                padding: 30px;
                margin: 20px;
                background-image: url(images/spongebob.png);
                background-size: 60px 60px;
                
            }
            p {
                border: 5px solid pink;
                padding: 10px;
                background-color: yellow;
            }
            #d1 {
                border-radius: 100px 50px 200px 150px;
            }
            #d2 {
                height: 500px;
/*                background-repeat: no-repeat;*/
/*                background-repeat: repeat-x;*/
                background-repeat: repeat-y;
/*                background-repeat: space;*/
                background-position: center;
            }
        </style>
    </head>
    <body>
        
        <div id="d1">
            <p>
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
            </p>
        </div>
        
        <div id="d2"></div>
   
    </body>
</html>


[bgImg.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="author" content="LeeGJ" />
        <meta name="copyright" content="대덕인재개발원" />
        <meta name="description" content="배경이미지" />
        <meta name="keywords" content="대덕인재개발원, html, 배경이미지" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>배경이미지</title>
        <link href="css/style5.css" rel="stylesheet" type="text/css" />
        <style>
            body {
/*
                background-image: url(images/spongebob.png);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 300px 300px;
                background-attachment: fixed;
*/
            }
            div {
                border: 20px dotted blue;
                margin: 20px;
                padding: 30px;
/*                background: lightblue url(images/배경1.jpg) center/600px repeat fixed;*/
                
                background-image: url(images/%EB%B0%B0%EA%B2%BD1.jpg);
                background-repeat: repeat;
                background-clip: content-box;
                background-clip: padding-box;
                background-clip: border-box;
            }
        </style>
    </head>
    <body>

         <div>
            <p>
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
                능소화 꽃이 피었습니다.
                <br />
                중국 원산의 갈잎 덩굴성 목본식물이다. 담쟁이덩굴처럼 줄기의 마디에 생기는 흡착 뿌리(흡반)를 건물의 벽이나 다른 물체에 지지하여 타고 오르며 자란다. 가지 끝에서 나팔처럼 벌어진 주황색의 꽃이 여름에서 가을에 걸쳐 핀다. 추위에 강하다.
                <br />
                능소화는 풍매화가 아닌 충매화이기 때문에, 꽃가루가 바람에 날릴 가능성도 적을 뿐만 아니라 꽃가루가 직접 안구에 닿더라도 실명할 만큼 위험하지 않다. 또한, 능소화의 화분으로 인해 실명 피해를 본 사례가 한차례도 없는 점도 이러한 사실들을 뒷받침한다.
            </p>
        </div>
   
    </body>
</html>


[backgroundImage.html]

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="author" content="LeeGJ" />
        <meta name="copyright" content="대덕인재개발원" />
        <meta name="description" content="배경이미지2" />
        <meta name="keywords" content="대덕인재개발원, html, 배경이미지2" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>배경이미지2</title>
        <link href="css/style5.css" rel="stylesheet" type="text/css" />
        <style>
            div {
                border: 5px solid blue;
                margin: 10px;
                padding: 10px;
                width: 600px;
                height: 400px;
                background-image: linear-gradient(blue, white);
            }
            #d1 {
                background-image: linear-gradient(red, yellow, blue);
            }
            #d2 {
                background-image: linear-gradient(to right, skyblue, white);
            }
            #d3 {
                background-image: linear-gradient(skyblue 20%, white);
            }
            #d4 {
                width: 500px;
                height: 500px;
                background-image: radial-gradient(red, yellow, blue);
            }
        </style>
    </head>
    <body>

        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d3"></div>
        <div id="d4"></div>
        <div id="d5"></div>
   
    </body>
</html>

'대덕인재개발원_Front End' 카테고리의 다른 글

230901_JS 강의  (0) 2023.09.01
230831_CSS 강의  (0) 2023.08.31
230829_HTML 강의  (0) 2023.08.29
230828_HTML 강의  (0) 2023.08.28
230825_HTML 강의  (0) 2023.08.25