버미다

철근입출고 화면

bumychoi — Tue, 3 Feb 2026 15:20:46 +0900

블루프린터 연습

bumychoi — Tue, 13 Jan 2026 11:26:42 +0900

from app import create_app

app = create_app()

if __name__ == "__main__":

app.run(debug=True)

run.py

from flask import Flask

from app.blueprints.home import home_bp

from app.blueprints.admin import admin_bp

def create_app():

app = Flask(__name__)

app.register_blueprint(home_bp)

app.register_blueprint(admin_bp)

return app

__init__.py

from flask import Blueprint, render_template

home_bp = Blueprint("home", __name__)

@home_bp.route("/")

def home():

return render_template("home.html")

home.py

from flask import Blueprint

admin_bp = Blueprint("admin", __name__, url_prefix="/admin")

@admin_bp.route("/")

def admin_home():

return "Admin Page"

admin.py

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>Blueprint 연습 성공!</p>

</body>

</html>

home.html

MY SQL 설치

bumychoi — Mon, 22 Dec 2025 09:40:12 +0900

https://downloads.mysql.com/archives/installer/

https://code-angie.tistory.com/158

[MySQL] MySQL 설치하기 (윈도우 / windows)

MySQLMySQL은 가장 많이 사용되는 데이터베이스 중 하나이다.무료이기에 간단히 설치해 바로 사용할 수 있다. 윈도우와 리눅스 등 다양한 운영체제에서 사용 가능해 확장성이 뛰어나다. 표준 SQL

code-angie.tistory.com

MySQL :: Download MySQL Installer (Archived Versions)

Please note that these are old versions. New releases will have recent bug fixes and features! To download the latest release of MySQL Installer, please visit MySQL Downloads. MySQL open source software is provided under the GPL License.

downloads.mysql.com

웹디자인개발 기능사 D-1일 실전연습1

bumychoi — Wed, 10 Sep 2025 15:37:52 +0900

<!DOCTYPE html>

<head>

<title>서울구석구석</title>

</head>

<body>

<nav>

<ul>

</ul>

</li>

<li><a href="#">도보해설관광</a></li>

</ul>

</li>

<li><a href="#">엔터테이먼트</a></li>

<li><a href="#">개스트하우스</a></li>

</ul>

</li>

<li><a href="#">시티투어버스</a></li>

</ul>

</li>

</ul>

</nav>

</header>

<ul>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</section>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque minus reiciendis

beatae,

provident temporibus exercitationem eaque maxime nesciunt enim quidem sunt id illo

maiores

ipsa, rem rerum quisquam iste quaerat!</p>

</a>

</aside>

</div>

<ul>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</article>

<ul>

</ul>

</article>

</div>

</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quibusdam aliquam nesciunt, voluptate

nulla repellat nisi © temporibus soluta facere iste reiciendis tempora quod dolore voluptas impedit

quasi,

assumenda est et!

</div>

<h3>famliy site</h3>

</select>

</div>

</footer>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea unde iste, ratione dignissimos eligendi,

fugiat quod, hic nobis distinctio facilis dolorum recusandae! Sed, rerum ipsam? Est a veritatis maxime

explicabo!</p>

</div>

</body>

</html>

$(function(){

$("nav> ul > li").mouseenter(function(){

$(this).children(".sub").stop().slideDown();

})

$("nav> ul > li").mouseleave(function(){

$(".sub").stop().slideUp();

})

let i=0;

function slide(){

if (i<2){

i++;

} else{

i=0;

}

$(".slide >ul").animate({marginLeft:-100*i+"%"})

}

setInterval(slide,3000)

$(".pop").click(function(){

$(".popcon").show();

})

$(".close").click(function(){

$(".popcon").hide();

})

@charset "utf-8";

margin: 0;

padding: 0;

box-sizing: border-box;

}

li{

list-style: none;

}

text-decoration: none;

color: inherit;

}

body{

background: #ffffff;

color: #333333;

}

button{

cursor: pointer;

border: none;

}

.wrap{

width: 100%;

height: 750px;

position: relative;

}

header{

text-align: center;

width: 200px;

height: 650px;

}

nav> ul > li >a{

width: 200px;

background: blue;

color: #ffffff;

font-size: 20px;

display: block;

padding: 10px;

}

nav > ul >li:hover> a{

background: skyblue;

color:black;

}

.sub{

display: none;

}

.sub >li{

background: skyblue;

color: palevioletred;

padding: 10px;

border-bottom: 1px dashed palevioletred;

}

.sub >li >a{

display: block;

font-size: 18px;

font-weight: bold;

}

.sub >li >a:hover{

background: blue;

color: #ffffff;

}

.contents{

display: flex;

}

.body{

width: calc(100% - 200px);

height: 650px;

}

.content > .slide{

width : 100%;

height: 400px;

overflow: hidden;

}

.slide >ul{

display: flex;

width: 300%;

height: 100%;

}

.slide li{

width: 100%;

position: relative;

}

.slide a{

display: block;

width: 100%;

height: 100%;

}

.slide li:hover{

opacity: 0.5;

}

.slide .s1{

background: url(/d_2/images/s1.jpg) no-repeat center/cover;

}

.slide .s2{

background: url(/d_2/images/s2.avif) no-repeat center/cover;

}

.slide .s3{

background: url(/d_2/images/s3.jpg) no-repeat center/cover;

}

.slide h2{

text-align: center;

position: absolute;

bottom: 0;

left: 0;

width: 200px;

background: white;

border-radius: 20px;

color: blue;

opacity: 0.8;

}

.go{

width: 230px;

height: 100%;

text-align: center;

}

.go img{

padding-top: 10px;

width: 150px;

height: 100px;

}

.go a:hover{

opacity: 0.5;

}

