2022
0531
HAPAGO
2022. 6. 2. 09:33
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<style>
body{
background: url(images/bg1.jpg);
}
h1 {
margin-top:150px; /* 상단 마진 */
font-size:80px; /* 글자 크기 */
text-align: center; /* 가운데 정렬 */
}
</style>
</head>
<body>
<h1>Do it!</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<style>
#container{
width:1100px;
margin:50px auto;
}
.box{
float:left;
border:1px solid #222;
width:300px;
height:300px;
margin:20px;
background:url('images/bg4.jpg') no-repeat left top;
}
#bg1 { background-size:auto;} /* 원래 배경 이미지 크기로 표시 */
#bg2 { background-size:200px;} /* 너비는 200px, 높이는 자동 계산 */
#bg3 { background-size:50%;} /* 배경 이미지 너비는 요소 너비의 50%, 높이는 자동 계산 */
#bg4 { background-size:100% 100%;} /* 배경 이미지 너비와 높이는 요소 너비의 100%, 요소 높이의 100% */
#bg5 { background-size:contain;} /* 요소 안에 배경 이미지가 다 보이도록 표시 */
#bg6 { background-size:cover;} /* 요소를 완전히 덮도록 배경 이미지 표시 */
</style>
</head>
<body>
<div id="container">
<div class="box" id="bg1"></div>
<div class="box" id="bg2"></div>
<div class="box" id="bg3"></div>
<div class="box" id="bg4"></div>
<div class="box" id="bg5"></div>
<div class="box" id="bg6"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<style>
body {
background-image:url('images/bg2.png'); /* 문서 전체 배경 이미지 */
background-repeat:no-repeat; /* 배경 이미지 반복 안 함 */
background-position:right top; /* 배경 이미지를 오른쪽 상단에 위치시킴 */
background-attachment:fixed; /* 배경 이미지 고정 */
}
div {
width:400px;
height:250px;
padding: 20px;
border: 20px solid rgba(204, 204, 204, 0.493);
margin-bottom:20px;
overflow:auto;
background-image:url('images/bg3.png'); /* 텍스트 상자의 배경 이미지 */
background-repeat:no-repeat; /* 배경 이미지 반복 안 함 */
background-position:right top; /* 배경 이미지를 오른쪽 상단에 위치시킴 */
}
#bg1 {
background-origin:padding-box; /* 패딩까지 배경 이미지 표시 */
}
#bg2 {
background-origin:border-box; /* 테두리까지 배경 이미지 표시 */
}
#bg3 {
background-origin:content-box; /* 내용 영역만 배경 이미지 표시 */
}
</style>
</head>
<body>
<div id="bg1">
<h2>바빠 시리즈 </h2>
<h3>-바쁜 학생을 위한 빠른 학습법</h3>
<p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어 있는 바빠 연산법과 ‘손이 기억하는 훈련 프로그램’인 바빠 영어 시리즈가 있습니다.</p>
</div>
<div id="bg2">
<h2>바빠 시리즈 </h2>
<h3>-바쁜 학생을 위한 빠른 학습법</h3>
<p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어 있는 바빠 연산법과 ‘손이 기억하는 훈련 프로그램’인 바빠 영어 시리즈가 있습니다.</p>
</div>
<div id="bg3">
<h2>바빠 시리즈 </h2>
<h3>-바쁜 학생을 위한 빠른 학습법</h3>
<p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어 있는 바빠 연산법과 ‘손이 기억하는 훈련 프로그램’인 바빠 영어 시리즈가 있습니다.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>link 스타일</title>
<style>
.container {
width: 960px;
margin : 0 auto;
}
.navi{
width:960px;
height:60px;
padding-bottom:10px;
border-bottom:2px solid #ccc;
}
.navi ul{
list-style: none;
padding-top:10px;
padding-bottom:5px;
}
.navi ul li {
float:left;
width:150px;
padding:10px;
}
.navi a:link{
display:block;
font-size:14px;
color:rgb(41, 164, 115);
padding: 10px;
text-decoration: none; /* 밑줄 없앰 */
text-align: center;
}
.navi a:hover, .navi a:focus {
background-color:#222; /* 배경 색 */
color:#fff; /* 글자 색 */
}
.navi a:active {
background-color:#f00; /* 배경 색 */
}
h1+p{
background: red;
}
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="#">이용 안내</a></li>
<li><a href="#">객실 소개</a></li>
<li><a href="#">예약 방법 및 요금</a></li>
<li><a href="#">예약하기</a></li>
</ul>
</nav>
</div>
<section>
<h1>형제 노드를 찾아보아요!</h1>
<p> 나는 h1과 같은 레벨이므로 형제입니다.1</p>
<p> 나는 h1과 같은 레벨이므로 형제입니다.2</p>
<p> 나는 h1과 같은 레벨이므로 형제입니다.3</p>
</section>
</body>
</html>
Flexbox Froggy - CSS flexbox 속성 배우기 게임
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
시맨틱태그를 쓰는 연습, 배치(그리드, 플렉스 등등)
자바스크립트 확장자: .js
자바스크립트 변수 var 와 let의 차이
[자바스크립트] 변수 선언 방식 차이: var / let / const (tistory.com)
[자바스크립트] 변수 선언 방식 차이: var / let / const
자바스크립트의 변수 선언은 var로만 가능했으나, ES6(ES2015)부터 let과 const가 추가 되었다. 옛날의 var가 최신의 let(변수), const(상수)로 분리되었다고 생각할 수 있으나, 내부 사정은 상당히 다르
curryyou.tistory.com
