2023년 05월15일 수업 내용 정리

국비 교육 내용 정리 2023. 5. 15. 16:20

(1)

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body{

margin: 0;

}

ul{

list-style: none;

padding: 0;

margin: 0;

border: 1px solid #000;

}

ul li{

border: 1px solid #000;

background-color: royalblue;

color: #fff;

}

.container{

display: grid; /*flex는 무조건 수평, 주축 정렬 이었짐나 grid는 x,y를 잡아줘야함!*/

width: 300px;

height: 500px;

grid-template-columns: 1fr 1fr 1fr;/*1:1:1 비율로 잡아줌*/

}

</style>

</head>

<body>

</ul>

(2)

<!DOCTYPE html>

<head>

<title>grid-template-rows</title>

<style>

body{

margin: 0;

}

ul{

list-style: none;

padding: 0;

margin: 0;

border: 1px solid #000;

}

ul li{

border: 1px solid #000;

background-color: royalblue;

color: #fff;

}

.container{

display: grid; /*flex는 무조건 수평, 주축 정렬 이었짐나 grid는 x,y를 잡아줘야함!*/

width: 300px;

height: 500px;

grid-template-columns: 1fr 1fr 1fr;/*행을 1:1:1 비율로 잡아줌*/

/* grid-template-rows: repeat(3,1fr); */

/*열을 1:1로 비율로 잡아줌, 1fr 대신 px로도 조절 가능*/

/* grid-template-columns: repeat(2, 1fr 30px); */

}

</style>

</head>

<body>

</ul>

</body>

</html>

(3)

<!DOCTYPE html>

<head>

<title>minmax() 함수</title>

<style>

body{

margin: 0;

}

ul{

list-style: none;

padding: 0;

margin: 0;

border: 1px solid #000;

}

ul li{

border: 1px solid #000;

background-color: royalblue;

color: #fff;

}

.container{

width: 300px;

height: 500px;

display: grid;

/* 열방향 그리드 트랙의 최소 넓이를 50px, 최대 넓이를 150px로 합니다. */

grid-template-columns: repeat(3,minmax(50px,150px));

/* 행방향 그리드 트랙의 최소 높이를 120px, 최대 높이를 가능한 최대 크기로 합니다. */

grid-template-rows: repeat(3, minmax(120px,auto));

}

</style>

</head>

<body>

</ul>

</body>

</html>

(4)

<!DOCTYPE html>

<head>

<title>minmax() 함수</title>

<style>

body{

margin: 0;

}

ul{

list-style: none;

padding: 0;

margin: 0;

border: 1px solid #000;

}

ul li{

border: 1px solid #000;

background-color: royalblue;

color: #fff;

/* margin: 5px 0; */

}

.container{

width: 300px;

height: 500px;

display: grid;

grid-template-columns: repeat(3,minmax(50px,150px));

row-gap: 30px;

column-gap: 10px;

}

</style>

</head>

<body>

</ul>

</body>

</html>

(5)

<!DOCTYPE html>

<head>

<title>grid-item에 사용하는 속성</title>

<style>

body{

display: grid;

grid-template-columns: 1fr 2fr;

grid-template-areas:

'. header' /*none은 동시에 안되므로 .으로 표현해야함*/

'aside main'

'footer .'

;

}

header{

grid-area: header;

background: pink ;

}

main{

grid-area: main;

background-color: royalblue;

}

aside{

grid-area: aside;

background-color: lightgreen;

}

footer{

grid-area: footer;

background-color: aquamarine;

}

</style>

</head>

<body>

<header>header</header>

<main>

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet corporis nesciunt error velit cum dignissimos ipsa dolorem nihil laudantium quas dolor est sunt mollitia possimus, consequuntur veritatis incidunt commodi. Repellat.

</main>

<aside>aside</aside>

<footer>footer</footer>

</body>

</html>

<6>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div{

width: 100px;

height: 100px;

border: 2px solid gold;

border-radius: 10px;

display: inline-block;

}

.box1{

background-color: gold;

/* position: static; */

top: 10px;

left: 10px;

z-index: 9000;

}

.box2{

background-color: dodgerblue;

position: absolute;

top: 30px;

left: 30px;

z-index: 1;

}

.box3{

background-color: crimson;

position: absolute;

top: 50px;

left: 50px;

z-index: 0;

}

.box4{

background-color: yellowgreen;

position: absolute;

top: 70px;

left: 70px;

z-index: -1;

}

</style>

</head>

<body>

</body>

</html>

(7) 단축 속성

<!DOCTYPE html>

<head>

<style>

body{

margin: 0;

}

ul{

list-style: none;

padding: 0;

margin: 0;

border: 1px solid #000;

}

ul li{

border: 1px solid #000;

background-color: royalblue;

color: #fff;

}