.content{

display: flex;

}

.notice_gall{

display: flex;

height: 250px;

}

.notice {

flex: 1;

}

.notice h3{

text-align: center;

width: 150px;

padding: 10px;

background: blue;

color: white;

font-size: 25px;

border-radius: 30px 30px 0 0;

}

.notice ul{

height: 180px;

background: blue;

}

.notice ul li{

padding: 10px;

color: white;

font-size: 20px;

border: 1px dashed white;

position: relative;

}

.notice p{

width: 300px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

.notice span{

position: absolute;

top:10px;

right: 10px;

}

.gall{

flex: 1;

}

.gall h3{

text-align: center;

width: 150px;

padding: 10px;

background: skyblue;

color: white;

font-size: 25px;

border-radius: 30px 30px 0 0;

}

.gall ul{

height: 180px;

background: skyblue;

display: flex;

}

.gall img{

width: 150px;

height: 150px;

margin-left: 50px;

padding-top: 30px;

}

.gall a{

display: block;

width: 100%;

height: 100%;

}

.gall li:hover{

opacity: 0.5;

}

footer{

display: flex;

height: 120px;

}

.flogo{

text-align: center;

align-content: center;

width: 200px;

}

.copy{

flex: 1;

}

.copy{

text-align: center;

align-content: center;

font-size: 18px;

}

.famliysite{

text-align: center;

align-content: center;

width: 250px;

}

.famliysite select{

width: 100px;

height: 30px;

font-size: 18px;

}

.popcon{

position: absolute;

top:50%;

left: 50%;

transform: translate(-50%, -50%);

width: 500px;

height: 350px;

border: 1px blue dashed;

padding: 50px;

background: rgba(0,0,0,0.5);

display: none;

z-index: 9999;

}

.popcon h1{

text-align: center;

color: #ffffff;

}

.popcon p{

color: white;

font-size: 18px;

padding-top: 20px;

}

.close{

text-align: end;

}

button{

padding: 20px;

font-size: 20px;

font-weight: bold;

border-radius: 20px;

background: blue;

color: white;

}

button:hover{

background: red;

}

웹디자인개발 기능사 D-7일 실전연습1

bumychoi — Thu, 4 Sep 2025 13:20:23 +0900

<!DOCTYPE html>

<head>

<title>서울구석구석</title>

</head>

<body>

<nav>

<ul>

</ul>

</li>

<li><a href="#">도보해설관광</a></li>

</ul>

</li>

<li><a href="#">엔터테인먼트</a></li>

</ul>

</li>

<li><a href="#">시티투어버스</a></li>

</ul>

</li>

</ul>

</nav>

</header>

<ul>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</article>

<ul>

</ul>

</aside>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem laborum tenetur odio. Nesciunt

ratione ex aperiam! Asperiores, voluptatem. Fugit nobis exercitationem magnam aspernatur ipsa

eos fugiat reiciendis, nam vel blanditiis.</p>

</article>

</li>

<li>

</li>

</ul>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</ul>

</div>

</div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam deserunt eius sit iure cum, impedit

molestias quidem beatae et © tempora nobis, labore consequatur facilis voluptatum rerum sunt

incidunt eos

itaque.

</div>

<ul>

</ul>

</aside>

</footer>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit consequatur aliquam nobis odit quos

dignissimos deleniti, vero mollitia quae? Facere officiis rem distinctio maxime, dolores adipisci

provident iure voluptatibus ab.</p>

</div>

</body>

</html>

$(function () {

$("nav >ul >li").mouseenter(function () {

$(this).children(".sub").stop().slideDown(200);

})

$("nav >ul >li").mouseleave(function () {

$(".sub").stop().slideUp(200);

})

let i = 0;

function slide() {

if (i < 2) {

i++;

} else {

i = 0;

}

$(".slide>ul").animate({ marginTop: -400 * i })

}

setInterval(slide, 3000)

$(".notice").show();

$(".gall").hide();

$(".list li").click(function () {

let t = $(this).index()

// alert(t);

$(".list li").removeClass("on");

$(this).addClass('on');

if (t === 0) {

$(".notice").show();

$(".gall").hide();

} else if(t===1){

$(".notice").hide();

$(".gall").show();

}

return false;

})

$(".pop").click(function(){

$(".popcon").show();

})

$(".close").click(function(){

$(".popcon").hide();

})

@charset "utf-8";

margin: 0;

padding: 0;

box-sizing: border-box;

}

li{

list-style: none;

}

text-decoration: none;

color: inherit;

}

body{

background: #ffffff;

color: #333333;

}

button{

cursor: pointer;

border: none;

}

.hidden{

display: none;

}

.wrap{

width: 100%;

height: 950px;

position: relative;

}

.contents{

width: 100%;

display: flex;

}

header{

width: 200px;

height: 850px;

}

header img{

width: 200px;

height: 100px;

}

nav{

text-align: center;

}

nav >ul >li >a{

display: block;

width: 200px;

padding: 10px;

border: 1px solid blue;

background: skyblue;

color:white ;

}

nav > ul > li:hover >a{

background: blue;

}

.sub{

display: none;

}

.sub> li>a{

display: block;

padding: 10px;

background: blue;

color: white;

border-bottom: 1px solid white;

}

.sub >li >a:hover{

background: yellowgreen;

}

.content{

width: calc(100% - 200px);

height: 850px;

}

.slide{

width: 100%;

height: 400px;

overflow: hidden;

}

.slide >ul{

width: 100%;

height: 1200px;

}

.slide li{

width: 100%;

height: 400px;

position: relative;

}

.slide .s1{

background: url(/d_1/images/s1.jpg)no-repeat center/cover;

}

.slide .s2{

background: url(/d_1/images/s2.avif)no-repeat center/cover;

}

.slide .s3{

background: url(/d_1/images/s3.jpg)no-repeat center/cover;

}

.slide h2{

text-align: center;

position: absolute;

bottom: 0;

left: 20px;

width: 200px;

background: white;

border-radius: 20px;

padding: 10px;

}

.slide a{

display: block;

width: 100%;

height: 100%;

}

.slide li:hover{

opacity: 0.8;

}

.fix{

text-align: center;

position: fixed;

top:10px;

right: 10px;

width: 150px;

height: 150px;

background: #ffffff;

}

.fix ul li{

padding: 10px;

color: blue;

border-bottom: 1px dashed blue;

}

.fix ul li a{

display: block;

}

.fix ul li a:hover{

color: red;

font-weight: bold;

}

.go{

width: 100%;

height: 200px;

display: flex;

}

.go h3{

writing-mode: vertical-rl;

padding: 40px 10px;

background: skyblue;

color: white;

}

.go p{

padding-top: 80px;

text-align: center;

justify-content: center;

}

.go img{

text-align: center;

width: 130px;

height: 200px;

}

.notice_gall{

width: 100%;

height: 250px;

}

.list {

display: flex;

}

.list li{

font-size: 20px;

font-weight: bold;

padding: 8px;

border: 1px blue solid;

}

.on{

background: blue;

color: aliceblue;

}

.notice{

background: skyblue;

width: 800px;

padding-top: 8px;

font-size: 20px;

color: #ffffff;

display: none;

}

.notice li{

position: relative;

padding: 17px;

border-bottom: 2px dashed palevioletred;

}

.notice p{

width: 300px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

.notice span{

position: absolute;

top:14px;

right: 0;

}

.gall{

display: flex;

}

.gall img{

width: 300px;

height: 200px;

margin-left: 80px;

}

.gall img a{

display: block;

}

.gall img:hover{

opacity: 0.5;

}

footer{

width: 100%;

height: 100px;

display: flex;

}

footer >.flogo{

width: 200px;

height: 100%;

}

footer img{

width: 200px;

height: 100px;

}

footer >.copy{

flex: 1;

text-align: justify;

padding-top: 30px;

}

footer > .sns{

width: 200px;

height: 100%;

}

.sns ul{

display: flex;

}

.sns img{

width: 50px;

margin-left: 20px;

}

.popcon{

position: absolute;

top:50%;

left:50%;

transform: translate(-50%, -50%);

width: 600px;

height: 450px;

padding: 50px;

z-index: 9999;

border: 1px dashed white;

background: rgba(0,0,0,0.5);

border-radius: 20px;

text-align: center;

display: none;

}

.popcon h1{

color: aliceblue;

}

.popcon p{

color: #ffffff;

text-align: center;

padding-top: 50px;

font-size: 20px;

}

.close{

text-align: end;

color: aliceblue;

padding-top: 50px;

}

.close button{

padding: 20px;

background: rgb(27, 18, 187);

color: white;

font-size: 20px;

border-radius: 20px;

}

.close button:hover{

background: palevioletred;

}

웹디자인개발 기능사 D-8일 실전연습1

bumychoi — Wed, 3 Sep 2025 14:32:41 +0900

<!DOCTYPE html>

<head>

<title>조은여행사</title>

</head>

<body>

<nav>

<ul>

</ul>

</li>

</ul>

</li>

<li><a href="#">여행준비물</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</nav>

</header>

<ul>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</section>

</li>

<li>

</li>

</ul>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</ul>

</aside>

<ul>

</ul>

</aside>

<ul>

</ul>

</aside>

</div>

</div>

<ul>

</ul>

</div>

Lorem ipsum dolor sit amet consectetur© adipisicing elit. Laboriosam, ipsa reiciendis provident

doloremque officiis repellendus, maxime id. Vero consectetur asperiores amet vel alias illum odit

modi?

</div>

</footer>

</div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, odit eius porro rem fuga dignissimos quos

facere, tempora vero quo cupiditate laboriosam, reiciendis non quis molestias sed voluptatem atque tempore!

</p>

</div>

</body>

</html>

$(function(){

$("nav >ul >li").mouseenter(function(){

$(this).children(".sub").stop().slideDown();

})

$("nav > ul >li").mouseleave(function(){

$(".sub").stop().slideUp();

})

let i =0 ;

function slide(){

if(i<2){

i++;

} else{

i=0;

}

$(".slide >ul").stop().animate({marginTop:-300 * i})

}

$(".gall").hide();

setInterval(slide,3000)

$(".list >li").click(function(){

let t= $(this).index();

// alert(t);

$(".list > li").removeClass("on");

$(this).addClass("on");

if(t===0){

$(".gall").hide();

$(".notice").show();

}

if(t===1){

$(".notice").hide();

$(".gall").show();

}

return false;

})

$(".pop").click(function(){

$(".popcon").show();

})

$(".close").click(function(){

$(".popcon").hide();

})

@charset "utf-8";

margin: 0;

padding: 0;

box-sizing: border-box;

}

li{

list-style: none;

}

text-decoration: none;

color: inherit;

}

body{

background: #ffffff;

color: #333333;

}

button{

cursor: pointer;

border: none;

}

.hidden{

display: none;

}

.wrap{

width: 1200px;

height: 700px;

margin: auto;

position: relative;

}

header{

width: 100%;

height: 100px;

display: flex;

position: relative;

}

h1{

width: 200px;

}

h1 img{

width: 200px;

height: 100px;

}

nav> ul {

display: flex;

}

nav{

text-align: center;

position: absolute;

top:50px;

right: 10px;

z-index: 3;

}

nav >ul >li >a{

display: block;

padding: 10px 30px;

background: blueviolet;

color: #ffffff;

border: 1px solid red;

}

nav > ul >li:hover >a{

background: red;

color: #ffffff;

}

.sub{

padding-top: 20px;

background: skyblue;

display: none;

}

.sub >li {

border-bottom: 1px dashed white;

padding-bottom: 10px;

}

.sub li> a{

display: block;

color: white;

}

.sub li>a:hover{

background: white;

color: blue;

}

.slide{

width: 100%;

height: 300px;

overflow: hidden;

}

.slide >ul{

width: 100%;

height: 900px;

}

.slide li{

width: 100%;

height: 300px;

position: relative;

}

.slide .s1{

background: url(/images/s1.jpg)no-repeat center/cover;

}

.slide .s2{

background: url(/images/s2.jpg)no-repeat center/cover;

}

.slide .s3{

background: url(/images/s3.jpg)no-repeat center/cover;

}

.slide h2{

text-align: center;

position: absolute;

bottom: 10px;

right: 20px;

width: 200px;

background: white;

color: palevioletred;

border-radius: 20px;

opacity: 0.6;

}

.slide li a{

display: block;

width: 100%;

height: 100%;

}

.contents{

width: 100%;

height: 200px;

display: flex;

}

.contents > *{

width: calc(100% / 3);

}

.list{

display: flex;

}

.list li{

border: 1px solid blue;

padding: 2px 5px;

}

.on{

background: blue;

color: #ffffff;

}

.notice{

background: skyblue;

height: 170px;

}

.notice li{

position: relative;

border-bottom: 1px dashed white;

color: white;

}

.notice p{

width: 250px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

.notice span{

position: absolute;

top:0;

right: 15px;

}

.gall img{

width: 100px;

height: 80px;

}

.benner h3{

text-align: center;

width: 200px;

padding: 10px;

background: palevioletred;

border-radius: 20px 20px 0 0;

color: aliceblue;

}

.benner ul{

text-align: center;

background: palevioletred;

height: 150px;

}

.benner li{

padding-top: 20px;

margin-left: 80px;

text-align: center;

width: 200px;

background: white;

border-bottom: 1px solid blue;

}

.benner li a:hover{

color: palevioletred;

width: 100%;

}

.gall{

display: flex;

gap:10px;

padding-top: 50px;

}

.gall a{

display: block;

}

.gall a:hover{

opacity: 0.5;

}

footer{

width: 100%;

height: 100px;

display: flex;

}

.go h3{

text-align: center;

width: 200px;

padding: 10px;

background: rgb(67, 161, 211);

border-radius: 20px 20px 0 0;

color: aliceblue;

}

.go ul{

text-align: center;

background: rgb(67, 161, 211);

height: 150px;

display: flex;

padding-left: 20px;

padding-top: 20px;

}

.go img{

width: 100px;

height: 80px;

padding: 15px;

}

.go a{

display: block;

}

.flogo{

width: 300px;

height: 100%;

}

.fmenu_copy > *{

height: 50px;

}

.fmenu_copy{

flex: 1;

}

.fmenu ul{

display: flex;

}

.fmenu li{

margin-left: 5px;

padding: 0 30px;

border-left: 2px solid blue;

}

.fmenu li:hover{

color: red;

}

.copy{

text-align: end;

}

.popcon{

position: absolute;

top:50%;

left:50%;

transform: translate(-50%, -50%);

width: 350px;

height: 400px;

background: rgba(0,0,0,0.8);

border: 2px dashed white;

z-index: 999;

display: none;

}

.popcon h1{

text-align:center;

color: #ffffff;

}

.popcon p{

padding-top: 20px;

text-align: justify;

color: aliceblue;

}

.close{

text-align: end;

padding-top: 100px;

}

.close button{

padding: 20px;

color: white;

background: blue;

border-radius: 20px;

font-size: 20px;

}

.close button:hover{

background: red;

}

웹디자인개발 기능사 D-9일 실전연습2

bumychoi — Tue, 2 Sep 2025 13:42:48 +0900

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<nav>

<ul>

</ul>

</li>

<li><a href="#">긴팔티셔츠</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</nav>

</header>

<ul>

</li>

</li>

</li>

</ul>

</section>

<ul>

</a>

</li>

</a></li>

</a></li>

</a></li>

</a></li>

</ul>

</aside>

<ul>

</ul>

</aside>

<ul>

</ul>

</aside>

</div>

Lorem ipsum dolor, sit amet consectetur © adipisicing elit. Iure quisquam corrupti ducimus,

facere

inventore et repellat exercitationem.

</aside>

<ul>

</ul>

</div>

</select>

</div>

</footer>

</div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum minima dolorum, tempore accusamus neque

ipsum aliquam illo quidem eaque consequuntur quos, autem delectus veritatis voluptates culpa praesentium

dolor, modi impedit!</p>

</div>

</body>

</html>

$(function(){

$("nav ul li").mouseenter(function(){

$(this).children(".sub").stop().slideDown();

})

$("nav ul li").mouseleave(function(){

$(".sub").stop().slideUp();

})

let i=0;

function slide(){

if(i<2){

i++;

}else{

i=0;

}

$(".slide ul").stop().animate({marginLeft:-800* i})

}

setInterval(slide,3000)

$(".pop").click(function(){

$(".popcon").show();

})

$(".close").click(function(){

$(".popcon").hide();

})

@charset "utf-8";

margin: 0;

padding: 0;

box-sizing: border-box;

}

li{

list-style: none;

}

text-decoration: none;

color: inherit;

}

body{

background: #ffffff;

color: #333333;

}

button{

cursor: pointer;

border: none;

}

.hidden{

display: none;

}

.wrap{

width: 1000px;

height: 650px;

display: flex;

position: relative;

}

header{

width: 200px;

height: 100%;

}

header img{

width: 200px;

height: 100px;

}

header nav{

text-align: center;

}

nav ul li{

width: 200px;

height: 50px;

background: blueviolet;

color: white;

font-weight: bold;

border-bottom: 1px solid white;

padding-top: 10px;

position: relative;

}

nav >ul >li>a {

display: block;

}

nav >ul >li:hover >a{

background: palevioletred;

height: 100%;

}

.sub{

position: absolute;

top:0;

left: 210px;

z-index: 2;

display: none;

}

.sub li >a:hover{

color: red;

height: 100%;

}

.contents{

width: 800px;

height: 6500px;

}

.slide{

width: 800px;

height: 350px;

overflow: hidden;

}

.slide >ul{

width: 2400px;

height: 100%;

display: flex;

}

.slide ul >li{

width: 800px;

height: 100%;

position: relative;

}

.slide a{

display: block;

width: 100%;

height: 100%;

}

.slide .s1{

background: url(/images/s1.jpg)no-repeat center/cover;

}

.slide .s2{

background: url(/images/s2.jpg)no-repeat center/cover;

}

.slide .s3{

background: url(/images/s3.jpg)no-repeat center/cover;

}

.slide h3{

text-align: center;

position: absolute;

bottom: 0;

right: 0;

width: 200px;

background: yellow;

opacity: 0.5;

color: #0b0ec4;

padding: 10px;

border-radius: 30px;

}

.content{

height: 200px;

width: 800px;

/* background: yellow; */

display: flex;

}

.content > *{

width: calc(100% / 3);

}

.notice h2{

text-align: center;

padding: 5px;

background: skyblue;

width:150px;

color: #ffffff;

border-radius: 30px 30px 0 0;

}

.notice ul{

background: skyblue;

}

.notice li{

position: relative;

border-bottom: 1px dashed white;

padding-bottom: 8px;

}

.notice p{

width: 150px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

color: #ffffff;

}

.notice span{

position: absolute;

top:0;

right: 5px;

color: #ffffff;

}

.gall h2{

text-align: center;

padding: 5px;

background: rgb(177, 10, 189);

width:150px;

color: #ffffff;

border-radius: 30px 30px 0 0;

}

.gall ul{

/* background: rgb(177, 10, 189); */

display: flex;

}

.gall img{

width: 80px;

height: 80px;

margin-top: 50px;

margin-left: 5px;

}

.gall a{

display: block;

width: 100%;

height: 100%;

}

.gall li:hover{

opacity: 0.5;

}

.go h2{

text-align: center;

padding: 5px;

background: rgb(64, 30, 234);

width:150px;

color: #ffffff;

border-radius: 30px 30px 0 0;

}

.go ul{

background: rgb(64, 30, 234);

padding-top: 20px;

padding-bottom: 40px;

}

.go li{

text-align: center;

color: white;

padding: 5px;

}

.go a:hover{

color: red;

}

footer{

height: 100px;

display: flex;

}

footer .copy{

flex: 1;

text-align: end;

padding-top: 50px;

}

.sns_fem{

width: 200px;

}

.sns ul{

display: flex;

}

.sns li{

gap: 5px;

}

.sns img{

width: 50px;

height: 30px;

margin-top: 5px;

margin-left: 5px;

}

.sns_fem > *{

height: 50px;

}

select{

margin-left: 30px;

width: 100px;

height: 20px;

}

.popcon{

width: 350px;

height: 400px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background: rgba(0,0,0,0.5);

padding: 50px;

border-radius: 30px;

border: 2px dashed white;

display: none;

}

.popcon h1{

text-align: center;

color: white;

}

.popcon p{

color: antiquewhite;

}

.popcon .close{

text-align: end;

margin-top: 50px;

}

.popcon button{

padding: 15px;

background: #0b0ec4;

color: #ffffff;

border-radius: 20px;

}

.popcon button:hover{

background: red;

}

웹디자인개발 기능사 D-9일 실전연습1

bumychoi — Tue, 2 Sep 2025 10:51:09 +0900

<!DOCTYPE html>

<head>

</head>

<body>

<nav>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</li>

<li><a href="#">투자자정보</a>

</ul>

</li>

</ul>

</nav>

</header>

<ul>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</section>

</ul>

</a>

</li>

</a></li>

</a></li>

</ul>

</ul>

</aside>

<ul>

</ul>

</aside>

<ul>

</ul>

</aside>

</article>

</div>

<ul>

</ul>

</div>

Lorem ipsum, dolor sit amet

atque sequi possimus alias amet, quod dolorum, ©adipisci cornatur eum,

tempore cumque distinctio perferendis est.

</div>

</footer>

</div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto eum commodi mollitia ratione. Similique

reiciendis ipsam consectetur quos dolorem sit, nam labore alias deserunt iusto, nulla harum. Harum, suscipit

ratione.</p>

</div>

</body>

</html>

@charset "utf-8";

margin: 0;

padding: 0;

box-sizing: border-box;

}

li{

list-style: none;

}

text-decoration: none;

color: inherit;

}

body{

background: #ffffff;

color: #333333;

}

button{

cursor: pointer;

border: none;

}

.hidden{

display: none;

}

.wrap{

width: 1000px;

height: 650px;

display: flex;

position: relative;

}

header{

text-align: center;

width: 200px;

height: 100%;

}

header img{

width: 190px;

height: 50px;

object-fit: cover;

}

nav >ul > li{

padding: 8px;

background: blue;

color: white;

border: 1px solid white;

}

nav > ul >li >a{

display: block;

}

nav >ul >li:hover >a{

background: skyblue;

color: white;

}

.sub{

background: white;

color: blue;

display: none;

}

.sub >li{

border-bottom: 1px dashed blue;

}

.sub> li> a:hover{

background: skyblue;

color: white;

padding: 0 10px;

}

.contents{

width: 800px;

height: 100%;

}

.slide{

width: 100%;

height: 350px;

}

.slide >ul{

position: relative;

/* display: none; */

}

.slide ul >li{

height: 350px;

width: 100%;

position: absolute;

top: 0;

left: 0;

}

.slide .s1{

background: url(/images/s1.jpg)no-repeat center/cover;

}

.slide .s2{

background: url(/images/s2.jpg)no-repeat center/cover;

}

.slide .s3{

background: url(/images/s3.jpg)no-repeat center/cover;

}

.slide h2{

position: absolute;

bottom: 0;

right: 0;

padding: 20px;

background: skyblue;

opacity: 0.7;

border-radius: 10px 10px;

color: bisque;

}

.content{

width: 100%;

height: 200px;

display: flex;

}

.lists{

display: flex;

}

.lists >li{

padding: 5px;

border: 1px solid blue;

}

.on{

background: blue;

color: #ffffff;

}

.notics >li{

border-bottom: 1px dashed blue;

position: relative;

}

.notics p{

width: 150px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

padding-bottom: 10px;

}

.notics span{

position: absolute;

top:5px;

right: 10px;

}

.gall{

display: flex;

}

.gall img{

width: 80px;

height: 80px;

object-fit: cover;

margin-left: 5px;

margin-top: 30px;

}

.gall img a{

display: block;

width: 100%;

}

.gall img:hover{

opacity: 0.5;

}

.content > *{

width: calc(100% / 3);

}

.benner ul li{

width: 100%;

height:200px;

position: relative;

}

.benner .b1{

background: url(/images/s1.jpg)no-repeat center/cover;

}

.benner span{

position: absolute;

top:50%;

left: 50%;

transform: translate(-50%,-50%);

color: rgb(72, 37, 161);

background: rgb(226, 226, 212);

padding: 5px;

border-radius: 20px;

opacity: 0.7;

}

.benner ul li{

display: block;

width: 100%;

}

footer{

height: 120px;

width: 100%;

display: flex;

}

.go ul li{

width: 100%;

height:200px;

position: relative;

}

.go .b2{

background: url(/images/s3.jpg)no-repeat center/cover;

}

.go span{

position: absolute;

top:50%;

left: 50%;

transform: translate(-50%,-50%);

color: rgb(72, 37, 161);

background: rgb(226, 226, 212);

padding: 5px;

border-radius: 20px;

opacity: 0.7;

}

.flogo{

width: 200px;

height: 100%;

}

.flogo img{

width: 180px;

height: 150px;

/* object-fit: cover; */

}

.flist{

flex: 1;

}

.fmenu{

height: 60px;

}

.fmenu ul{

display: flex;

gap: 10px;

}

.fmenu li{

border-right: 1px solid blue;

padding-right: 20px;

}

.fmenu li> a:hover{

font-weight: bold;

color: red;

}

.copy{

height: 60px;

}

.popcon{

position: absolute;

top:50%;

left: 50%;

transform: translate(-50%,-50%);

width: 350px;

height: 400px;

background: rgba(0,0,0,0.5);

border: 1px dashed red;

display: none;

}

.popcon h1{

text-align: center;

color: white;

}

.popcon p{

text-align: justify;

color: antiquewhite;

}

.close{

text-align: end;

margin-top: 150px;

}

.close button{

padding: 15px;

color: #ffffff;

background: blue;

border-radius: 20px;

font-size: 20px;

}

.close button:hover{

background: red;

}

$(function () {

$("nav >ul > li").mouseenter(function () {

$(this).children(".sub").stop().slideDown();

})

$("nav >ul >li").mouseleave(function () {

$(".sub").stop().slideUp();

})

$(".slide >ul li").fadeOut();

$(".slide >ul li").eq(0).fadeIn();

let i = 0;

function slide() {

if (i < 2) {

i++;

} else {

i = 0

}

$(".slide >ul li").stop().fadeOut();

$(".slide >ul li").eq(i).stop().fadeIn();

}

setInterval(slide, 3000)

$(".gall").hide();

$(".lists >li").click(function () {

let t = $(this).index();

$(".lists > li").removeClass("on");

$(this).addClass("on");

if(t===0){

$(".notics").show();

$(".gall").hide();

}else if(t===1){

$(".notics").hide();

$(".gall").show();

}

return false;

})

$(".pop").click(function(){

$(".popcon").show();

})

$(".close").click(function(){

$(".popcon").hide();

})

웹디자인개발 기능사 D-10일 실전연습2

bumychoi — Mon, 1 Sep 2025 16:16:31 +0900

<!DOCTYPE html>

<head>

</head>

<body>

<nav>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</nav>

</div>

</header>

<ul>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</section>

<ul>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</aside>

<ul>

</a></li>

</a></li>

</a></li>

</ul>

</aside>

</a>

</aside>

</article>

ratione eligendi sint corporis fugiat? Aliquam nesciunt impedit nemo repellendus ducimus est,

numquam

deleniti veniam. Quas!</p>

</div>

<ul>

</ul>

</div>

</select>

</div>

</footer>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut dolores debitis sunt aspernatur explicabo,

adipisci est aliquam perspiciatis earum expedita quis odit corporis nemo, tempore suscipit reprehenderit

ratione dicta nesciunt!</p>

</div>

</body>

</html>

$(function(){

$('nav >ul >li').mouseenter(function(){

$(".sub").stop().slideDown();

$(".bg").stop().slideDown();

})

$("nav>ul >li").mouseleave(function(){

$(".sub").stop().slideUp();

$(".bg").stop().slideUp();

})

let i=0;

function slide(){

if(i<2){

i++;

}else{

i=0;

}

$(".slide ul").stop().animate({marginLeft:-100 * i +"%"})

}

setInterval(slide,3000)

$(".pop").click(function(){

$(".popcon").show();

})

$(".close").click(function(){

$(".popcon").hide();

})

@charset "uft-8";

margin: 0;

padding: 0;

box-sizing: border-box;

}

li{

list-style: none;

}

text-decoration: none;

color: inherit;

}

body{

background: #ffffff;

color: #333333;

}

button{

cursor: pointer;

border: none;

}

.wrap{

width: 100%;

height: 100%;

}

header{

display: flex;

height: 150px;

}

nav{

z-index: 7;

}

nav img{

width: 200px;

height: 150px;

}

nav >ul {

display: flex;

position: absolute;

right: 0;

top:80px;

}

nav >ul >li{

padding: 20px;

}

nav >ul >li >a{

width: 100px;

font-size: 25px;

padding: 5px 20px;

border: 1px solid blue;

}

nav > ul >li:hover >a{

background: blue;

color: #ffffff;

}

.sub{

display: none;

}

.sub >li{

text-align: center;

padding-top: 20px;

font-size: 20px;

font-weight: bold;

}

.sub > li >a{

display: block;

}

.sub >li > a:hover{

color: red;

}

.bg{

background: skyblue;

width: 100%;

height: 200px;

position: absolute;

top:150px;

opacity: 0.5;

z-index: 4;

display: none;

}

header h1{

width: 200px;

}

.slide{

height: 400px;

width: 100%;

overflow: hidden;

/* background: palevioletred; */

}

.slide >ul{

width: 300%;

height: 400px;

display: flex;

}

.slide li{

width: calc(300% / 3);

height: 100%;

position: relative;

}

.slide .s1{

background: url(/images/s1.jpg)no-repeat center/cover;

}

.slide .s2{

background: url(/images/s2.jpg)no-repeat center/cover;

}

.slide .s3{

background: url(/images/s3.jpg)no-repeat center/cover;

}

.slide h2{

text-align: center;

position: absolute;

bottom: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 150px;

padding: 10px;

background: yellowgreen;

border-radius: 20px;

}

.slide li:hover{

opacity: 0.8;

}

.slide a{

display: block;

width: 100%;

height: 100%;

}

.slide li:hover{

opacity: 0.5;

}

.contents{

display: flex;

}

.contents >*{

width: calc(100% / 3);

height: 300px;

}

.notice h3{

text-align: center;

width: 200px;

background: blue;

border-radius: 20px;

color: #ffffff;

padding: 10px;

}

.notice li{

padding: 8px;

border-bottom: 1px dashed red;

position: relative;

}

.notice p{

width: 150px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

.notice span{

position: absolute;

top:5px;

right: 10px;

}

.gall h3{

text-align: center;

width: 200px;

background: rgb(229, 12, 197);

border-radius: 20px;

color: #ffffff;

padding: 10px;

}

.gall ul{

display: flex;

}

.gall img{

width: 100px;

height: 80px;

margin-left: 20px;

gap:8px;

margin-top: 50px;

}

.gall span{

padding-left: 50px;

color: blue;

font-weight: bold;

}

.go{

background: url(/images/s2.jpg) no-repeat center/cover;

position: relative;

}

.go h3{

text-align: center;

position: absolute;

top:50%;

left: 50%;

transform: translate(-50%, -50%);

width: 150px;

background: yellowgreen;

border-radius: 20px;

padding: 10px;

color: #ffffff;

}

.go a{

display: block;

width: 100%;

height: 100%;

}

footer{

display: flex;

height: 200px;

}

.copy{

flex: 1;

background: blue;

}

.copy p{

margin-top: 50px;

text-align:start;

font-size: 20px;

color:white;

}

.fmenu_site{

width: 250px;

}

.fmenu{

height: 150px;

}

.fmenu ul{

display: flex;

margin-left: 20px;

gap: 8px;

}

.fmenu li{

border-right: 2px solid blue;

padding-right: 10px;

}

.fmenu li a:hover{

color: red;

font-weight: bold;

}

.site{

height: 100px;

}

select{

width: 150px;

height: 20px;

}

.popcon{

position: absolute;

top:50%;

left: 50%;

transform: translate(-50%, -50%);

width: 350px;

height: 450px;

background: rgba(0,0,0,0.5);

z-index: 99;

padding: 50px;

border: 2px white solid;

border-radius: 20px;

display: none;

}

.popcon h1{

text-align: center;

color: #ffffff;

}

.popcon p{

text-align: justify;

color: beige;

}

.close{

text-align: end;

margin-top: 100px;

}

.close >button{

padding: 20px;

font-size: 20px;

background: blue;

color: #ffffff;

border-radius: 20px;

}

.close > button:hover{

background: red;

}

웹디자인개발 기능사 D-10일 실전연습1

bumychoi — Mon, 1 Sep 2025 12:00:27 +0900

<!DOCTYPE html>

<head>

</head>

<body>

<nav>

<ul>

</ul>

</li>

<li><a href="#">이벤트정보</a>

<li><a href="#">현장이벤트</a></li>

<li><a href="#">온라인이베트</a></li>

<li><a href="#">이벤트예약</a></li>

</ul>

</li>

<li><a href="#">프로그램안내</a></li>

<li><a href="#">온라인예약</a></li>

<li><a href="#">단제예약상담</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</nav>

</div>

</header>

<ul>

</li>

</li>

</li>

</ul>

</section>

</ul>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</ul>

</aside>

<ul>

</a></li>

</a></li>

</a></li>

</a></li>

</ul>

</aside>

<ul>

</ul>

</aside>

</div>

</aside>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus vero perspiciatis minus autem

</aside>

<ul>

</ul>

</aside>

</footer>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo, iste nemo ea repellendus cumque

consequuntur accusamus nostrum adipisci repellat mollitia, harum incidunt natus magni aut, perspiciatis

minus ad sint fugit.</p>

</div>

</body>

</html>

$(function () {

$("nav>ul>li").mouseenter(function () {

$(".sub").stop().slideDown();

$(".bg").stop().slideDown();

})

$("nav> ul >li").mouseleave(function () {

$(".sub").stop().slideUp();

$(".bg").stop().slideUp();

})

let i = 0;

function slide() {

if (i < 2) {

i++;

} else {

i = 0;

}

$(".slide >ul").stop().animate({ marginTop: -400 * i })

}

setInterval(slide, 3000);

$('.gall').show();

$('.notice').hide();

$(".list >li").click(function () {

let t = $(this).index();

$(".list > li").removeClass("on");

$(this).addClass("on");

if (t === 0) {

$(".gall").hide();

$(".notice").show();

} else if (t === 1) {

$('.gall').show();

$('.notice').hide();

}

return false;

})

$(".pop").click(function(){

$(".popcon").show();

})

$(".close").click(function(){

$(".popcon").hide();

})

@charset "utf-8";

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

li {

list-style: none;

}

a {

text-decoration: none;

color: inherit;

}

body {

background: #ffffff;

color: #333333;

}

.hidden {

display: none;

}

button {

border: none;

}

.wrap {

width: 100%;

height: 100%;

position: relative;

}

header {

height: 150px;

width: 100%;

display: flex;

}

header h1 {

width: 200px;

}

header img {

width: 180px;

height: 120px;

object-fit: contain;

}

nav {

width: calc(100% - 200px);

position: relative;

z-index: 5;

}

nav>ul {

display: flex;

position: absolute;

top: 40px;

right: 0;

}

nav>ul>li {

display: block;

padding: 20px;

}

nav>ul>li>a {

display: block;

background: blue;

color: #ffffff;

padding: 5px 20px;

}

nav>ul>li:hover>a {

background: yellowgreen;

color: blue;

}

.sub {

padding-top: 20px;

z-index: 8;

display: none;

}

.sub>li {

padding: 10px;

z-index: 5;

border-bottom: 1px dashed red;

text-align: center;

}

.sub>li>a {

display: block;

color: blue;

}

.sub>li>a:hover {

background: red;

color: white;

}

.bg {

position: absolute;

width: 550px;

height: 150px;

top: 90px;

right: 30px;

background: skyblue;

z-index: 4;

display: none;

}

.slide {

height: 400px;

overflow: hidden;

}

.slide li a {

display: block;

width: 100%;

height: 100%;

}

.slide>ul {

width: 100%;

height: 1200px;

}

.slide>ul>li {

height: 400px;

position: relative;

}

.slide .s1 {

background: url(/images/s1.jpg)no-repeat center/cover;

}

.slide .s2 {

background: url(/images/s2.jpg)no-repeat center/cover;

}

.slide .s3 {

background: url(/images/s3.jpg)no-repeat center/cover;

}

.slide h3 {

text-align: center;

color: white;

background: plum;

width: 200px;

padding: 20px;

border-radius: 20px;

position: absolute;

bottom: 20px;

left: 50px;

}

.list {

display: flex;

}

.list li {

padding: 2px 5px;

border: 1px blueviolet solid;

}

.list li.on {

background: blueviolet;

color: white;

}

.notice li {

position: relative;

padding-top: 10px;

border-bottom: 1px red dashed;

}

.notice p {

width: 150px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

.notice span {

position: absolute;

top: 10px;

right: 15px;

}

.gall {

display: flex;

}

.gall img {

width: 100px;

height: 150px;

margin-top: 40px;

margin-left: 20px;

gap: 10px;

}

.gall span {

padding-left: 30px;

}

.contents {

height: 300px;

width: 100%;

/* background: blueviolet; */

display: flex;

}

.contents>* {

width: calc(100% / 3);

}

.benner h4{

width: 200px;

text-align: center;

background: rgb(11, 21, 158);

color: #ffffff;

padding: 10px;

border-radius: 20px;

}

.benner p{

text-align: center;

width: 200px;

padding: 10px;

background: skyblue;

border-bottom: 1px red dashed;

}

.go h4{

width: 200px;

text-align: center;

background: yellowgreen;

color: #ffffff;

padding: 10px;

border-radius: 20px;

}

.go img {

width: 100px;

height: 120px;

}

.go ul {

display: flex;

margin-top: 50px;

margin-left: 50px;

gap: 30px;

}

footer {

height: 100px;

width: 100%;

display: flex;

}

footer>.flogo {

width: 200px;

}

.flogo img{

width: 180px;

height: 80px;

}

footer>.sns {

width: 200px;

}

.sns img{

width: 50px;

height: 50px;

margin-top: 50px;

gap: 5px;

}

.sns ul{

display: flex;

}

footer>.copy {

flex: 1;

text-align: center;

align-content: center;

}

.popcon{

position: absolute;

width: 500px;

height: 350px;

background: rgba(0,0,0,0.5);

border: 2px solid white;

top:50%;

left: 50%;

transform: translate(-50%,-50%);

display: none;

}

.popcon h1{

text-align: center;

color: white;

}

.popcon p{

margin-top: 100px;

text-align: start;

color: antiquewhite;

}

.close{

margin-top: 30px;

text-align: end;

}

.close button{

padding: 20px;

border-radius: 10px;

background: blue;

color: #ffffff;

font-size: 20px;

}

.close button:hover{

background: red;

}