Dev/Style13 [CSS] ul ol 글자만 왼쪽 정렬하기 문제 상황 ol을 사용해서 만든 리스트를 가운데에 정렬을 시키려고 하다보니, 아래 캡쳐화면처럼 들쑥날쑥하게 정렬되었다. 숫자는 고정시키고 전체를 가운데에 놓고 싶었다. 해결 방법 flex box를 사용하면 된다. (간단) li에 text-align을 left로 설정해주면 글씨를 왼쪽으로 정렬시킬 수 있고, ol을 가운데에 놓아주면 된다. let Ordered = styled.ol` display: flex; flex-direction: column; `; let Pops = styled.li` text-align: left; `; 끝! 2022. 10. 24. [HTML] input 태그 클릭시 자동 줌인되지 않게 하기 올해 초에 만들었던 맛집 검색기를 배포했을 때, 한 개발자분께서 피드백을 주셨었다. input 태그 누르게 되면 폰트사이즈가 작을 때 자동으로 줌인을 시키는 부분이 있는데요 이 부분이 사실 사용자성을 많이 떨어뜨려서 지양하고 있는 부분입니다 참고 부탁드려요! input 태그, 그러니까 검색창을 누르면 자동으로 화면이 확대가 되는 것이었다. font-size가 16이하면 자동으로 확대가 된다고 한다. 피드백을 받고 나서 다시 사용해보니, 확대가 되고 나서 입력을 받은 후에도 계속해서 확대된 상태로 화면이 유지되었다. 따라서 그 때마다 화면을 다시 축소 시켜줘야 했기 때문에 불편했다. 이를 해결하는 방법은 다양하지만, 나는 그냥 폰트 사이즈와 인풋의 크기 자체를 고정시켜주었다. + 다른 방법들 https:/.. 2022. 10. 8. [CSS] body 윗부분 빈 칸 없애는 법 CSS 작업을 하던 중, 상단 네비게이터 부분의 윗부분이 창 상단과 떨어지는 문제가 있었다. const HeadWrap = styled.div` ... top: 0; ... `; top을 0으로 주면 위에 붙게 할 수 있다. 생각보다 간단한 문제였다. 2022. 10. 1. [CSS] 클릭 이벤트가 있으면 커서 모양 바꾸기 개인 포트폴리오 사이트를 만든 후 코드 리뷰 과정에서 클릭 이벤트가 있는 부분 위에 마우스가 올라가면 커서 모양이 바뀌면 더 좋을 것 같다는 피드백을 받았다. 아무래도 커서 모양이 그대로 유지되다 보니, 그 부분을 클릭했을 때 외부 링크로 연결된다는 것을 잘 모를 수 있겠다는 생각이 들었다. 리액트로 작업해서 CSS에는 styled-components를 사용했는데, 그냥 CSS에도 적용되는 것인지는 잘 모르겠다. const Menu = styled.p` ... &:hover { cursor: pointer; } `; 위와 같이 추가해주면, 메뉴 스타일을 지정해준 컴포넌트 위에 마우스 호버시 커서 모양이 손가락 모양으로 바뀐다! 2022. 10. 1. 이전 1 2 3 4 다음
