@import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap"); body { font-family: "Black Han Sans", sans-serif; font-size: 20px; }
reset.css 에 @import를 가져다두고, font-family 에서 설정해서 쓰면 된다.
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet"
@import와 link 둘다 google font 에서 제공하는 걸 copy and paste 해서 쓰면 된다.
<style> * { margin: 0; padding: 0; } #tab { margin: 50px; width: 300px; height: 350px; border: 1px solid #000; box-sizing: border-box; position: relative; } #tab label { float: left; display: block; /* display: inline-block; */ /* 얘네는 인라인이라 크기가 안먹히기 때문에 인라인이면서 크기가 먹힐 수 있게 인라인-블록으로 설정해준다 */ width: 25%; height: 30px; border: 1px solid #ccc; box-sizing: border-box; text-align: center; line-height: 30px; cursor: pointer; } #tab input { display: none; /* 필요없기때문에 숨기기 */ } .box { width: 300px; height: 320px; border: 1px solid #ccc; box-sizing: border-box; position: absolute; top: 30px; left: 0; display: none; } .box1 { background-color: aquamarine; z-index: 400; /* .box에 position:absolute;를 줬을 때 box4가 제일 위에 와서 box1부터 차례대로 오게 하기 위해 z-index를 사용함 */ } .box2 { background-color: rgb(80, 138, 119); z-index: 300; } .box3 { background-color: rgb(122, 81, 219); z-index: 200; } .box4 { background-color: rgb(183, 3, 255); z-index: 100; } /* 탭바도 해당 탭 컨텐츠 배경과 같게 만들어주기 */ #tab #tabmn1:checked + label { border-bottom: 0; background-color: aquamarine; } #tab #tabmn2:checked + label { border-bottom: 0; background-color: rgb(80, 138, 119); } #tab #tabmn3:checked + label { border-bottom: 0; background-color: rgb(122, 81, 219); } #tab #tabmn4:checked + label { border-bottom: 0; background-color: rgb(183, 3, 255); } #tab #tabmn1:checked ~ .box1, #tab #tabmn2:checked ~ .box2, #tab #tabmn3:checked ~ .box3, #tab #tabmn4:checked ~ .box4 { display: block; } </style> </head> <body> <div id="tab"> <input type="radio" name="tabmn" id="tabmn1" checked /> <label for="tabmn1">menu1</label> <input type="radio" name="tabmn" id="tabmn2" /> <label for="tabmn2">menu2</label> <input type="radio" name="tabmn" id="tabmn3" /> <label for="tabmn3">menu3</label> <input type="radio" name="tabmn" id="tabmn4" /> <label for="tabmn4">menu4</label> <!-- radio/checkbox 의 default는 다중선택인데, name 을 똑같이 주면 다중선택이 안되게 된다 --> <div class="box box1"><h2>box1</h2></div> <div class="box box2"><h2>box2</h2></div> <div class="box box3"><h2>box3</h2></div> <div class="box box4"><h2>box4</h2></div> </div> </body>
위엔 동일 .box { width: 300px; height: 0px; border: 1px solid #ccc; box-sizing: border-box; position: absolute; top: 30px; left: 0; opacity: 0; /* 이 부분부터 추가됨 */ transition: all 1s; } .box1 { background-color: aquamarine; z-index: 400; /* .box에 position:absolute;를 줬을 때 box4가 제일 위에 와서 box1부터 차례대로 오게 하기 위해 z-index를 사용함 */ } .box2 { background-color: rgb(80, 138, 119); z-index: 300; } .box3 { background-color: rgb(122, 81, 219); z-index: 200; } .box4 { background-color: rgb(183, 3, 255); z-index: 100; } /* 탭바도 해당 탭 컨텐츠 배경과 같게 만들어주기 */ #tab #tabmn1:checked + label { border-bottom: 0; background-color: aquamarine; } #tab #tabmn2:checked + label { border-bottom: 0; background-color: rgb(80, 138, 119); } #tab #tabmn3:checked + label { border-bottom: 0; background-color: rgb(122, 81, 219); } #tab #tabmn4:checked + label { border-bottom: 0; background-color: rgb(183, 3, 255); } #tab #tabmn1:checked ~ .box1, #tab #tabmn2:checked ~ .box2, #tab #tabmn3:checked ~ .box3, #tab #tabmn4:checked ~ .box4 { height: 320px; opacity: 1; } </style>
<style> * { margin: 0; padding: 0; } .box1 { width: 100%; height: 300px; background-color: red; } @media screen and (orientation: portrait) { /* 세로 레이아웃 */ .box1 { width: 100%; height: 300px; background-color: blue; } } @media screen and (orientation: landscape) { /* 가로 레이아웃 */ .box1 { width: 100%; height: 300px; background-color: green; } } </style> </head> <body> <div id="wrap"> <div class="box1"></div> </div> </body>
max- 혹은 min-width 이용하기
<style> * { margin: 0; padding: 0; } .box { margin: 0 auto; width: 1500px; height: 300px; background-color: red; } .box > div { float: left; width: 500px; height: 300px; } .box > div.box1-1 { background-color: red; } .box > div.box1-2 { background-color: green; } .box > div.box1-3 { background-color: blue; } @media screen and (max-width: 1500px) { body { background-color: yellow; } .box { margin: 0 0; width: 100%; height: 300px; background-color: #ccc; } .box > div { float: left; width: 33%; height: 300px; } } @media screen and (max-width: 1000px) { body { background-color: tomato; } .box > div { float: left; width: 50%; height: 300px; } .box1-3 { display: none; } } @media screen and (max-width: 480px) { .box > div { float: none; width: 100%; height: 300px; } .box1-3 { display: block; } } </style> </head> <body> <div id="wrap"> <div class="box"> <div class="box1-1">box1-1</div> <div class="box1-2">box1-2</div> <div class="box1-3">box1-3</div> </div> </div> </body>
<style> * { margin: 0; padding: 0; } a { text-decoration: none; } #wrap { width: 100%; } #header { width: 100%; height: 130px; background-color: rgb(10, 192, 131); } #header .btn { float: left; margin: 45px 0 0 20px; font-size: 30px; color: #fff; cursor: pointer; border: 0; background-color: transparent; } #header .logo { position: absolute; top: 35px; left: 50%; margin-left: -50px; text-align: center; line-height: 50px; width: 100px; height: 50px; background-color: antiquewhite; } #header .fullbtn { float: right; width: 30px; height: 30px; margin: 45px 20px 0 0; } #header .fullbtn:hover span { background-color: brown; } #header .fullbtn span { display: block; width: 30px; height: 2px; background-color: #fff; margin-bottom: 5px; cursor: pointer; transition: all 0.5s; } #header .fullbtn_list { position: absolute; top: 120px; left: 0; z-index: 500; width: 100%; height: 0; background-color: #ccc; /* display: none; */ opacity: 0; transition: all 0.7s; } #header #fullbtn_ch:checked ~ .fullbtn_list { /* display: block; */ opacity: 1; height: 150px; } #header #fullbtn_ch { display: none; } </style> </head> <body> <div id="wrap"> <header id="header"> <!-- <input type="button" value="button" class="btn" /> --> <button class="btn">button</button> <h1 class="logo">logo</h1> <!-- <a href="" class="fullbtn"> <span></span> <span></span> <span></span> </a> --> <label class="fullbtn" for="fullbtn_ch"> <span></span><span></span><span></span> </label> <input type="checkbox" id="fullbtn_ch" /> <div class="fullbtn_list">fullbtn_list</div> </header> </div> </body>