짧은코딩

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..

Find -html No Service 18:43 110% Find . QR Code Add by Contacts Add by ID Invite Recommended Friends You have no recommended friends. Open Chat Go to Openchat Home #리버풀 #soccer#liverpoll#salah 325 members Active 342 #리버풀 #soccer#liverpoll#salah 325 members Active 342 1 . -css .find-icons { display: flex; justify-content: space-between; } .find-icons__icon { display: flex; flex-direction: column;..

-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..

Git git은 파일의 변경 내역을 계속해서 추적해주는 version control system이다. Github github은 파일 내역과 파일들을 올려주는 공간이다. commit은 기본적으로 시점이다. history에 들어가 보면 빨간색과 초록색이 나오는데 빨간색은 이전 코드이고 초록색은 변경된 코드이다. => 변경 사항을 쉽게 알 수 있다. Repository 1. 깃허브 홈페이지에서 repositroy를 만든다. 2. 깃허브 데스크탑에 가서 Clone a Tutorial Repository를 누르고 Local Path 경로를 설정하고 Clone한다. 3. 설정한 경로에 파일이 만들어져 있다. 4. vsc로 파일을 열고 README.md를 만들어 준다. README 파일은 모든 git reposit..

Transition Transition은 어떤 상태에서 다른 상태로의 변화를 애니메이션으로 만드는 방법이다. Go home transition는 state가 없는 곳에 써야한다. 그리고 여러 가지 속성을 넣을 수 있지만 그냥 a와 a:hover에서 다르게 설정한 color, background-color, border-radius만 서서히 움직일 수 있도록 해준다. 그리고 몇 초 동안 변할 것인지 시간을 써줄 수 있다. transition: all 5s ease-in-out; 혹은 all로 쓰면 a와 a:hover과 다른 요소를 모두 변하게 해줄 수 있다. -ease-in function 브라우저에게 애니메이션이 어떻게 변할지 말해주는 것이다. https://matthewlein.com/tools/cea..

box -block과 inline block: 옆에 다른 요소가 못 오는 것 inline: 같은 줄에 위치할 수 있다. block은 높이와 너비가 있다. inline은 높이와 너비를 가질 수 없다. => inline은 박스가 아니다. -margin, border, padding 박스의 3가지 특징은 margin, border, padding을 가진다. margin: border의 바깥에 있는 공간 쉽게 사용하는 방법 margin-top: 1; margin-right: 2; margin-bottom: 3; margin-left: 4; margin: 1 2 3 4; 2개로 주면 margin: 20px 15px; 위, 아래는 20px, 왼쪽, 오른쪽은 15px이다. -collapsing margins 이렇게 ..

-태그 참고 사이트 https://developer.mozilla.org/ko/docs/Web/HTML/Element HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN 이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다. developer.mozilla.org -meta 구글에 넷플릭스를 검색하면 이렇게 나온다. 구글이 사이트에서 titel과 description을 가져오는 것이다. meta는 부가적인 정보라는 뜻이다. meta 태그는 두개의 attribute를 갖고 있다. content, name을 가지고 있다. UTF-8이 없으면 사이트 글자가 깨져보일 것이다. -lang 이것을 넣는 이유는 구글, 네이버 같은 검색 엔진들에 도움..