짧은코딩

html의 빈 박스에 막대나 원 만들기 -막대 width: 15px; height: 60px; background-color: white; -원 background-color: white; width: 15px; height: 15px; border-radius: 50%; 막대나 원 둘 다 반드시 width와 height를 줘야한다. 그리고 원은 border-radius에 50%을 주거나 width와 height의 절반 크기의 px를 줘야한다. keyframe -원형으로 돌리는 법 @keyframes turn { 100% { transform: rotate(180deg); } } rotate를 주면 된다. -각 아이템에 순서대로 애니메이션을 주는 법 1. 우선 keyframse를 만든다. 2. 각 아이템..

-html -css body { margin: 0; } .big-box { background-color: #ff6446; height: 100vh; display: flex; justify-content: center; align-items: center; } .middle-box { border: 3px solid black; padding: 10px; width: 300px; height: 300px; background-color: #f5deb3; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; } .small-box, .long-box { background-color: #00808..

branch -설명 branch는 코드들의 멀티버스라고 볼 수 있다. git은 어떤 commit이라도 받을 수 있게 해준다. 그림에서 동그라미는 commit이다. 어떤 commit라도 거기에서 Master branch와 다른 프로젝트를 시작할 수 있다. 대부분의 사람들은 어느 정도 검증된 코드를 commit한다. branch1, branch2는 각각 다른 commit을 갖는데, 다른 기능을 추가하거나 실험하고 싶을 때 이렇게 나눌 수 있다. 그리고 나중에 갈라진 branch를 master branch에 합칠 수 있다. -적용법 예시 깃허브 데스크탑에서 experimental이라는 새로운 branch를 만들어준다. 새로 만든 experimental branch의 history에 가도 master와 같은 기..

처음에 배경이 나왔다가 사라지게 하기 @keyframes hideSplashScreen { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } #splash-screen { background-color: var(--yellow); position: absolute; height: 100vh; width: 100vw; top: 0; display: flex; justify-content: center; align-items: center; font-size: 132px; z-index: 3; animation: hideSplashScreen 1s ease-in-out forwards; } @keyframes를 이용한다. 그리고 animation에..

z-index z-index는 div가 있는 위치가 맨 앞에서부터 몇 번째인지 나타 낸다. 즉, layer의 순서가 몇 번째인지를 나타낸다. display 작업을 하거나 postition이 고정되어 있으면 layer를 갖는다. z-index의 기본값은 0이며 더 큰 숫자를 가진 부분이 위에 겹쳐서 보이게 된다. #chat-screen .status-bar { z-index: 2; } #chat-screen .alt-header { top: 10px; z-index: 1; } 이러면 status-bar가 더 위에 있다. 그리고 고정된 상단바에서 사용할 때는 상단바에 배경색을 따로 또 줘야했다. 그래야 지나간 요소들이 덮어져서 확실히 안보인다. => z-index는 absolute postion이나 fixe..

More -html No Service 18:43 110% More . 꾸릉이 010-1234-5678 Calendar Account Emotions Themes Suggestions KaKao Story KaKao Story 1 . -css .more-screen .icon-row { margin-top: 35px; } .more-suggestions { margin-top: 50px; border-top: var(--main-border); padding-top: 40px; } .more-suggestions__title { margin-bottom: 30px; } .more-suggestions__icons { display: flex; } .more-suggestions__icon { margin..

-html No Service 18:43 110% Chats 꾸릉이 밀웜이 먹고싶다 21:22 1 1 . friends.html에서 코드를 복붙하고 수정했다. -style.css .main-screen { padding: 0px var(--horizontal-space); } 그리고 .main-screen에 padding을 준다. 하지만 이로 인해 freinds.html에서 저 정보란의 간격도 벌어진다. 그래서 frinds.css에다가 margin-top: -10px을 해준다. #friends-display-link { text-align: center; display: block; background-color: #fafafa; padding: 15px 0px; font-size: 18px; margi..

하단 바 만들기 -html -css .nav { /* 아래에 고정 */ position: fixed; bottom: 0; width: 100%; /* 이거 안하면 아이콘이 몰려있다. */ background-color: #f9f9fa; padding: 20px 50px; box-sizing: border-box; /* 이거 해야 아래 고정 시 ellipsis도 보인다. */ border-top: 1px solid rgba(121, 121, 121, 0.3); } .nav__list { display: flex; justify-content: space-between; } .nav__link { color: #2e363e; } 이렇게 나오게 된다. box-sizing 박스를 만들고 200px의 너비를 준다..

Form form은 아주 중요한 2가지 속성을 가지고 있다. 하나는 action이고 다른 하나는 method이다. -action action은 어떤 페이지로 data를 보낼건지 지정할 수 있다. Find Kokoa Accountor or Password 그리고 friends.html을 만들고 hello만 입력했다. -method method는 2가지 방식을 사용할 수 있는데, POST와 GET이다. POST는 백엔드 서버에 정보를 전송하는 방식인데 우리는 서버를 가지고 있지 않아서 여기선 사용하지 않는다. GET 방식은 보안에 취약하다. 그렇기에 URL에 포함되어도 상관없는 정보들을 GET 방식으로 보낸다. username과 password를 GET 방식으로 내보낼 것이다. Find Kokoa Accou..

gitignore 깃허브 데스크탑에 .DS_Store라는 임시파일이 있다. 이건 맥os에서 만든 파일이다. 맥이나 윈도우에는 보이지 않는 임시파일이 있다. 따라서 업로드 하고 싶지 않으면 체크를 안하면 되는데 모든 커밋에서 이 파일을 업로드 하고 싶지 않다고 기억을 해야한다. => 이럴 경우에는 .gitignore를 만들면 된다. '.gitignore'는 무시하고 싶은 파일 이름을 기록하는 파일이다. .DS_Store 이렇게 쓰고 저장하면 커밋 창에서 .DS_Store가 사라진다. 어떤 폴더라도 무시가 가능하다. BEM(Block Element Modifier) 좀 더 쉽게 읽히는 css를 가진다. https://css-tricks.com/bem-101/ BEM 101 | CSS-Tricks The fo..