찐망고'S 퍼블리싱그리고디자인

브라우저에서 보이는 스크롤 자체를 css로 커스텀 할 수 있는데요. 요즘은 일부러 스크롤을 안보이게도 하던데.. 사용자경험 측면에서 스크롤이 없는게 과연 맞는것일까 잠깐 생각해보았습니다 ㅎㅎ https://m.manyo.co.kr/main/index.php m.manyo.co.kr 마녀공장 모바일 사이트 인데요 네비게이션 부분에 스크롤이 보이지 않아요 CSS로 커스텀 하는 경우 IE에선 소용이 없지만 그분은 운명하셨으므로 한번 써볼까요? ㅎㅎ /* 스크롤바 커스텀 css */ .navi-scroll::-webkit-scrollbar { width: 0; /* 스크롤바 너비 */ } .navi-scroll::-webkit-scrollbar-thumb { height: 100%; /* 스크롤바 길이 */ b..

안녕하세요 찐망고입니다. 수업중에 만들어본 boxmodel 테스트 문제인데요. 친구들이 풀면서 고생하길래 블로그에도 공유해봅니다. 아직 초보자 이신 분들 한번 풀어보세요. 아래 문제가 테스트 문제구요~ 제목요소 menu01 menu02 menu03 이용약관 ©copyright 결과이미지를 보고 똑같이 만드는 작업입니다 답은 여기요! 더보기 제목요소 menu01 menu02 menu03 이용약관 ©copyright 2021.12.30 - [WEB/CSS] - box model (박스모델) - border와 padding box model (박스모델) - border와 padding 안녕하세요 찐망고입니다. 오늘은 box model에 관련해서 포스팅을 하려고 합니다~ 카테고리를 HTML로 지정해야 할지 CS..

안녕하세요 찐망고 입니다. 오늘은 Form요소를 CSS를 이용하여 디자인하는 포스팅을 해볼건데요. Form요소들은 기본적으로 본인들의 스타일이 적용되어있는데요 잘 살려서 작업해 보도록 하죠 기본 예시는 selecto웹사이트를 참고하였습니다. 수업 예제로 셀렉토 사이트를 클론코딩 해봤는데요. 오른쪽에 지역검색과 매장명, 매장서비스검색에 체크박스를 디자인해보려구 합니다. // HTML 지역검색 도/시선택 강원 경기 서울 인천 구/군 선택 매장명 02 매장 서비스별 검색 무선인터넷 기능 흡연시설 보유 주차가능 야외테라스 보유 모바일 가맹점 select요소를 이용해서 드롭다운 목록을 만들었는데 처음 보이는 부분의 디자인을 위해 span요소를 감싸주었구요 체크박스는 체크박스형태는 CSS가 가능하지만 체크모양 자체..

안녕하세요 찐망고입니다.  이전글을 읽고 오시길 바랄게요  flex를 배워보자 - 1원래 레이아웃의 시작은 Float이긴 했는데 ie작별인사하시고 굳이 써야되는 상황이 적은 것 같아 레이아웃의 끝판왕(이라고 생각했는데 그리드 레이아웃과 섞어쓰는것이..) flex에 대해서 포스팅uiweb.tistory.com  display: flex를 선언하면 부모요소가 flex-container가 되면서 자식들이 flex-item이 된다고 했는데요 각 flex-item들에게 각각의 속성을 지정할 수 있습니다.  See the Pen flexItem by 찐망고 (@nnwbliyz-the-styleful) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스align-s..

원래 레이아웃의 시작은 Float이긴 했는데 ie작별인사하시고 굳이 써야되는 상황이 적은 것 같아 레이아웃의 끝판왕(이라고 생각했는데 그리드 레이아웃과 섞어쓰는것이..) flex에 대해서 포스팅 해보려 합니다. 워낙 자세하게 나온 포스팅들이 많지만 시작해보겠어요 예전 학생과의 카톡..내용 float를 배우고 flex를 하고 나면 생각보다 너무 편리해서 학생들이 좋아하고 잘 사용하긴 했는데 중요한건 제대로 알고 써야 하니까~ flex는 display 속성 중 하나이고 flex와 inline-flex가 있어요 block과 inline-block개념이라 생각하시면 되고 잘 모르겠으면 일단 보고오... 2021.12.12 - [WEB/HTML] - inline요소와 block요소 inline요소와 block요소..

