티스토리

짧은코딩
검색하기

블로그 홈

짧은코딩

shortcoding.tistory.com/m

전공 수업 정리 및 개인 코딩과 프로젝트 올리는 블로그입니다.

구독자
3
방명록 방문하기
공지 목표 모두보기

주요 글 목록

  • 챌린지 9일차(막대나 원 만들기, 애니메이션) 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. 각 아이템.. 공감수 0 댓글수 0 2022. 7. 12.
  • 챌린지 6일차 -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.. 공감수 0 댓글수 0 2022. 7. 9.
  • git branch branch -설명 branch는 코드들의 멀티버스라고 볼 수 있다. git은 어떤 commit이라도 받을 수 있게 해준다. 그림에서 동그라미는 commit이다. 어떤 commit라도 거기에서 Master branch와 다른 프로젝트를 시작할 수 있다. 대부분의 사람들은 어느 정도 검증된 코드를 commit한다. branch1, branch2는 각각 다른 commit을 갖는데, 다른 기능을 추가하거나 실험하고 싶을 때 이렇게 나눌 수 있다. 그리고 나중에 갈라진 branch를 master branch에 합칠 수 있다. -적용법 예시 깃허브 데스크탑에서 experimental이라는 새로운 branch를 만들어준다. 새로 만든 experimental branch의 history에 가도 master와 같은 기.. 공감수 0 댓글수 0 2022. 7. 4.
  • keyframes 활용 처음에 배경이 나왔다가 사라지게 하기 @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에.. 공감수 0 댓글수 0 2022. 7. 4.
  • z-index, 메뉴 바 가운데 정렬 법, order 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.. 공감수 0 댓글수 0 2022. 7. 3.
  • More 페이지 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.. 공감수 0 댓글수 0 2022. 7. 2.
  • Chats 페이지 -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.. 공감수 0 댓글수 0 2022. 6. 29.
  • friends 페이지 하단 바 만들기 -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의 너비를 준다.. 공감수 0 댓글수 0 2022. 6. 28.
  • Form의 속성 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.. 공감수 0 댓글수 1 2022. 6. 28.
  • 클론 코딩 시작 and login 페이지 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.. 공감수 0 댓글수 0 2022. 6. 24.
  • GIT and GITHUB 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.. 공감수 0 댓글수 0 2022. 6. 23.
  • ADVANCED CSS 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.. 공감수 0 댓글수 0 2022. 6. 21.
  • CSS 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 이렇게 .. 공감수 0 댓글수 0 2022. 6. 12.
  • HTML -태그 참고 사이트 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 이것을 넣는 이유는 구글, 네이버 같은 검색 엔진들에 도움.. 공감수 0 댓글수 0 2022. 5. 31.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.