.container{

display: grid; /*flex는 무조건 수평, 주축 정렬 이었짐나 grid는 x,y를 잡아줘야함!*/

/* width: 300px; */

height: 500px;

grid-template-columns: 1fr 1fr 1fr;/*1:1:1 비율로 잡아줌*/

}

.container li:nth-child(1){

/* grid-column-start: 1;

grid-column-end: 3;

grid-row-start: 1;

grid-row-end: 3; */

/* grid-column: 1 / 3;

grid-row: 1/ 3; */

/* grid-area: 1/1/3/3; */

grid-area: 1/1/ span 2 / span 2;

}

</style>

</head>

<body>

</ul>

</body>

</html>

<부트스트랩 : https://getbootstrap.kr/>

(1) Setting

<!DOCTYPE html>

<head>

<title>Bootstrap start</title>

</head>

<body>

<h1>Bootstrap Setting</h1>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse reiciendis voluptatum voluptates error explicabo, sit maiores deleniti quod voluptas necessitatibus? Iste id repellat veniam ad sapiente vel nam, velit ducimus dolor molestias delectus? Aperiam ea recusandae, ex animi, ipsa, praesentium neque accusamus natus repellat consequuntur molestiae fugit eligendi maxime assumenda! Libero delectus ratione maxime suscipit reiciendis sed dignissimos sequi eligendi ducimus, excepturi ullam laudantium repellat modi labore dolor! Inventore unde molestias consectetur recusandae? Cum ducimus eaque nemo repudiandae deserunt voluptatibus reiciendis tenetur laboriosam impedit atque voluptatem, consectetur fuga suscipit adipisci debitis iusto itaque beatae mollitia culpa facere tempore architecto pariatur.</p>

</body>

</html>

(2) Container

<!DOCTYPE html>

<head>

<title>Bootstrap start</title>

<style>

div{

border: 1px solid #000;

}

</style>

</head>

<body>

<h1>container</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia laboriosam perferendis voluptas veniam ab molestiae, dolorem saepe eaque illo quo necessitatibus consequuntur deserunt ex modi, reiciendis accusantium? Iure, at nulla, est repellat soluta quae corporis debitis repudiandae odio magnam quasi. Voluptatum distinctio suscipit iure vel aperiam eius qui ipsa odit, eveniet reprehenderit ea excepturi ut corrupti, quia repellat. Perspiciatis, nobis. Nam beatae in sunt repellendus sapiente. Veniam cum nemo nobis cupiditate! Ex cum fugit, quo dolor amet soluta saepe laborum ea quibusdam ut iusto mollitia quia modi doloremque maxime provident qui? Minima ratione, unde amet, molestias nulla nisi recusandae quis sapiente vero illo neque rem? Illum inventore nemo fuga tempore, ad quod. Voluptate repellat quos, obcaecati reprehenderit ullam fugit et corrupti totam itaque, exercitationem eligendi aut quod dolores omnis. Magnam delectus recusandae rem, reprehenderit soluta perspiciatis. Ex perspiciatis ipsam expedita explicabo, optio praesentium dolore aperiam minima. Recusandae impedit at iste quaerat laudantium amet minus laboriosam dolores expedita exercitationem, optio illum non pariatur veritatis ullam facilis quae laborum eveniet error itaque animi nisi nemo. Magnam, quis soluta. Sequi eos commodi earum sint voluptates dolorum possimus iste. Voluptas voluptatum officia error sequi sunt voluptatem quae. Excepturi consequatur fuga at tempore reiciendis reprehenderit voluptatibus? Accusantium ex laborum impedit in laboriosam minima delectus ut iusto ad consequuntur. Illo earum inventore nisi, eveniet soluta consequatur aspernatur, similique quisquam maxime, suscipit labore animi placeat facere sequi repudiandae ea? Pariatur quisquam sunt, eos laborum saepe dignissimos deleniti deserunt atque nihil eligendi! Mollitia, alias. Natus, numquam. Consectetur, neque, veniam odio esse obcaecati illum voluptas quas dolorem culpa delectus sapiente adipisci non doloribus quam sit? Nam perspiciatis pariatur voluptates ad totam officia dolores neque explicabo similique, vitae rem maxime, minima aperiam vel officiis hic quas expedita? Animi saepe illum rerum vitae! Labore repellat sint dolor. Exercitationem dignissimos mollitia quisquam?</p>

</div>

<h1>container-fluid</h1>

