⏳ 2023. 5. 1. - 2023. 5. 7. 나도 시작했다. 기술 블로그!(그런데 이제 일상을 곁들인..) 이번 주에는 🪖 예비군 훈련과 갑자기 타오른 블로그 욕구 때문에 공부를 얼마 못했다. 😅 빨간 날이 많아 더 많은 공부 계획을 세웠는데.. 하지만 블로그를 꼭 시작하고 싶었기 때문에! 후회하지는 않는다!! 앞으로는 노션이 아닌 블로그로 학습일지를 작성하려고 한다. 쿠키즈들 많이 와서 봐주세요~ ㅎㅡㅎ lipsum.com 어떤 예시를 볼 때면 Lorem Ipsum is 어쩌고..를 자주 봤는데, 이런 의미없는 긴 문장을 생성해주는 사이트가 있었다.(와우~ 인터레스팅~) 의미없는 긴 문장이 필요할 때 사용하자. https://lipsum.com/ Lorem Ipsum - All the facts ..

⏳ 2023. 5. 1. - 2023. 5. 7. 배운 것을 써먹자. html, css는 물론, git과 마크다운 문법에 익숙해지자! https://github.com/iam454/overwatch-hero-selector-vanilla GitHub - iam454/overwatch-hero-selector-vanilla Contribute to iam454/overwatch-hero-selector-vanilla development by creating an account on GitHub. github.com 마크다운 문법.. 잘 몰라서 몇 번이나 업데이트했다.. 껄껄

⏳ 2023. 5. 1. - 2023. 5. 7. 전환 transition transition: transition-property transition-duration transition-timing-function transition-delay; transition-timing-function 전환 효과의 타이밍(Easing) 함수를 지정 transition-timing-function: ease; -> 느리게-빠르게-느리게 타이밍 함수에 대해 더 자세히 알아보려면? https://easings.net/ Easing Functions Cheat Sheet Easing functions specify the speed of animation to make the movement more natural. ..

⏳ 2023. 5. 1. - 2023. 5. 7. flex flex는 주 축(main-axis)과 교차 축(cross-axis) 중 주 축을 기준으로 요소들을 정렬하기 위한 방법이다. 보통 수평으로 정렬하기 위해 사용된다. flex-direction flex-direction: row; -> 행(좌 => 우) row-reverse : 행(우 => 좌) column : 열(위 => 아래) column-reverse : 열(아래 => 위) flex-wrap flex-wrap: nowrap; -> 줄바꿈 없음 wrap : 여러 줄로 묶음 justify-content 주 축의 정렬 방법 jusify-content: flex-start; align-content 교차 축의 여러 줄 정렬 방법 align-conte..

⏳ 2023. 5. 1. - 2023. 5. 7. 글꼴과 문자 line-height 한 줄의 높이. 행간과 유사하다. line-height: normal; -> 브라우저의 기본값 사용 1.4 : 글꼴 크기의 1.4배 text-indent 문자 첫 줄의 들여쓰기. 음수를 사용한다면 내어쓰기가 된다. 배경 background-image div { width: 300px; height: 300px; background-color: orange; background-image: url("https://heropy.blog/css/images/logo.png"); } background-size div { width: 300px; height: 300px; background-color: orange; backg..