가오리의 코딩일기

✏️ z-index → 쌓임 맥락(Stacking context) 자식 엘리먼트들의 z-index 속성 값은 부모 안에서만 의미를 가진다 부모 엘리먼트의 쌓임 맥락을 구성하는 하나의 단위 부모가 가지고 있는 z-index 값이라는 기본 속성이 낮으면 자식의 z-index값이 높아도 부모의 쌓임 순서에 따른다 → position 속성을 이용하면 요소를 겹치게 놓을 수 있다 → 이 요소들의 수직 위치를 z-index 속성으로 정한다 → 숫자가 클수록 위로, 작을수로 아래로, 기본값_0 ✏️ outline → border가 테두리라고 한다면 outline은 border의 바깥 외곽선을 말한다 → outline의 선 너비는 레이아웃에 관여하지 않고 눈에만 선이 보인다 ✏️ display: inline-flex ..

index.html integration_instructions gaori description contacts Information Character Card Cards Halloween Sign Up Gradient Transition Transform SpaceSuit VidTube Information To My Favorite Thing Page 2022.07.10 Character Card Page 2022.07.17 Flip Coin Page 2022.07.24 Gradient Page 2022.07.24 Halloween Page 2022.08.02 Make A VidTube Page 2022.08.14 Movie Information Page 2022.07.10 SpaceSuit Page..

https://www.youtube.com/watch?v=4ykAepVkG5Y index.html Home Explore Subscription Library History Playlist Messages Show More SUBSCRIBED Jack Nicholson Simon Baker Tom Hardy Megan Ryan cameron Diaz Best channel to learn coding that help you to be a web developer Easy Tutorials 15k views • 2days Best channel to learn coding that help you to be a web developer Easy Tutorials 15k views • 2days Best ..

index.html The Best Colors Tomato #FF6347 Teal ##008080 Burlywood #DE8887 Thistle #D78FD7 style.css body { margin: 0; height: calc(100vh - 20px); background-color: lightgray; } h1 { text-align: center; margin-bottom: 50px; margin-top: 20px; } .wrapper { width: 450px; margin: 0 auto; } .container { display: flex; justify-content: space-around; align-items: center; } .color { width: 200px; positio..

index.html Jack-O'-Lantern A jack-o-lantern is a carved pumpkin, turnip,or other root vegetable lantern associated with Halloween. Its name comes from the phenomenon of a strange light flickering over peat bogs, call will-o'-the-wisp or jack-o'-lantern. Information 1234@gmail.com 000-3234-2344 Seoul, Korea Skills Photoshop Web Front-End Education HAPPY HALLOWEEN style.css * { margin: 0; padding:..

index.html style.css body { height: 100vh; display: flex; justify-content: center; align-items: center; } div { transition: background-color 1s ease-in-out; border: 3px solid black; } img { width: 300px; height: 300px; transition: 3s ease-in-out; } img:hover { transform: rotateX(360deg) scale(1.5); } 게임으로 flex 연습(13단계까지) Gradation index.html style.css body { margin: 0; padding: 0; background-col..

index.html index.html Financial App 25 Apr 2030 3+ click star Graphic Design 18 May 2030 2+ click grade Artifact Model 17 Now 2030 3+ click star_half Operating System 20 Apr 2030 2+ click star Business card 15 Oct 2030 3+ click grade Centered Design 20 Apr 2030 2+ click star_half style.css body { margin: 0; padding: 0; height: 100vh; width: 100vw; background: lightblue; display: flex; justify-co..

✏️ Negative margins → 문서 내의 정상적인 흐름을 건들이지 않는다 → 요소를 이동하려고 음수 마진을 사용하면 그 뒤에 오는 모든 요소들도 같이 이동 → 음수 패딩 사용 시 테두리가 내용으로 축소, 내용 영역이 내용보다 작아지기 때문에 의미 없음 ✏️: active → 사용자가 활성화한 요소를 나타낸다 → 버튼을 누르는 순간부터 떼는 시점까지 → link→ visited → hover → active 순서로 디자인하기 ✏️ @import → 다른 스타일 시트에서 스타일 규칙을 가져올 때 쓴다 @import url("bluish.css") speech; @import url("chrome://communicator/skin/"); ✏️ display: inline; → 줄을 바꾸지 않고 다른..

RED Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, corporis blanditiis earum porro maiores ratione. LAUNCH GREEN Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam dolores dolore voluptatibus odio consequatur quis? LAUNCH BLUE Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste rem ipsa natus laudantium nam amet? LAUNCH body { margin: 0; padding: 0; back..

body { width: 100vw; height: 100vh; margin: 0; padding: 0; background-color: rgb(255, 98, 0); display: flex; justify-content: center; align-items: center; } .bigBox { background-color: rgb(226, 223, 200); width: 500px; height: 500px; display: flex; justify-content: space-around; align-items: center; flex-direction: column; } .box { width: 100px; height: 100px; background-color: rgb(19, 61, 18); ..