안녕하세요 찐망고입니다~ 이 포스팅은 며칠 만에 마무리가 될지 모르겠지만 일단 시작해보도록 하겠습니다. 지난번 포스팅에서 제가 박스 모델 관련 padding과 border에 관해서 설명하였는데요~ 2021.12.30 - [마크업/CSS] - box model (박스모델) - border와 padding box model (박스모델) - border와 padding 안녕하세요 찐망고입니다. 오늘은 box model에 관련해서 포스팅을 하려고 합니다~ 카테고리를 HTML로 지정해야 할지 CSS로 지정해야 할지 잠시 고민했어요.ㅎ 일단 제 포스팅은 박스 모델에 관련하 uiweb.tistory.com 오늘은 박스 모델에서 콘텐츠를 기준으로 border 바깥쪽 여백인 margin에 관해 포스팅을 시작할 겁니다. ..

안녕하세요 찐망고입니다.오늘은 box model에 관련해서 포스팅을 하려고 합니다~ 카테고리를 HTML로 지정해야 할지 CSS로 지정해야 할지 잠시 고민했어요.ㅎ  일단 제 포스팅은박스 모델에 관련하여 border나 padding이나 margin을 주는 css표기법을 써보려는 포스팅은 아니고요~전체적으로 박스 모델에서 저런 속성들을 사용했을 때 나타나는 특징?그래서 조심해야 하는 부분을 중점적으로 포스팅하려고 합니다. 저번 포스팅에서 제가 HTML에서 사용하는 요소는 inline요소와 block요소로 나뉜다고 했었는데요 그 각 요소마다 특징이 있었죠??예를 들어 inline요소는 해당 텍스트 콘텐츠만큼 width값을 가진다거나block요소는 컨텐츠 크기와 상관없이 브라우저 너비만큼 width를 가진다거나..

안녕하세요~드디어 3일차 글을 쓰게 된 찐망고입니다. 오늘은 웹에서 사용하기 편한 웹아이콘을 적용하는 방법에 대해서포스팅을 해보려고 합니다. 제가 예전에 자주 쓰던 사이트는 폰트어썸이고...https://fontawesome.com/ Font AwesomeThe world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.fontawesome.com 이번에 포스팅 할 사이트는 https://xpressengine.github.io/XEIcon/ XEIcon, 문자를 그리다XEICon은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이..

안녕하세요~ 작심삼일로 또 끝날것 같지만 매일매일 포스팅하기 이틀 차 찐망고입니다. 오늘은 어제에 이어서 HTML 문서에 글꼴을 적용하는 방법에 대해서 포스팅해보려고 합니다. 이전 글은 아래에서 확인합니다. 2021.07.21 - [마크업/CSS] - 안녕 구글 웹폰트? 아니 폰트에 대해서 안녕 구글웹폰트? 아니 폰트에 대해서 안녕하세요 여러분. 블로그 매일 포스팅한다고 그랬는데... 봐주는 사람은 없지만 굳이 제 의지로 css 카테고리에 두 번째 글을 써봅니다. 먼가 블로그의 컨셉을 잡아야 하는데 존대와 반말을 섞 uiweb.tistory.com 이전 글에선 구글 웹폰트를 이용해서 폰트를 적용하는 방법에 대해서 설명하였고, 오늘은 내 서버에 직접 폰트를 넣어보는? 그래서 적용해보는 작업을 해볼 예정입니..

안녕하세요 여러분. 블로그 매일 포스팅한다고 그랬는데... 봐주는 사람은 없지만 굳이 제 의지로 css 카테고리에 두 번째 글을 써봅니다. 먼가 블로그의 콘셉트를 잡아야 하는데 존대와 반말을 섞어쓰다보니 콘셉트 잡기도 쉽지 않네요.. 저번에 reset.css에 관련된 글을 하나 남겼습니다. 2021.06.30 - [마크업/CSS] - RESET.CSS RESET.CSS 마크업 퍼블리싱하면서 가장 중요한 부분 중 하나는 크로스 브라우징인데.. 각 브라우저마다 html요소가 보이는 부분이 조금씩 다르다 보니...(안녕 ie? 니 얘기야 ios너도... 인마) html의 각 요소를 uiweb.tistory.com 딱히 질문이나 댓글이 없어서 지나감;; 오늘은 HTML문서에서 아주 중요한 역할을 가진 FONT에..