전체 글
-
여주 맛집 천서리 막국수촌 강계봉진막국수 편육과 비빔막국수가 맛있는 곳일상/맛있는거먹기 2023. 10. 10. 20:58
여주 천서리막국수촌 원조 맛집 편육과 매운비빔막국수가 맛있는 강계봉진막국수 당남리섬이 코스모스가 폈다고 해서 놀러간날 이 주변엔 천서리막국수촌이 있읍니다 가장 유명한 곳이 이곳 강계봉진막국수 였는데 백종원의 3대 천왕에도 나왔다고 헙니다 강계봉 진 막국수인지 강계 봉진 막국수인지 궁금했는데 차 네비게이션으로 검색하면 봉진막국수인걸 보니 강계 봉진 막국수 인가봅니다 ㅋ_ㅋ 이날은 한글날이었는데 고 담날이 출근날이라 그런가 웨이팅은 없었읍니다 원래 웨이팅도 해야한다고 많은 리뷰에서 보았는데 개이덕입니다 이렇게 주차장도 넓게 있구욤 뒷편에도 이렇게 넉넉하니 많습니다 가게앞 주차방도 자리가 많습니다 주차 걱정 노노입니다 강계봉진막국수의 메뉴! 심플하게 막국수와 편육을 팝니다 저희는 둘이서 ✅비빔막국수 ✅물막국수..
-
CSS background 에 image 넣기 & 옵션 설정하기Web-app/CSS 2023. 10. 9. 20:55
홈페이지에 배경 이미지를 이용해서 꾸미고 싶을 때 옵션들을 조정해보았습니다. background-image를 사용해서 간단한 가라 화면을 만들어보았읍니다. background-size background-position background-origin background-clip 에 대해서 알아봅시다! navigation bar content content * { box-sizing: border-box; } body{ margin: 0; } .nav{ background: black; color: white; position: fixed; top: 0; width: 100%; height: 50px; } .container{ margin-top: 50px; background-image: url("./..
-
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..