코로 넘어져도 헤딩만 하면 그만

오늘의 학습 오늘은 기본적인...이라곤 하지만 상당히 빠르게 css 전반적인 부분들을 훑었다. 선택자 부분은 hover나 nth-child, 그리고 나도 몰랐던 first-of-type같은 것까지 한번에 훑었기 때문에 처음 배운다면 어려웠을 것으로 예상된다(학원에서는 이걸로 실습 계속 하면서 한 3일 배웠던 것 같은디...). 그러고 나서 어제 html로 뼈대를 만들었던 개인홈을 css를 써서 좀더 업그레이드 시키는 과제를 얻었다. 과제를 자신만 보는게 아니라 모두 같이 볼 수 있도록 notion에다가 캡쳐해서 올리는데, 서로의 결과물도 볼 수 있어서 상당한 동기부여가 된다. 생각보다 css 공부 미리 다 하고 온 사람들이 많은 것 같아서 빡 긴장되는 시간이었다. 처음 만들었던 디자인이 마음에 들지 않아..

수업을 집에서 듣지 못할 때 갈 만한 집 앞 도서관을 찾았다. 다만 도서관이다보니 소리내어 말하는 페어 프로그래밍 같은 건 어려울 것 같아서, 근처의 카페도 봐두는 중이다. 잠깐씩 옮겨가면 될 것 같은데... 오늘의 학습 오늘은 자기소개 홈페이지를 작게 만들어보고(css가 없으니 보기엔 별로다.) 전반적인 구조를 짜는 마크업 언어 html 위주로 배웠다. 물론 배운 적이 있다보니 복습이나 다름 없었다. 그런데 생각보다 까먹어버린 부분이 많아서 스스로 충격....... 물론 몇번 꾸준히 하다보면 바로 손이 익을 것 같긴 하다. 사실 좀 어려웠던 건 JS부터니까......... 못한다고 스스로 자괴감 느끼지 않기! 잊어버려도 검색해서 찾으면 되고, 어쨌거나 해본 것과 안 해본 것엔 큰 차이가 있다고 생각한다..

대기번호가 뜬 탓에, 다음 기수 지원하기 전에 분위기라도 살펴보려고 생각 중이었는데, OT날 되기도 전에 합격 통보가 날아와서 상당히 놀랐다. 좋은 기회를 얻었으니 이왕 들어온 거 끝까지 잘 해보자는 마음가짐이다. 이곳에 지원한 이유는, 기본 골자로 짜둔 커리큘럼이 맘에 들어서. 그리고 다른 사람과 계속 교류하고 하나의 문제에 대해 토론한다는 페어 프로그래밍이 매력적으로 느껴졌다. 사실 지원 전에 다른 학원도 4개월 다녀보고 독학도 했었다. 그치만 유사한 목표를 지닌 여럿이 활발하게 교류하면서 같이 공부하고 만드는 경험이 큰 동기부여를 줄 것 같다는 생각이 들었다. 그래서 그런 과정을 가진 코스를 찾아다니다 여기까지 도달하게 되었다. 솔직히 외향적인 편은 아니라 소통이 두렵긴 한데, 모인 분들도 다 비슷..

java script 에서 비동기를 동기적으로 시행하기 위해선 Promise를 써주면 좋다. 회원 인증 같이 서버와 통신해서 인증을 받을 때에는 인증이 먼저, 그 다음 정보 내려주는 순차가 중요해서... 주로 서버랑 통신할 때에 프로미스를 쓴다고 보면 됨. 오류 방지용으로... 프로미스 함수식은 new Promise(function(resolve, reject){ }) 이런 식으로 이루어진다. Promise, 즉 '약속' 은 resolve받다 와 reject거절하다 로 나뉜다. 단, {}안에는 reject나 resolve 중의 하나 조건만 넣을 수 있음. const myPromise = new Promise(function (resolve, reject) { //resolve("약속 지켰다"); setT..

우선 이 효과를 위해서는 svg 파일로 준비된 라인아트가 있어야 한다. 무료 이미지 찾아보려고 노력을 많이 했는데 구하기가 쉽지 않다... AI를 배워서 만드는 게 가장... 이상적이지 않을까? 일단 샘플로 사용된 코드(비상업 무료). man 벡터 이미지는 라인의 좌표를 다 따는 거라서 생각보다 길다... 하여튼... 이제 창을 띄우고, 각 class 들이 어떤 구획을 담당하는지 지워보며 파악한다. 위 코드에서는 cls-5가 선을 담당하고 있고 나머지는 뒷부분의 채색인 것 같다. 구역을 파악했으니 이제 css로 이동해서 조금씩 만져주면 된다. svg { width: 600px; .cls-5 { stroke-width: 6px; stroke-dasharray: 1000; } } stroke로도 여러 설정이..

.pattern { margin: 100px; text-align: center; font-size: 90px; font-family: "Fredoka"; font-weight: 900; } SCSS, CSS로 글씨에 패턴을 입히는 것도 가능하다. 우선 굵은 글씨로 적어둔 뒤 Scss를 연다. 위 코드는 현재 설정이다. 1) 이제 color:transparent; -webkit-text-fill-color: transparent; 를 해준다. 2) 패턴으로 넣고 싶은 이미지를 찾거나 만들어 지정된 이미지 폴더에 미리 저장해둔다. 3) background: url();에 주소로 찾아둔 사진을 링크로 연결해 넣어준다. 4) background-clip: text; 로 바꿔주면 패턴이 텍스트 내부로 들어가는 ..

초창기에는 통용되는 기기들의 넓이가 몇 개로 규격화 되어 있었지만, 지금은 수많은 액정과 모니터가 쏟아져 나오고 있기 때문에 일일이 지정하기가 불가하다. 따라서 '반응형 웹'을 만들 필요성 또한 커졌다. 화면의 크기에 따라 내부 구성요소가 변화하는 반응형 웹은 미디어 쿼리를 적용하여 만들 수 있다. @media media-type and (media-feature-rule) { /* CSS rules go here */ } 이것이 가장 기초적인 미디어 쿼리의 구조다. 'media-type'에는 all, print, tv 등의 '기기 타입'을 지정할 수 있는데 보통 all로 두는 듯 하다. and는 영어로 써야 하고 그 뒤의 ()에 max-width: 1280px 같이 원하는 조건을 삽입한다. min-wi..

클론 코딩을 하던 중, 상단 메뉴를 클릭하면 아래쪽에 원하는 위치까지 자동으로 스크롤이 내려가게 하는 기술을 습득했다. 세로로 긴 페이지를 쓰게 되면 분명 필요할 것이다. 제작한 상단 메뉴는 다음과 같다. gsap을 쓰기 때문에 깔려 있어야 됨. 연혁 역대학장 역대 부학장 scroll-menu에는 위와 같이 세 가지 메뉴가 들어있다. 같은 디자인이기에 ul의 li 구조로 만들어졌으며, 각 li마다 class로 on이 달리면 배경이 파랗게 되고 글자가 하얀 색이 되도록 css 처리를 해둔 상태다. data-target에 대해서는 아래서 설명, 일단 각 파트를 담은 id로 적어뒀다. 우선 scrollMenu를 찾아주고, click 이벤트가 일어날 때 어떤 일이 발생할지 함수로 정해준다. 이 경우 먼저 $(t..