고지은고

모달 UI 작업하다 발견 한 획기적인 scroll css라 생각하여 정리를 해둬야겠다. 모달 컴포넌트 내부에는 모달 콘텐츠 컴포넌트가 존재한다. 모달 콘텐츠 컴포넌트 하위에 존재하는 버튼을 클릭하면 스크롤은 부모인 모달 컴포넌트의 최상단까지 올라가야 했다. 기존의 로직에서 버튼과 같은 클릭 요소에 이벤트를 주어 스크롤을 내가 원하는 곳에 위치 시키려면 버튼에는 스크롤 관련 이벤트를, 스크롤을 위치 시키고 싶은 곳에는 특정 Id를 주면 가능했다. // scroll 아이디가 존재하는 element로 스크롤 위치를 이동시켜준다 const handleClickScroll = () => { const element = document.getElementById('scroll') if (element) { elem..

최종 프로젝트 목표 중 하나였던 반응형 웹 구현하기 미디어 쿼리를 배워본 적도, 사용해본 적도 없던 터라 바로 구글링을 했다 모바일퍼스트, 데스크톱 퍼스트 등 웹페이지를 구현할 때도 처음에 고려해야 할 사항이 많다는 걸 다시 느꼈다 요즘은 모바일로 접속하는 횟수가 많기 때문에 모바일퍼스트 추세라고는 하지만 아직 데스트톱을 기준으로 웹페이지를 구현하는 곳도 많다고 한다. 만약 모바일퍼스트로 웹앱을 구현하고 싶다면, 모바일 기준으로 먼저 페이지를 구현 후 차츰차츰 태블릿, 웹브라우저 등 페이지를 구현해야 한다고 한다. 우선 head 태그에 meta viewport를 설정해줘야 해서 위의 meta viewport태그를 선언해줘야 한다 content에 작성된 의미는, width=device-width : 화면의..

프로젝트를 진행하면서 로그인하거나 그 외에 alert창을 띄울 때, 디자인을 추가하고 싶다는 생각을 하다가 발견 한 sweetalert! 사용법이 매우 매우 간단하다 터미널에 직접 설치하는 방법도 존재하지만 난 jsp 페이지에 script를 추가하는 방식으로 사용하였다 사용 방식은, alert 대신 swal을 사용해줘야 한다. swal('타이틀', '내용', '아이콘'); 형식으로 작성해주면 되는데, 밑에 실제로 내가 사용 한 예제를 추가해봤다 swal('로그인 성공!', data.login.result.name+"님 로그인되었습니다.", 'success') swal('로그인 실패!', "아이디와 비밀번호를 확인해 주세요", 'warning'); 그런데 이런 식으로 만 작성하면 OK 버튼을 클릭하기도 전..

Sass와 Scss는 CSS의 PreProcesseor로 CSS의 전처리기 역할을 한다 단순한 스타일링을 주는 CSS에 변수를 담아놓고 조건문을 사용하는 등 프로그래밍적으로 CSS를 사용 가능하게 만든다 Sass와 Scss는 거의 같다고 볼 수 있는데 Scss가 상위 호환 버전이며 사용이 더 권장되는 편이다 둘 다 CSS와 자유롭게 호환이 가능하지만 왜 Scss의 사용이 권장되는 편 일까? 우선, 공식 사이트에서도 Scss 문법 기준의 설명이 있으며 문법적으로 CSS와 같아서 익숙하게 배우는 게 가능하다 또한 Sass는 CSS와 Scss에서 사용하는 {} 중괄호와 ; 세미콜론 대신 들여 쓰기 및 줄 바꿈으로 대신 사용하기 때문에 이 요소들이 매우 중요하며 여러 줄을 사용하면 에러가 발생한다. 물론 Sas..

폰트 및 컨테이너 크기를 지정할 때 사용하는 단위는 여러 가지가 있는데, 정적인 부분은 px, 동적인 부분은 %, viewport(vh, vw), em, rem이 존재한다 px 모니터 위에서 화면을 나타내는 가장 작은 단위이며 반응형으로 사용하기는 힘들어서 정적인 웹페이지에 사용한다. 컨테이너 사이즈 변경되어도 콘텐츠의 크기는 변경 없이 그대로 고정되어 있기 때문이다 또한 픽셀로 폰트 크기를 변경하는 경우, 브라우저에서 폰트 크기를 변경해도 아무런 반응을 하지 않음 (아예 고정되어있음) 이는 웹 접근성이 떨어진다고 볼 수 있다. em 같은 폰트사이즈라 하여도, 사용하는 폰트 패밀리에 따라 사용자에게 보이는 크기가 달라질 수 있는데 em은 폰트패밀리에 상관없이 항상 고정된 폰트 사이즈를 갖고 있다 em은 ..

항상 align-items만 사용해오다가 최근 수업에서 정렬에 대해 공부하면서 align-content와 align-self에 대해서도 알게 되었다. 오늘은 align-content와 align-items에 대한 정확한 차이점과 CSS에서 요소를 개별 정렬하기 위해 align-self는 어떻게 사용해야 하는지에 대해 정리해보겠다 우선 align-items는 축의 수직 방향을 기준으로 정렬이 된다. 각 옵션은 위의 이미지를 참고하면 이해하기 편할 것이다. align-content도 이와 비슷한 것 같지만 조금 다른 점이 존재한다 align-items는 한 줄을 기준으로 정렬하는 반면, align-content는 두 줄부터 사용하는데 의미가 있다 그래서 align-content의 경우, 두 줄의 flex-w..