<p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum labore sequi veritatis soluta quam ad inventore aut placeat distinctio blanditiis nihil aliquid illo repellendus maxime voluptate debitis harum rem, odit, doloribus minus maiores adipisci quibusdam. Voluptatem, nisi? Voluptates, aliquid. Adipisci, amet! Id quos aperiam ipsam repellat culpa error atque odio nihil voluptate in est ex dignissimos vel minima iure, ratione magni quaerat sequi temporibus perferendis, mollitia quae voluptatibus, cumque commodi. Quibusdam, natus labore vitae ad excepturi consequatur in est. Impedit, perferendis. Beatae iusto id eius perferendis fugiat modi voluptatem necessitatibus facilis officiis adipisci, sit quis enim eveniet voluptas pariatur, laborum incidunt! Facilis eveniet natus possimus deserunt et, modi repudiandae quaerat. Enim sed iste voluptatibus et, aliquid animi doloremque exercitationem nemo debitis error sit! Commodi optio beatae soluta, doloribus quaerat dolor veritatis neque sed quia molestiae, nostrum in facere deleniti facilis illum aliquam ex asperiores eum accusamus quos laudantium fugit accusantium!

</p>

</div>

</body>

</html>

(3) buttons

<!DOCTYPE html>

<head>

<title>Bootstrap start</title>

<style>

div{

border: 1px solid #000;

}

</style>

</head>

<body>

<h1>Buttons</h1>

<h2>Button Variants</h2>

<div>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">secondary</button>

<button type="button" class="btn btn-success btn-sm">Primary</button>

<button type="button" class="btn btn-danger btn-lg">secondary</button>

<button type="button" class="btn btn-warning btn-warning">warning</button>

<button type="button" class="btn btn-info">disabled info</button>

</div>

<br>

<h2>Outline buttons</h2>

<div>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-light">Light</button>

</div>

<h2> Block buttons</h2>

<button class="btn btn-primary" type="button">Button</button>

</div>

/* 부트스트랩 CDN 연결2*/

</script>

/* 부트스트랩 CDN 연결2

</body>

</html>

(4) typography

<!DOCTYPE html>

<head>

<title>Content - Typography</title>

<style>

div{

border: 1px solid #000;

}

</style>

</head>

<body>

<h1 class="display-1 text-center mb-4 ">Typography</h1>

<h2 class="display-6">Display heading-6</h2>

<p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque soluta asperiores quas, similique at provident vitae enim. Et commodi perferendis voluptates quaerat sequi. Reprehenderit error repudiandae aliquid deserunt eius voluptate, veniam suscipit, repellat, corporis possimus dolore ut porro et quisquam! Aperiam quos, dolore autem explicabo at minima ea exercitationem natus repudiandae ratione labore quibusdam ipsam! Molestias deserunt exercitationem facere, optio vero eum iusto, id quibusdam rerum deleniti magni sequi non similique in dolor minus, fuga nulla blanditiis! Dolorem, eveniet commodi distinctio minus atque voluptas, sequi dicta consequatur exercitationem repellat voluptatum quaerat unde! Temporibus omnis recusandae quidem. Voluptates molestias recusandae vitae!

</p>

<h2>Blockquotes</h2>

<p>

내 죽음을 적에게 알리지 마라

</p>

</blockquote>

이순신

</footer>

</blockquote>

</div>

</body>

</html>

(5) Utilities

<!DOCTYPE html>

<head>

<title>Utilities - background & Colors</title>

<style>

div{

border: 1px solid #000;

}

</style>

</head>

<body>

<h1 class="display-1 text-center m-4 text-primary ">Typography</h1>

<h2 class="display-6">Display heading-6</h2>

<p>

</p>

<h2>Blockquotes</h2>

<p>

내 죽음을 적에게 알리지 마라

</p>

</blockquote>

이순신

</footer>

</blockquote>

</div>

</body>

</html>

(6) grid

<!DOCTYPE html>

<head>

<title>Layout - Grid</title>

<style>

div{

border: 1px solid #000;

}

</style>

</head>

<body>

<h1 class="display-1 text-center text-danger">Grid System</h1>

<div>

<div class="col-6 bg-primary">6 units</div>

<div class="col-6 bg-secondary">6 units</div>

</div>

</div>

<div class="col-2 bg-info">4 units</div>

<div class="col-4 bg-danger">4 units</div>

<div class="col-6 bg-light">4 units</div>

</div>

<div class="col-6 bg-primary">6units</div>

<div class="col-6 bg-secondary">6units</div>

</div>

</body>

</html>

저작자표시

'국비 교육 내용 정리' 카테고리의 다른 글

2023년 05월 17일 자바스크립트 question(배열,function) (0)	2023.05.17
2023년 05월16일 수업 내용 정리 (0)	2023.05.16
네이버 회원가입 바 만들어봐~ (2)	2023.05.12
2023년 05월12일 수업 내용 정리 (0)	2023.05.12
2023년 05월11일 수업 내용 정리 (0)	2023.05.11

ABOUT ME

진수 성장노트 ~ing 진수 성장노트 ~ing

'국비 교육 내용 정리' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'국비 교육 내용 정리' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바