Goyummy

코코아 클론 챌린지 수료 했습니다! 그리고 우수 졸업생도 선정 됐어요! 근데 Poketmon인줄 알았는데 그냥 Pokemon이더라구요.. 그래서 뒤늦게 바꾸긴 했습니다 ㅎㅎ 그래도 저번에 바닐라JS 챌린지 결과물이랑 이번 챌린지 결과물이랑 비교하면 아주 뿌듯해요. 잠을 줄이고 쉬고 싶어도 강의 듣고 과제하느라 힘들긴 했는데 html, css가 다른 언어들보다 더 쉽고 재밌어서 그런지 정말 집중은 잘 됐어요. 챌린지는 강의 내용에서 더 나아가서 혼자 방법을 찾아보고 생각할 수 있다는 점이 좋아요! 다음은 CSS를 더 깊이 공부할지, 에어비앤비 클론코딩을 할지 고민 중이라 일단 백준 문제를 풀고있습니다..

배울 점, 기억할 점 text-decoration: none; 하이퍼링크의 밑줄이 사라진다. color: inherit; 부모의 색을 가져옴. nav 태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네이게이션 링크들의 집합을 정의할 때 사용. ul과 li 사용. text-transform: uppercase; 대문자로 만들기. space-between은 글자 수에 따라 배열이 중앙 정렬이 안될 수도 있음. margin의 방향을 고려해서 margin-left:auto; 와 margin-right: auto; 를 사용하면 글자 수와 무관하게 중앙 정렬이 됨. 이전 html 페이지로 연결되게 하려면 href 값으로 "javascript:history.back();" 을 주면 된다. position..

배울 점, 기억할 점 border-radius와 box-shadow: inset을 통해 곡면에 입체감을 줄 수 있다. overflow-x 속성으로 width를 초과한 부분을 어떻게 처리할 지 설정할 수 있다. visible: 기본값으로 내용이 잘리지 않음. 넘치는 내용은 밖으로 흘러 넘침. hidden: 내용이 잘림. x축의 스크롤바가 나타나지 않음. scroll: 내용이 잘림. x축의 스크롤바가 나타남. auto: 내용이 잘림. 필요할 때만 x축의 스크롤바가 나타남. display: flex;는 display: block;은 함께 적용시킬 수 없다. element들이 겹치게 하려면 position: absolute; container에 relative 잊지않기! absolute는 가장 가까운 relat..

배울 점, 기억 할 점 저번 과제에서 상단의 ‘Playlist’ 가 가운데 정렬이 잘 안되었다. 이것은 text-align으로도 해결이 가능했다. reset.css : 대부분의 태그에 margin : 0, padding : 0, border : 0 등을 가진 css 파일. 브라우저에 의해 적용되는 스타일을 원하지 않기 때문에. style.css 파일에 @import “reset.css” 적어야함. input이 focus 되었을 때, input의 outline을 제거하려면, outline: none;을 input: focus{} 에 추가한다. 계속 써야하는 색이 있다면 variables.css 파일을 따로 만들어서 :root { ---yellow: #_123123;} 을 적어둔다. 색을 사용할 때는 var..

배울 점, 기억 할 점 id나 class 이름을 지을 때는 너무 일반적인 이름, 자주 사용되는 이름은 지양하기. 이름을 길게 언더바를 이용해서 짓는 것을 추천. ex ) status-bar__column BEM : Block__Element—Modifier class만 사용함. element는 block을 구성하는 단위. modifier는 block이나 element의 속성 담당. 단점은 class가 엄청 커질 수 있다는 것. ex ) block : .search-form element : .search-form__input , .search-form__button modifier : .search-form—color-orange(key-value 타입), .search-form—focused(boole..

배울 점, 기억할 점 position 1. position : fixed 스크롤을 내려도 그 위치에 고정 2. position: relative 엘레멘트가 처음 생성된 위치를 기준으로 top, bottom, left, right로 위치 수정 가능 3. position: absolute 가장 가까운 relative 부모를 기준으로 top, bottom, left, right로 위치 수정 가능 position: relative를 쓰면 부모가 된다. pseudo selector: id나 class 없이 엘레멘트 선택 가능 ex) div:first-child { } 첫번째 자식 div:last-child { } 마지막 자식 span:nth-child(2) { } 2번째 자식 span:nth-child(even)..

배울점, 기억할 점 inline-block는 별로... flexbox 사용 규칙 1. 자식 엘리멘트에는 어떤 것도 적지않는다. 자식을 움직이려면 부모를 flex container로 만든다. 부모를 display : flex; 로 만든다. 2. main axis cross axis x축이 주축, y축이 교차축. justify-content는 주축에 적용. align-items는 교차축에 적용. vh : viewport height 100vh는 100% vh. 창에 꽉 차게. 화면의 크기가 달라도 동일하게. 3. justify-content는 주축에 적용. align-items는 교차축에 적용. 이걸 바꿀 수 있다. flex 했을 때, 디폴트는 row. flex-direction: column 을 했을 때,..

2월 말에 파이썬 2주 완성 챌린지를 했었다. 챌린지를 마친 후, 강의를 듣고 따라하는 것보다 챌린지를 하면서 스스로 문제를 해결하고 모르는 것은 검색하며 더욱 발전할 수 있었다. 그래서 이번 바닐라JS 2주 완성 챌린지를 신청하게 되었다. 바닐라 JS 강의는 미리 한번 들어둔 상태로 챌린지를 진행하였고, 이번 챌린지도 하루도 결석하지 않고 모두 출석하였다. 챌린지를 하면서 공부한 것들을 더욱 오래 기억에 남길 수 있었다. 하지만, 파이썬과 달리 JS는 이번 강의와 챌린지가 처음이었고, HTML과 CSS도 제대로 공부를 하지않아 최종 과제를 제대로 꾸밀 수 없어 아쉬웠다. 그래서 다음 챌린지는 HTML과 CSS를 배우는 코코아 클론 챌린지다!