첫 팀 프로젝트로 멤버 소개 페이지를 만들기위해 레퍼런스를 찾아보다가 단색 배경에 크게 이름을 적어둔 포트폴리오를 발견했다.저런 형식으로 접속시 첫 화면에 꽉차게 한 눈에 들어오는 소개를 보여준 뒤 자세한 소개가 보이는 곳으로 자동 스크롤 하고싶다는 생각이 떠올랐다. 최종 결과처음엔 버튼을 눌렀을 때 자동 스크롤되는 기능만 구현했다가, 버튼을 누르지 않고 스크롤 하는 사람들도 자동 스크롤로 넘어가게 하고싶어서 기능을 추가했다.그러다가.. 한참을 여기에 매달리게되고... 괜한 욕심을 부렸나싶어서 조금 후회했다가 그래도 해보고싶어서 열심히 고민에 고민을 거쳐보았다.. 해결한 문제들스크롤을 조금 내린 상태에서 버튼 클릭처음 시작할 때 버튼 클릭으로만 내려가는 것을 가정했다보니 위치를 이동시키는 함수에 시작..
CORS 오류 해결자바스크립트 파일을 분리하기하던 중 일부 조원들은 분리한 기능이 정상적으로 작동하고 일부 조원들은 작동하지 않는 것을 발견했다. 작동하는 조원들은 공통적으로 라이브서버를 사용하고 있었는데, 알아보니 보안상 이유로 type="module" 속성이 붙은 스크립트는 로컬 환경에서 실행이 되지 않는다고 한다. 배포시에는 서버를 사용하기 때문에 라이브서버 환경에서만 되는 것이 큰 문제는 아니라는 피드백을 받아 우선은 다같이 라이브서버를 사용하기로 했다. 해결 방법1) (경우에 따라) module 속성 제거2) 라이브 서버 등 임시 서버 환경 사용 module이 뭔지 정확히 알아봐야겠다는 생각이 들어 좀 더 찾아보았다. module분리된 파일 각각을 module이라고 부른다. 모듈은 파일 하나를..
팀프로젝트 중.. 다른 조원분의 화면으로 작업물을 보며 논의하다가 내가 만든 타이틀 속 글자들이 섞이는 걸 발견했다.팀원분이 반응형웹 폰트 설정을 찾아보라고 팁을 주셔서 빠르게 적용할 수 있었다! 미디어쿼리다양한 디바이스의 뷰포트에 대응하기 위해 사용할 수 있다.@media 키워드로 시작하며, 조건에 해당하는 경우에 적용할 스타일을 지정한다.@media (조건) { // 스타일}생각보다 간단하게 설정할 수 있었다. @media screen and (max-width: 1800px) { .title p { font-size: 5rem; }}@media screen and (max-width: 1200px) { .title p { font-size: 3rem; height: 5rem;..
본격 팀 프로젝트가 시작됐다!내가 해보고싶다한 기능을 구현하기위해 테스트를 해보다가.. 예상치못하게 참고한 코드들이 하나도 이해가 안돼서 ㅎㅎㅎ ㅠㅠ한참을 고민했다..일단 기반이되는 scrollTo()를 먼저 정리해보자! window.scrollTo()문서 내 특정 좌표로 스크롤을 이동한다!SyntaxscrollTo(x, y);scrollTo(({top: y, left: x, behaviour: option}); x, y값은 이동할 거리(단위: 픽셀), behaviour는 움직임에대한 옵션을 설정할 수 있다. behaviour 옵션smooth: 부드럽게 이동instant: 한번에 이동auto: smooth를 지원하지 않는 경우, 브라우저에서 지원하는 방식으로 스크롤 (대부분 목표 위치로 즉시 이동)beh..
position요소를 배치할 기준점을 정하는 속성이다! staticHTML 요소의 기본 위치이다. position: static인 요소는 top, bottom, right, left를 지정해줘도 이동하지 않고 원래 위치에 배치된다. relative요소의 기본 위치를 기준으로 설정된 값만큼 top, bottom, right, left 방향 이동한다.position: relative;top: 50px;left: -100px; 왼쪽이 위치를 설정하지 않은 기본 상태, 오른쪽이 위 코드를 적용한 상태이다.top 에서부터 +50px만큼 좌표가 이동하고 left에서부터 -100px만큼 이동한 것을 볼 수 있다. absolute부모 요소 중 가장 가까운 relative 요소를 기준으로 이동한다.이미지 위의 특정 위..
자주 쓰다보면 익숙해지겠지만.. 아직은 조금 헷갈려서 CSS 선택자 문법을 정리해보았다.작성한 것들 외에도 더 활용할 수 있는 것들이 있다! 기본 선택자자식 선택자선택자의 직계 자식들을 선택하여 스타일을 적용한다..container > * { } // .container의 직계 자식 전체를 선택.container > div { } // .container의 직계 자식인 div만 선택한다. 자식 요소의 자식 중에 div가 있는 경우 해당하지 않음 자손 선택자선택자의 직계 자식을 포함하여 모든 하위 요소들을 선택한다.즉, 자식의 자식의 자식까지도 포함된다..container div { } // .container 하위의 모든 div를 선택 인접 형제 선택자선택자의 바로 다음 형제 요소를 선택한다.같..