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;..
화면을 가득 채운 메인 타이틀에서 컨텐츠가 있는 영역으로 자동스크롤 하는 기능을 구현하기 위해 요소의 하단 위치(스크롤이 이동할 위치)를 가져오는 방법을 알아보았다. JavaScript상단 위치 (top offset)위치를 가져올 요소를 지정한 뒤 offsetTop 프로퍼티로 가져올 수 있다.content 영역이 아닌 padding ~ border까지 포함된 가장자리 위치를 가져온다.const destination = document.querySelector(".dest").offsetTop; 하단 위치상단 위치에서 요소의 높이만큼 더해준다.요소의 높이는 offsetHeight 프로퍼티로 받아올 수 있으며, 마찬가지로 padding, border까지를 포함한다.const el = document.quer..
본격 팀 프로젝트가 시작됐다!내가 해보고싶다한 기능을 구현하기위해 테스트를 해보다가.. 예상치못하게 참고한 코드들이 하나도 이해가 안돼서 ㅎㅎㅎ ㅠㅠ한참을 고민했다..일단 기반이되는 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를 선택 인접 형제 선택자선택자의 바로 다음 형제 요소를 선택한다.같..