반응형 분류 전체보기163 [ CSS 응용 ] CSS Media Query를 활용한 반응형 디자인 가이드 반응형 웹 디자인은 현대 웹 개발에서 필수적인 요소로 자리 잡았습니다. 사용자들은 다양한 기기와 화면 크기에서 웹 페이지를 열람하므로, 모든 장치에서 최적화된 사용자 경험을 제공해야 합니다. 이를 위해 CSS Media Query를 활용하여 반응형 웹 디자인을 구현할 수 있습니다. CSS Media Query란 CSS Media Query 는 미디어 타입과 특정 조건에 따라 CSS 스타일을 적용하는 기능입니다. 미디어 타입은 화면, 프린터, 휴대폰 등 다양한 장치를 지정할 수 있으며, 조건은 화면 너비, 해상도, 방향 등을 포함할 수 있습니다. 미디어 유형 all 모든 장치에 적합 print 인쇄 용도, 인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서 screen 컴퓨터 스크린을 위한 용도, 주로 .. 2024. 3. 19. [ CSS 응용 ] 비율에 맞추어 div 반응형 만들기 영역의 크기를 설정할때 특정한 비율로 반응형(화면 줄이거나 확대)때에도 유지가 되었으면 할때가 많습니다. 이럴때 사용할 수 있는 CSS코드를 알려드립니다. padding을 이용한 비율 조정 1:2 1:1 4:3 16:9 1.5:1 padding을 이용한 비율 조정은 부모객체의 width값을 기준으로 삼습니다. 위 코드를 보면 부모 객체인 container가 있고 그 안에 5가지의 box 클래스의 div를 넣었습니다. 각각 1:2, 1:1, 4:3, 16:9, 1.5:1 비율을 주기 위해 개별 클래스도 적용하였습니다. 기준을 삼는 부모객체의 width값은 최대 500px을 가지고 있으며 width: 100%를 주어 반응형이 가능하도록 적용하였습니다. 그 자식객체에서는 padding을 이용해 높이값을 줄 수.. 2024. 3. 16. [ CSS 응용 ] 마우스 오버 시 확대 되는 카드 리스트 CSS를 이용해 마우스 hover 시 디자인을 변경할 수 있는데, 그 중 요즘 카드 스타일의 디자인을 많이 사용하고 있어 카드 리스트에 마우스를 오버시 카드가 확대되는 형태를 예시로 만들어 보겠습니다. HTML코드 Card 1 Card 2 Card 3 Card 4 Card 5 Card 6 Card 7 Card 8 Card 9 Card 10 우선 html 코드로 전체적인 레이아웃을 설계합니다. 전체 container 안에 card_list의 div를 두고 그안에 총 10개의 card div 객체를 만들었습니다. 각 card 안에는 실질적인 카드 내용을 만들 card_inner의 객체를 두었습니다. 이후 스타일을 가지고 전체 card_list로는 리스트의 크기와 레이아웃을 설계할 예정이고, card는 크기와.. 2024. 3. 15. [ jquery 응용 ] 스크롤 시 상단 고정 메뉴 만들기 사이트를 제작하거나 컨텐츠를 제작할때 자주 사용되는 스크롤 할때 브라우저 상단에 고정되는 메뉴를 만들어 볼까 합니다. 최초부터 상단에 붙어 있는 메뉴도 있겠지만, 저는 중간에 고정이 될 메뉴가 있는 영역이 상단에 붙으면 그때부터 고정되어 같이 내려오는 형태로 제작을 해보려 합니다. HTML 코드 스크롤 상단 메뉴 고정하기 menu 1 menu 2 menu 3 menu 4 스크롤 영역 html 코드는 우선 페이지에 대한 구조를 설정합니다. 상단에는 header라는 클래스를 가진 영역에 텍스트가 있고, 그 밑에 tabs라는 div영역을 메뉴라고 생각하고 해당 영역을 스크롤 시 고정되는 영역으로 만들어 보려합니다. 그리고 contents라는 영역은 충분한 스크롤이 가능하게끔 height값을 만들어주기 위한 영.. 2024. 3. 15. [ jquery 응용 ] scrollTop animate 버튼 구현하기(Top버튼) 우측 하단 '위로 가기' 버튼 (Top버튼) 모바일이나 다른 사이트에서 자주 보이는 탑버튼은 어떻게 구현될까요? 요즘 스크롤을 많이 사용하는 사이트들이 많기도 하고 모바일에서 물론 상단으로 이동하는 기능들이 기종/브라우저 별로 가지고 있지만 사이트의 편리 기능으로 아직까지 많이 사용하는 기능입니다. 단순하게 버튼을 누르면 짠(!) 하고 바로 위로 이동하는 앵커형태로 사용할 수 도 있지만, 정적인것보단 약간의 애니메이션 효과를 추가하여 최상단 일때는 불필요하기에 감추고, 스크롤을 시작하면 버튼을 보여주고, 눌렀을때는 최상단까지 스르륵 올라가도록 구현해 보겠습니다. HTML 코드 위로 우선 내용은 없지만 전체를 감싸는 'container'라는 클래스로 객체를 만들고, 그 안에 'topBtn' 이라는 아이디를.. 2024. 3. 14. 인천 논현동 아이와 갈만한 곳, 마더스룸 키즈카페 주말에 가족들과 함께 원래는 다른 곳에 가서 동물원을 가던 아쿠아리움을 갈 예정이었는데, 저희 딸은 그냥 놀이터가 좋은가 보더라고요;; 주말 오전에 찡찡 거리고 있어서 왜그런가 했더니 아침부터 놀이터 가고싶다고 찡찡찡 놀이터가 예전처럼 야외에 있는 놀이터를 가고싶다는게 아니란 사실을 최근에 알아버렸죠 😂 그래서 또 동네에 자주 가던 키즈카페 말고 이번엔 다른곳에 가서 놀아보자 하여 와이프와 함께 폭풍 검색 시작! (검색하며 느낀건 키즈카페 정말 많다;;😪) 가까운 인천논현에 소래포구역 근처에 마더스룸 키즈카페가 이번에는 당첨! 출발 해봤습니다~ 마더스룸 키즈카페 운영시간 : 수, 목, 금 - 13:00 ~ 19:30 토, 일 - 10:00 ~ 19:00 (매주 월, 화 정기휴무) 입장료 : 어린이(평일).. 2024. 3. 13. 아이와 함께 갯벌 체험하기, 선재 어촌 체험 마을 아이와 색다른 경험을 해보고 싶으신가요? 매번 키즈카페나 놀이터를 다니다가, 조금 다른 체험을 시켜주면 좋겠다 싶어서 찾던 중 처가댁 식구들과 함께 가까운 서해쪽으로 가면 갯벌 체험을 하면서 바지락을 가져올 수 있다고하여 주말에 출동하였습니다! 선재어촌체험마을 운영시간 : 09:00 ~ 18:00 (체험시간은 공식 사이트 공지사항 참고) 입장료 : 12,000원 (매표소에서 구매, 트랙터, 호미&통 포함 / 추가 장화, 장갑 등 추가 대여&구매 가능) 3세 미만 무료 도착해서 매표소에서 입장할 인원만큼 입장권을 구입 후 저희는 장갑은 집에 있는걸로 가져가서 사용하였고, 장화는 딸아이와 여성분들은 비올때 신는 장화로 대체하였습니다. 만약에 없다면 매표소쪽에서 대여를 하고 있으니 대여하여 들어가도 됩니다. .. 2024. 3. 5. 아이가 행복하게 뛰어놀기 좋았던, 퍼플 주니어 키즈 카페 아이가 요즘들어 한번씩 놀이터를 가고싶다란 이야길 하는데, 확실히 다른게 놀이터가 밖에 있는 야외 놀이터가 아니라 어쩌다 한번씩 어린이집에서도 가봤던, 키즈카페를 놀이터라고 부르더라고요 😲 동네에는 작은 키즈카페뿐이라 옆동네에 있는 생긴지 얼마 안되었다던 정보를 와이프가 접수하시고 바로 출동해 보았습니다. 인터넷에 찾아보니 다른 지역에도 있는 프렌차이즈 키즈카페 였네요 ( 와우👍 ) 퍼플주니어 키즈카페 서창 영업시간 : 매일 11:00 ~ 21:00 가격 : 어린이 2시간 17,000원, 부모 3,000원 건물내 주차장 이용 아이 미끄럼 방지 양말 필수! 부모도 양말 필수! 처음 입장할때 직원분이 양말을 체크하시더라고요. 제가 모르고 슬리퍼 신고 가다보니 양말을 안챙겨 갔었는데, 입장이 안되어서 내려가서.. 2024. 2. 19. 아이와 처음 같이 만들어본 눈사람 이번 겨울 참 눈 많이오네요. 사진첩을 뒤지던 중 크리스마스 이브날 눈이 꽤 많이 내려서 같이 눈사람을 만들었던 사진을 찾았네요~😁 쬐금 눈을 굴려서 동그랗게 키워 놓고 아이에게 줬던니 열심히 눈에 살을 붙여 봅니다 ㅎㅎ 손도 발도 시릴법 한데 제법 열심히 하고 있죠? 😍 처음에는 눈사람 만들러 가자고 했더니, 막상 별로 안하고 싶었나봐요. 그래서, "열심히 만들어놔야 산타할아버지가 만든거 가져가시고 더 좋은 선물 주실껄?" 했더니 그때부터 눈빛이 빤짝빤짝 🤩🤩 ㅎㅎ 저희가 집 뒷편 주차공간에서 눈을 굴리다가 옆에 공원이 있어서 가봤더니, 다른 또 한가족이 나오셔서 열심히 눈사람을 만들고 계시더라고요 ㅎㅎ '저 집 아저씨도 고생이구나 😂' 하지만 또 한편으론, '저 집보다 크게 만들어야할텐데..' ㅋㅋ .. 2024. 2. 15. 이전 1 2 3 4 5 ··· 19 다음 반응형
