code_grid3>grid_11_1
줄였을 때도 250px 고정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid_11_1</title>
<!--minmax(200px, auto)-->
<style>
.parent {
border: 5px solid #333;
display: grid;
background-color: #a29bfe;
/* grid-template-columns: repeat(3, 1fr); */
grid-template-columns: 1fr minmax(200px, auto) 1fr;
}
.parent div {
border-radius: 5px;
margin: 10px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
code_grid3>grid_11_2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid_11_2</title>
<!--auto-fill, auto-fit이란 -->
<style>
.parent {
border: 1px solid #333;
width: 700px;
background-color: #a29bfe;
display: grid;
/* grid-template-columns: repeat(3, minmax(250px, 1fr)); */
/* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 10px;
}
.parent div {
border-radius: 5px;
margin: 10px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
code_grid3>grid_11_3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid_11_3</title>
<!--auto-fill, auto-fit 차이-->
<style>
.parent {
border: 1px solid #333;
width: 700px;
background-color: #a29bfe;
display: grid;
/* grid-template-columns: repeat(3, minmax(250px, 1fr)); */
/* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); */
/* autp-fill :최소값 100씩 만들고 자신의 크기 유지 */
/* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */
/* autp-fit :부모의 크기만큼 채워줌 */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.parent div {
border-radius: 5px;
margin: 10px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
project 1 폴더
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>미디어 쿼리 없는 반응형 이미지 갤러리</title>
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div class="face-gallery">
<img src="images/client-01.jpg" alt="face1">
<img src="images/client-02.jpg" alt="face2">
<img src="images/client-03.jpg" alt="face3">
<img src="images/client-04.jpg" alt="face4">
<img src="images/client-05.jpg" alt="face5">
<img src="images/client-06.jpg" alt="face6">
</div>
</body>
</html>
style.css
body{
margin: 0;
font-family: arial;
}
.face-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 5px;
}
.face-gallery img {
min-width: 100%;
}
project 2 폴더
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>베스트 상품 project2 index</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<section class="best-seller">
<h4 class="best-header">Best Sellers</h4>
<div class="items-inner">
<div class="item">
<img src="images/best-item-01.png" alt="상품1">
<div class="name">
Best Home Application 01
<span>10만원</span>
</div>
</div>
<div class="item">
<img src="images/best-item-02.png" alt="상품2">
<div class="name">
Best Home Application 02
<span>10만원</span>
</div>
</div>
<div class="item">
<img src="images/best-item-03.png" alt="상품3">
<div class="name">
Best Home Application 03
<span>10만원</span>
</div>
</div>
<div class="item">
<img src="images/best-item-04.png" alt="상품4">
<div class="name">
Best Home Application 04
<span>10만원</span>
</div>
</div>
<div class="item">
<img src="images/best-item-05.png" alt="상품5">
<div class="name">
Best Home Application 05
<span>10만원</span>
</div>
</div>
<div class="item">
<img src="images/best-item-06.png" alt="상품6">
<div class="name">
Best Home Application 06
<span>10만원</span>
</div>
</div>
<div class="item">
<img src="images/best-item-07.png" alt="상품7">
<div class="name">
Best Home Application 07
<span>10만원</span>
</div>
</div>
<div class="item">
<img src="images/best-item-08.png" alt="상품8">
<div class="name">
Best Home Application 08
<span>10만원</span>
</div>
</div>
<div class="item">
<img src="images/best-item-09.png" alt="상품9">
<div class="name">
Best Home Application 09
<span>10만원</span>
</div>
</div>
<div class="item">
<img src="images/best-item-10.png" alt="상품10">
<div class="name">
Best Home Application 10
<span>10만원</span>
</div>
</div>
<div class="item">
<img src="images/best-item-11.png" alt="상품11">
<div class="name">
Best Home Application 11
<span>10만원</span>
</div>
</div>
<div class="item">
<img src="images/best-item-12.png" alt="상품12">
<div class="name">
Best Home Application 12
<span>10만원</span>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
style.css
body{
margin: 0;
color: #222;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
/* Best Seller */
.container{
height: 100vh;
display: grid;
justify-items: center;
align-items: center;
}
.best-seller{
width: 1230px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
border-radius: 20px;
box-sizing: border-box;
padding: 30px 30px;
}
.best-header{
font-size: 22px;
padding-left: 0px;
}
.items-inner{
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
gap: 15px;
cursor: pointer;
}
.name span{
display: block;
color: royalblue;
}
.item:hover .name{
color: red;
}
/* Tablet */
@media (min-width: 768px) and (max-width:1024px) {
.container{
align-items: start;
}
.best-seller{
width: 100%;
box-shadow: none;
border-radius: 0;
}
.items-inner{
grid-template-columns: 1fr 1fr;
}
}
/* Mobile */
@media (max-width:767px) {
/* 한줄로 변경 */
.container{
align-items: start;
}
.best-seller{
width: 100%;
box-shadow: none;
border-radius: 0;
}
.items-inner{
grid-template-columns: 1fr;
}
}
project 2 ex 폴더 (remind)
이미지 하나로 원하는 아이콘 나타내기
images>num.jpg index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>베스트 상품 project2 index</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<section class="best-seller">
<h4 class="best-header">Best Sellers</h4>
<div class="items-inner">
<div class="item">
<div class="bg one">
<a href="#"></a>
</div>
<div class="name">
Best Home Application 01
<span>10만원</span>
</div>
</div>
<div class="item">
<div class="bg two">
<a href="#"></a>
</div>
<div class="name">
Best Home Application 02
<span>10만원</span>
</div>
</div>
<div class="item">
<div class="bg three">
<a href="#"></a>
</div>
<div class="name">
Best Home Application 03
<span>10만원</span>
</div>
</div>
<div class="item">
<div class="bg four">
<a href="#"></a>
</div>
<div class="name">
Best Home Application 04
<span>10만원</span>
</div>
</div>
<div class="item">
<div class="bg five">
<a href="#"></a>
</div>
<div class="name">
Best Home Application 05
<span>10만원</span>
</div>
</div>
<div class="item">
<div class="bg six">
<a href="#"></a>
</div>
<div class="name">
Best Home Application 06
<span>10만원</span>
</div>
</div>
<div class="item">
<div class="bg seven">
<a href="#"></a>
</div>
<div class="name">
Best Home Application 07
<span>10만원</span>
</div>
</div>
<div class="item">
<div class="bg eight">
<a href="#"></a>
</div>
<div class="name">
Best Home Application 08
<span>10만원</span>
</div>
</div>
<div class="item">
<div class="bg nine">
<a href="#"></a>
</div>
<div class="name">
Best Home Application 09
<span>10만원</span>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
style.css
body{
margin: 0;
color: #222;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
/* Best Seller */
.container{
height: 100vh;
display: grid;
justify-items: center;
align-items: center;
}
.best-seller{
width: 1230px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
border-radius: 20px;
box-sizing: border-box;
padding: 30px 30px;
}
.best-header{
font-size: 22px;
padding-left: 0px;
}
.items-inner{
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
gap: 15px;
cursor: pointer;
}
.bg {
width:60px;
height:100px;
}
.bg>a{
display: block;
background: url(./images/num.jpg);
width: 100%;
height: 100%;
text-indent:-9999px;
}
.one>a{
background-position: -50px 0;
}
.two>a{
background-position: -115px 0;
}
.three>a{
background-position: -173px 0;
}
.four>a{
background-position: -235px 0;
}
.five>a{
background-position: -290px -120px;
}
.six>a{
background-position: -350px -120px;
}
.seven>a{
background-position: -110px -120px;
}
.eight>a{
background-position: -169px -120px;
}
.nine>a{
background-position: -230px -120px;
}
.name span{
display: block;
color: royalblue;
}
.item:hover .name{
color: red;
}
/* Tablet */
@media (min-width: 768px) and (max-width:1024px) {
.container{
align-items: start;
}
.best-seller{
width: 100%;
box-shadow: none;
border-radius: 0;
}
.items-inner{
grid-template-columns: 1fr 1fr;
}
}
/* Mobile */
@media (max-width:767px) {
/* 한줄로 변경 */
.container{
align-items: start;
}
.best-seller{
width: 100%;
box-shadow: none;
border-radius: 0;
}
.items-inner{
grid-template-columns: 1fr;
}
}
project 3 폴더
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
body {
margin: 0;
height: 100vh;
background-color: #eee;
}
.container {
display: grid;
align-content: center;
margin: 20px 20px;
/* height: 100vh; */
}
.heading {
font-style: 42px;
font-weight: 600px;
text-align: center;
padding-bottom: 40px;
margin-bottom: 60px;
}
section div img {
width: 100%;
border-radius: 10px;
}
.focus {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 1fr 1fr;
grid-template-areas:
'item1 item1 item2 item3 item4 item5'
'item1 item1 item6 item7 item8 item9';
gap: 15px;
}
.item1 {
grid-area: item1;
}
.item2 {
grid-area: item2;
}
.item3 {
grid-area: item3;
}
.item4 {
grid-area: item4;
}
.item5 {
grid-area: item5;
}
.item6 {
grid-area: item6;
}
.item7 {
grid-area: item7;
}
.item8 {
grid-area: item8;
}
.item9 {
grid-area: item9;
}
/* tablet */
@media (min-width:768px) and (max-width:1024px) {
.container {
align-content: start;
}
.focus {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
'item1 item1 item2'
'item1 item1 item3'
'item4 item5 item6'
'item7 item8 item9';
padding-bottom: 20px;
}
}
/* mobile */
@media (max-width:767px) {
.container {
align-content: start;
}
.focus {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-template-areas:
'item1 item1'
'item1 item1'
'item2 item3'
'item4 item5'
'item6 item7'
'item8 item9';
padding-bottom: 20px;
}
}
</style>
<body>
<div class="container">
<h1 class="heading">Grid Gallery</h1>
<section class="focus">
<div class="item1"><img src="images/blog-post-01.jpg" alt=""></div>
<div class="item2"><img src="images/blog-post-02.jpg" alt=""></div>
<div class="item3"><img src="images/blog-post-03.jpg" alt=""></div>
<div class="item4"><img src="images/blog-post-04.jpg" alt=""></div>
<div class="item5"><img src="images/blog-post-05.jpg" alt=""></div>
<div class="item6"><img src="images/blog-post-06.jpg" alt=""></div>
<div class="item7"><img src="images/blog-post-07.jpg" alt=""></div>
<div class="item8"><img src="images/blog-post-08.jpg" alt=""></div>
<div class="item9"><img src="images/blog-post-09.jpg" alt=""></div>
</section>
</div>
</body>
</html>
git
$ cd .. : 상위 폴더 이동
$ cd (하위폴더명) : 하위 폴더 이동
$ ls : 디렉토리의 내용을 알고 싶을 때 사용하는 리눅스 명령어
$ ls -al : 디렉토리의 숨겨진 내용까지 알고 싶을 때 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 round_01.html</title>
<script>
/*
자바스크립트 주석 처리와 내부 스크립트 선언(.js)
*/
document.write("Hello java script<br>")
</script>
</head>
<body>
자바스크립트 예제입니다.
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 round_02.html</title>
<script>
function aaa() {
document.write("Hello java script")
}
</script>
</head>
<body>
<div>
<h2>java script ex2</h2>
</div>
<script>
aaa();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 round_03.html</title>
<script>
//함수 설계
function aaa() {
var a = 5;
var b = a + 5;
var c = b + 5;
document.write("b= " + b + "<br>");
document.write("c= " + c + "<br>")
}
</script>
</head>
<body>
<div>
<h2>java script ex3</h2>
</div>
<script>
//함수 호출
aaa();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 round_04.html</title> -->
<script>
let d;
var a = 5, b, c;//전역변수
//a는 선언과 동시에 초기화 b,c는 선언만
//var b;
//var c;
//함수 설계
function aaa() {
var test;//안에 쓰여도 전역변수로 쓰이기 때문에 요즘은 let을 씀
b = a + 5;
document.write("b = " + b + "<br>");
}
function bbb() {
c = b + 5;
document.write("c = " + c + "<br>")
}
</script>
</head>
<body>
<div>
<h2>java script 전역 변수와 함수</h2>
</div>
<script>
//함수 호출
aaa();
bbb();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 round_05.html</title>
<script>
/*
script란 기생언어이다.
shell script란 운영체제에 기생 언어이다(터미널 같은)
자바스크립트 언어는 스크립트 언어라서 브라우저가 있어야
실행할 수 있다.(html)
//자바스크립트도 브라우저 없이 실행 할 수 없을 까
해서 나온게 node.js이다.
(자바로 치면 jvm 실행 환경 같은 거라고 보면 된다.)
*/
function randomValue() {
let date = new Date();
let currentSeconds = date.getSeconds();
let number = (currentSeconds % 5) + 1;
alert("발생된 난수 = " + number);
}
</script>
</head>
<body>
<div>
<h2>자바스크립트 ex5 </h2>
</div>
<script>
randomValue();
</script>
</body>
</html>
'코리아 IT아카데미 > grid·flex·mySql·jsp' 카테고리의 다른 글
8일차 | flex 정렬/wrap, 노드.js설치/사용, 자바스크립트 이론 (0) | 2021.11.24 |
---|---|
7일차 | 자바스크립트 round 6~11, airbnb 클론 코딩 (0) | 2021.11.23 |
4,5일차 | code_grid3 (0) | 2021.11.19 |
3일차 | class_grid2 (0) | 2021.11.19 |
2일차 | code_grid (0) | 2021.11.19 |