민지 개발자 성장 일기

1fr 는? 화면 사이즈에 따라서 1:1비율로 확대해라. 라는 뜻~~~~! .doors { /* display: flex; flex-wrap: wrap; */ display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); justify-content: center; /* max-width: 660px; */ background-color: bisque; margin: auto; padding: 40px 20px; } /* max-width: 660px; */ 이게 화면을 고정 시키는 부분임! 위의 CSS를 활용하면! 이렇게 화면에다가 꽉 채움!! 다른 방법으로도 이런 문을 만들 수 있다는 것을 알 수 있다. 그리드로 이용한 방법.(2..

더보기 플랙스(따로 지정하는 값 1차원으로 레이아웃을 설정하는 거라면, 그리드는 2차원으로 설정한다 .box*5 결과 ------------ box1 box2 box3 box4 box5 바깥에다가 지정을 해놓고 (커다란 박스를 만들고 그 안에 요소를 배치) 디스플레이 속성은 CSS에서 사용하지만 부모요소와 자식요소로 플렉스함 컨테이너이란 큰 박스로 그리드라는 속성을 주게 된다면 ? #container { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 100px; } .box { background-color: antiquewhite; } .box { background-color: antiquewhite; bord..

HTML DOCTYPE html> MZZNZZ 제목 광고 본문 광고 하단 제목, 광고, 본문, 하단을 나눠서 만들었어. CSS #container { width: 1200px; margin: 20px auto; background-color: rgb(0, 101, 189); } #header { width: 100%; height: 120px; background-color: rgb(202, 239, 253); } #leftsideber { width: 300px; height: 600px; background-color: rgb(245, 253, 255); float: left; } #content { width: 600px; height: 600px; background-color: rgb(168, ..

CSS 띄움을 이용한 레이아웃 HTML DOCTYPE html> Document 오늘의 주인공 강아지 너무 귀엽다 이 강아지는 귀여워!!!! 멍멍!!!!! 세상에나 모든 사람들이 이 강아지를 좋아해~ css img { width: 200px; height: 300px; } 이제 장난 그만하고!!!!!!!! 🍗수정된 css img { width: 200px; height: 300px; float: left; /* 오른쪽에다가 여백을 부여한다 */ margin-right: 20px; } 이런식으로 띄움이 가능하다. 신기하구먼 img { width: 200px; height: 300px; float: both; /* 오른쪽에다가 여백을 부여한다 */ margin-right: 20px; } float: both..

.box { margin: 20px auto; width: 100px; height: 100px; background-color: blueviolet; border: 1px solid burlywood; transition-property: width, height; transition-duration: 2s, 1s; } .box:hover { width: 200px; height: 150px; } 이랬는데 요래됐슴당! .box { margin: 50px auto; width: 100px; height: 100px; background-color: blueviolet; border: 1px solid burlywood; /* transition-property: width, heigh; transitio..

HTML DOCTYPE html> Doors! Doors. CSS body { background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/door-selector/main/images/bg.jpg"); background-size: cover; background-repeat: no-repeat; } .container { padding: 50px 0; } .doors { display: flex; flex-wrap: wrap; justify-content: center; max-width: 660px; /* background-color: orangered; */ margin: 0 auto; padding: 40px 20px; } ...

보호되어 있는 글입니다.

DOCTYPE html> Document child1 child2 child3 .parent { width: 500px; height: 500px; background-color: darkblue; } .child1 { width: 300px; height: 300px; background-color: orange; } .child2 { width: 200px; height: 100px; background-color: rgb(255, 233, 191); } .child3 { width: 150px; height: 300px; background-color: rgb(255, 255, 110); } .child1 { width: 250px; height: 250px; background-color: ora..

DOCTYPE html> Document @import url("https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap"); 안녕 메뉴1 메뉴2 메뉴3 메뉴4 nav ul { list-style: none; } /* 점을 없애준다! */ nav ul li { display: inline-block; padding: 20px; /* margin-left: -6px; */ border: 1px solid red; background-color: rgb(255, 82, 82); opacity: 0.5; /* 채도가 연해져썽! */ } * { font-family: "Nanum Pen Script", cursive; font-weight: ..

DOCTYPE html> Document @import url("https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap"); 안녕 메뉴1 메뉴2 메뉴3 메뉴4 nav ul { list-style: none; } /* 점을 없애준다! */ nav ul li { display: inline-block; padding: 20px; /* margin-left: -6px; */ border: 1px solid red; background-color: rgb(255, 82, 82); opacity: 0.5; /* 채도가 연해져썽! */ } * { font-family: "Nanum Pen Script", cursive; } https://fon..