반응형
<!DOCTYPE html>
<html>
<head>
<title>20230203 홍길동</title>
<style>
body{margin:0px;}
a{text-decoration: none; color:black;}
h1,h2,h3{display: inline-block;}
section{width:500px; height:200px;
border-bottom: 1px solid #333;
margin: 0 auto; /*가운데 맞추기*/
}
.info div{width:50%;}
.header{width:100%;}
.header div{width:33%; height: 150px; text-align: center;
/* 정렬방법 1 : 줄높이 */
display:inline-block;
line-height: 150px;
/* 정렬방법 2 : flex */
display: inline-flex;
text-align: center;
align-items: center;
justify-content: center;
}
.header div:nth-child(1){background-color: rebeccapurple;}
.header div:nth-child(2){background-color: green;}
.header div:nth-child(3){background-color: red;}
.header div a{text-decoration: none; color:blue;}
.pop{width:150px; height:300px; background-color: #ccc;
position:absolute; top:0px; right: 0px;display: none;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pop_open").on("click",function(){
//$(".pop").css("display","block");
// 보여주기
$(".pop").show();
//숨기는 경우
//$(".pop").hide();
});
});
</script>
<style>
.menu div{display: inline-block;width:33%; text-align: center;}
.menu div:nth-child(1){color: red;}
.menu div:nth-child(2){color: blue;}
.menu div:nth-child(3){color: #333;}
</style>
</head>
<body>
<div class="menu">
<div>소개</div>
<div>갤러리</div>
<div>상품리스트</div>
</div>
<div class="header">
<div>Home</div>
<div>Profile</div>
<div id="pop_open" class="pop_open">Contact</div>
</div>
<div class="pop">
연락처 : 010-0000-0000<br/>
메일 : <a href="mailto:cs@mail.com">cs@mail.com</a>
</div>
<section>
<iframe width="800" height="200" src="https://www.dongyang.ac.kr/dongyang/index.do"></iframe>
</section>
<section>
<div class="info">
<div class="img"></div>
<div class="desc">안녕하세요. 동양미래대학교 20230203학번
홍길동 입니다.
</div>
</div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>C#</li>
<li></li>
</ul>
</section>
<section>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3165.334130411428!2d126.8654263763785!3d37.50003682793771!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357c9de1fee16d79%3A0x1ab4872c13dbfeaf!2z64-Z7JaR66-4656Y64yA7ZWZ6rWQ!5e0!3m2!1sko!2skr!4v1683872295367!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</section>
</body>
</html>반응형
'웹프로그래밍 기초 > A반소스자료' 카테고리의 다른 글
| scroll 에 애니메이션 넣기 (1) | 2023.05.25 |
|---|---|
| 위치속성과 변형/애니메이션 (0) | 2023.05.11 |
| 디스플레이속성 과 폰트속성 (0) | 2023.04.27 |
| CSS 테스트 (0) | 2023.04.06 |
| 레이아웃 & CSS (0) | 2023.03.30 |
댓글