display:grid 간단 사용법과 grid로 반응형 하는 법 오늘은 저번 flex에 이어 grid를 알아보겠습니다.flex는 1차원(선) 컨텐츠에 적합하고, grid는 2차원(면) 컨텐츠에 적합합니다. flex와 grid가 무엇이 다르냐 여쭤보시면 직관적인 설명으로는 아래 구조를 보여드릴 수 있을 것 같습니다.대부분의 사이트는 flex로 구현할 수 있습니다.그러나 2번째 예시 같은 구조는 반응형까지 고려하였을 때 그리드로 만드는 게 무척 편합니다. 그럼 이어서 알아두면 쓸모 많은 grid에 대해 설명해 드리겠습니다.아래 설명에서 “중요”라고 적은 속성들만 우선 외워두시거나 메모해 두시면 큰 도움이 될 겁니다.실제 사용 예시바쁘신 분들은 아래 CodePen 코드만 보셔도 됩니다!0.25x와 0.5x를 통해 코드창에서 반응형을 체험하실 수 있습니다.Grid 레이아웃 .. 2024. 11. 18. display: flex;에 대해 알아봅시다 오늘은 display: flex;에 대해 알아보겠습니다.최종적으로는 flex를 통해 display: gird;를 소개해드리는 것이 목표입니다.grid에 관한 설명은 다음 글에서 이어서 하겠습니다.grid를 이해하기 위해서는 먼저 flex를 이해해야합니다.flex는 가로나 세로로 컨텐츠를 배치할 수 있는 CSS 속성입니다.1차원(선)이 flex, 2차원(면)이 gird라고 이해하면 편합니다.그러나 flex-wrap을 사용해서 flex도 면과 같이 사용할 수 있고 grid도 1차원적으로만 사용할 수 있기 때문에 정확한 설명은 아닙니다.flex 이전에는 float라는 속성을 사용했습니다.float: right; float: left;를 사용해서 컨텐츠를 좌에서 우로, 우에서 좌로 흐를 수 있도록 했었지요.가끔.. 2024. 11. 17. 아웃룩 사용 팁 + 토틀 프로그램 추천 저는 업무 중 아웃룩을 사용하고 있습니다.아웃룩은 무겁고 복잡하기에 진입 장벽이 다소 있는 편입니다.하지만 사용하다 보면 아웃룩만한 메일 프로그램도 없기에 여러분이 아웃룩과 좀 더 친해지기를 바라는 마음으로 글을 적어보겠습니다.클래식 아웃룩과 새 아웃룩 동시에 열기:최근 마이크로소프트가 새 아웃룩(웹 기반의 아웃룩)으로 넘어가려고 다양한 시도를 하는 것이 보입니다.새 아웃룩으로 넘어가지 않겠냐는 팝업부터, 우측 상단에 계속해서 눈에 띄는 “새 아웃룩으로 전환” 버튼이 바로 그것입니다.하지만 인터페이스나 기능의 이유로 클래식 아웃룩을 사용하셔야 하는 분들도 있습니다. 그리고 간간히 새 아웃룩을 써야 하는 상황이 있을 수도 있지요.이때 아래 방법을 참고해 보시기를 바랍니다.윈도우 시작 버튼 클릭 > Outl.. 2024. 11. 16. 겔럭시 탭 S9 언박싱 + 구매 이유 반갑습니다.오늘은 최근 구매한 갤럭시 탭 S9의 언박싱과 왜 지금 시기에 S9을 구매하였는지 적어보려 합니다.요 몇 달 테블릿이 왠지 모르게 있으면 좋겠다는 생각이 계속해서 들었습니다.사봐야 영상이나 보고 필기 좀 한다는 것을 저는 이미 알고 있었기 때문에 "태블릿이 과연 내게 진짜 필요한가?"라는 질문을 스스로에게 꾸준히 던졌습니다.예상보다 생각할수록 사야할 이유는 꽤 있었습니다.태블릿을 사야 하는 이유:개발 시 반응형 작업을 할 때 태블릿이 있으면 좀 더 편리한 개발 경험을 가져다줄 것이다.넷플릭스와 유튜브를 구독하고 있으니 테블릿이 있다면 구독료가 훨씬 가치 있을 것이다.외출 시에 세컨드 모니터로 사용할 수 있을 것이다.일기를 테블릿에 적어 앞으로 종이 노트와 작별할 수 있을 것이다. 테블릿을 사지.. 2024. 11. 15. 스크롤 바를 변경하거나 안 보이게 하는 코드 앱을 보면 스크롤 효과는 대부분 보이지 않게 처리합니다.대신 UI로 컨텐츠가 더 있음을 암시하는 방법이 더 선호되는 것 같습니다. (특히 가로 스크롤은 대부분 보이지 않게 처리하지요.)물론 케바케이지만 스크롤 바가 이쁘지 않거나 거추장스러워서 빼고 싶어 하는 디자이너 분들을 많이 뵈었습니다. 이런 디자이너 분들의 요구에 맞는 코드를 가져왔습니다.앱에 익숙한 요즘 사람들에게 비슷한 사용 환경을 제공하기 위해서 스크롤 바를 변경하거나 보이지 않게 처리하는 코드는 아래를 참고해 주시기 바랍니다.body 태그를 스크롤이 생기는 요소로 치환하면 바로 사용하실 수 있습니다!/* 스크롤 바 변경 */body::-webkit-scrollbar { width: 3px; /*스크롤 바의 너비*/ } body::-webki.. 2024. 11. 14. 자주 쓰는 기초 JS코드(JQuery 포함) 모음 저는 깃허브에 메모장으로 쓰는 프로젝트가 하나 있습니다.해당 메모장 프로젝트에 자주 쓰는 코드를 적어두고 필요할 때마다 꺼내 쓰고는 합니다.이전에 사용한 코드를 옛날 프로젝트에서 꺼내오려면 한 참 찾아야 하거나 머리가 복잡해져서 자주 쓰는 코드들은 정리해 두는 편입니다.지금까지 만났던 개발자 분들 중 생각보다 많은 분들이 이전 프로젝트에서 코드를 가져오시거나 그때그때 인터넷을 찾는 모습을 확인할 수 있었습니다.일하다 보면 뇌 램 용량이 부족하기에 최대한 효율적으로 일할 수 있도록 이렇게 자주 쓰는 코드들은 외우거나 항상 복사할 수 있도록 준비를 하시면 좋습니다.(메모장 프로젝트는 꼭 Private로 만드시기를 바랍니다. Public으로 설정하고 가끔 키나 비밀번호를 올리시는 경우가 있습니다. 위험하니 꼭.. 2024. 11. 13.
