전체 글
-
CSS property float와 clear 알아보기Web-app/CSS 2023. 10. 9. 09:40
float란? 콘텐츠의 컨테이너에서 왼쪽에 위치시킬지 오른쪽에 위치시킬지 정할 수 있는 옵션 설정 시 텍스트는 콘텐츠 주변을 감싸게 됨. none element가 float 되지 않음. left element가 컨테이너의 왼쪽에 float되게 됨. right element가 컨테이너의 오른쪽에 float되게 됨. inline-start* element는 컨테이너의 시작 부분에 float 되게 되며, ltr(left to right) 문서에서는 왼쪽 / rtl(right to left)문서에서는 오른쪽을 의미 inline-end* element는 컨테이너의 끝 부분에 float 되게 되며, ltr(left to right) 문서에서는 오른쪽 / rtl(right to left)문서에서는 왼쪽을 의미 특히 ..
-
CSS property overflow 알아보기 & 실습Web-app/CSS 2023. 10. 8. 19:15
overflow property란? 컨텐츠를 담고 있는 부모의 element가 컨텐츠를 다 담지 못할 때 어떻게 표현할 것인가를 지정해주는 옵션 value의 종류 visible (default) 초과된 컨텐츠는 클리핑(마스킹)되지 않고 부모 element 밖으로 나와 볼 수 있는 상태. 부모는 스크롤되는 element가 아님. hidden 초과된 컨텐츠가 부모의 컨테이너 박스에 클리핑(마스킹)되며 가려져서 보여지지 않는 상태. 스크롤되지 않으며 가려져 보여지지 않는 것이지 컨텐츠는 그대로 보이게 됨. clip 초과된 컨텐츠는 overflow-clip-margin property를 이용해서 클리핑 (마스킹)됨. default 값은 0px이며, px을 조절하면 초과될 범위에서 특정 px만큼 더 보이게 됨. ..
-
CSS position property 알아보기Web-app/CSS 2023. 10. 8. 10:35
position propery란? element를 html document내 어떻게 배치하는지 설정하는 property value : static(default) / absolute / relative / fixed / sticky 실습해보기 1. static default 옵션, position과 함께 많이 쓰는 z-index의 경우 default는 0으로 지정되어 있음. 2. absolute 부모 중 position이 정의되어 있는 element를 기준으로 어디에 위치할지 지정할 수 있으며, 현재 document flow에서 벗어나게 됨. 아래 예제에서 만약 content class에 position relative가 없으면, position fixed로 정의되어 있는 navigation bar를 기..
-
이천 모가면 테르메덴 맛집 미국식 브런치를 파는 더그린가든 (tgg!)일상/맛집 2023. 10. 3. 19:58
미국식 브런치 카페 더그린가든 🕰️영업시간 오전 11시~ 오후 8시 30분, 월요일 휴무 ✅아메리칸 브렉퍼스트는 11시~12시에 주문 가능! ✅브런치 메뉴외에도 맛있는 베이커리류도 한가득 팔고 계심! 즐거운 테르메덴 가는 길 점심먹고 가려고 주변에 맛집들을 살펴보았는데 이천 모가면에 오면 꼭 가봐야할 곳 중 민한우정육식당이 1티어지만!! 추석때 소고기를 먹기도했고 부렁치가 땡겨서 이곳 더 그린가든에 오게되었읍니다 가게 앞도 깔끔허고 먼가 미국냄새..! 납니다!! 하지만 뒤를 돌아보면 논과밭이 있고 현대 기아차가 다니는 여기는 모가면!! 주차장은 가게 뒷편에 이렇게 넓게 있습니당 커피 케익 샌두위치 와인!! 팔고 있다는 뜻 영업시간은 네이보에서는 오후8시 30분까지라 되어있었긴했고만요 정원을 넘 잘 꾸며두..
-
CSS 기초, 기본 구성과 결합자 종류 알아보기Web-app/CSS 2023. 9. 28. 15:33
CSS 코드의 기본 구성 Selector는 tag, id, class 등 바꾸고자 하는 타겟 Properties는 바꾸고자 하는 옵션, Value는 그 옵션의 값 일반적으로 CSS는 부모의 스타일이 자식에게 상속 (inheritance) 여기에 다양한 Rules를 추가하면서 자연스럽게 충돌하게 되는데, 이걸 잘 설계해서 스타일이 잘 적용될 수 있도록 하는 것이 핵심 반영 순서 1) tag 2) class 3) id 4) inline style (html 코드에 직접 style 코드 넣기) 4로 갈수록 가장 먼저 적용 하지만 inline style의 경우 코드 유지 보수하기 힘듬 결합자 (Combinators) See the Pen CSS practice by woongwoongs (@woongwoongs..
-
CSS hover시 채워지는 메뉴 버튼 구현하기Web-app/CSS 2023. 9. 24. 14:49
React에서 Main Navigation을 구현 하던 중, menu 버튼에 마우스를 대면 색깔이 채워지는 효과를 만들고 싶었읍니다. React에서는 a태그 대신 NavLink를 넣으면 css에서 자동으로 a태그로 인식이 되어 사용하믄 됩니당 1. box shadow + inset을 활용한 구현 box shadow를 transition하면서 색을 채우는 방식, 어디서 부터 shadow를 채울지 지정해주고 shadow의 색을 원하는 색으로 채워줍니다. See the Pen a css hover example by woongwoongs (@woongwoongs) on CodePen. 2. css before 를 사용한 구현 See the Pen Untitled by woongwoongs (@woongwoon..
-
4박 5일 일본 여행 총정리, 다카마쓰 우동투어부터 오카야마 히메지 교토 간사이 여행여행/일본 다카마쓰 오카야마 히메지 2023. 9. 20. 00:36
4박 5일 간사이 여행 총정리 간사이 와이드패스 여행으로 즐긴 다카마쓰 - 오카야마 - 히메지 - 교토 무더운 여름이었지만 고만큼 싱그러웠던 여름 일본 여행 4박 5일의 성인 2명 여행이었습니당. 준비물 1) 여행자 보험 - 카카오페이 손해보험을 이용했습니당. 원래 마이뱅크를 이용했는데 카카오페이 손해보험도 가격과 보장내용이 나쁘지 않아 이용해보았습니다. 무사히 귀국하면 환급금 신청이 가능해서 기부니가 좋았읍니다. 2) 이심과 유심, 간사이와이드패스 - 현대 PRIVIA 몰이 간사이와이드패스를 살 수 있는 가장 저렴한 곳이었읍니다. 23년 9/30까지 인당 7만원에 구매 가능하며, 국제 유가가 올라서 패스 가격들도 오른다고 하니 간사이 여행을 하실분들은 미리 사시면 추천합니당! 10월 1일부터는 거의 1..
-
세종 나성동 맛집 분위기 좋은 브런치 카페 스테이인터뷰 나성일상/맛집 2023. 9. 12. 09:33
카페 스테이인터뷰 나성점 🕰️ 영업 시간 : 10:00~22:00, 단 브런치는 라스트오더 14:50 ✅ 특징 : 단체석 있음! 날씨 좋은 날 야외 좌석 추천! 깐부네 놀러간 날 점심때 부렁치 먹고싶어서 부렁치 집으로 고고! 나성동에 맛있는 부렁치 집이 많았는데 그중에서 스테이인터뷰를 가보았읍니다 부렁치로 유명한 체인이더라구욤?! 내부도 좌석이 꽤 많았는데 야외에도 좌석이 많습니당 날씨가 좀 선선해서 야외에서 먹기로 결정!! 군데군데 야외 좌석이 많습니당 저희는 잉글리시 브렉퍼스트 (16,000원) 프렌치토스트 (13,000원) 와 커피 주문! 주문하면 진동벨을 주십니당 이렇게 8명 단체석도 있습니당 인테리어도 예쁨니당 화장실은 다른 건물 통해서 가야하는데 세면대는 이렇게 가게 안에 있습니당 구경 다하고..