![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/EHjm9/btsGq3ov4e7/pL1gHz3MszkX9aP2Ap85gk/img.png)
안녕하세요 찐망고입니다. 오늘은 마우스 hover시 텍스트에 밑줄이 들어가는 작업을 해볼 거예요 https://hobancf.or.kr/ 호반문화재단 Creating culture, connecting hearts. www.hobancf.or.kr https://www.yesan.go.kr/chusa.do 추사기념관 추사 김정희의 지혜와 고고함이 배어있는 예산군 추사고택 추사기념관 www.yesan.go.kr 저런 밑줄 효과를 주기 전에 기본적으로 css를 이용하면 여러 가지 방법으로 밑줄을 나오게 할 수 있는데요. 아래 네 가지 방법이 있습니다. text-decoration border-bottom ::before나 ::after 사용 background-image를 이용한 그라디언트 사용 첫 번째 방..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/b9S5BV/btsEm9i5UwE/ZKt6KYukXYpIYf5ndCUCEk/img.png)
CSS Grid Layout-1 안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 하는데요. 수업 중에는 하나의 섹션 uiweb.tistory.com CSS Grid Layout-2 안녕하세요 찐망고입니다. 오늘도 그리드 레이아웃을 이용한 포스팅을 해볼 건데요. 일단 grid에 관련된 이전글 하나 보시고 2023.12.29 - [WEB/CSS] - CSS Grid Layout-1 CSS Grid Layout-1 안녕하세요 찐망고입 uiweb.tistory.com 안녕하세요 찐망고입니다. 오늘은 그리드 아이템 속성만 따로 정리하는 포스팅입니다 ㅎ Grid Items 속성 Grid Items 속성 뜻 grid..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/b9yukf/btsEhUg2Qb5/bep3T4ufyUPblhozaxVk20/img.png)
CSS Grid Layout-1 안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 하는데요. 수업 중에는 하나의 섹션 uiweb.tistory.com CSS Grid Layout-2 안녕하세요 찐망고입니다. 오늘도 그리드 레이아웃을 이용한 포스팅을 해볼 건데요. 일단 grid에 관련된 이전글 하나 보시고 2023.12.29 - [WEB/CSS] - CSS Grid Layout-1 CSS Grid Layout-1 안녕하세요 찐망고입 uiweb.tistory.com 안녕하세요 찐망고입니다. 이전에 그리드 레이아웃에 대한 포스팅을 올렸는데요. 오늘은 그리드컨테이너 속성만 따로 정리하는 포스팅입니다 ㅎ displ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/nhEqo/btsDUeyx7QB/6FHMna54PI6LVlLvjfiuK0/img.png)
안녕하세요 찐망고입니다. 요즘 버튼모양 테두리에도 그라디언트가 들어가는 디자인을 보게 되는데요. 쉽게 테두리에 그라디언트를 적용해 보겠습니다. 그라디언트는 원래 image의 영역이에요. 그래서 본디 배경색에 그라디언트를 넣는 경우에도 background-image로 적용했거든요. HTML 삽입 미리보기할 수 없는 소스 a요소의 테두리만 그라디언트로 보이기 위해 a요소 자체에 배경이미지로 그라디언트를 넣고, span요소에도 배경색을 넣고 width와 height를 2px씩 줄여서 테두리처럼 보이게 만드는 방법이 있습니다 ㅎㅎ 물론 지금은 border자체에 border-image가 적용 가능 하므로 HTML 삽입 미리보기할 수 없는 소스 그라디언트가 들어가는 게 보이죠? border-image-slice는 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/d8cMfV/btsDBRd1ddt/NsOT8oWkQag1ODrbnnHX11/img.png)
안녕하세요 찐망고 입니다. css로 줄임말 만드는 포스팅을 했던것 같은데 글이 없어서 포스팅을 시작해봅니다. 때마침 한줄 줄임말과, 여러줄 줄임말이 딱 보이는 예제를 해서 😊 css 한줄 주석 /* 한줄주석 */ width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow: hidden; 적용시 width값은 필수 white-space: nowrap; 이용하여 해당 텍스트들이 한줄로 나오게 처리 text-overflow: ellipsis; 말줄임표시 css 여러줄 주석 /* 세줄 주석 */ width: 100%; overflow: hidden; text-overflow: ellipsis; word-break: b..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/DskXm/btsAKb5SIsM/flg7jz9y1ujpXEul4QX5p0/img.png)
안녕하세요 찐망고입니다. 오늘도 그리드 레이아웃을 이용한 포스팅을 해볼 건데요. 일단 grid에 관련된 이전글 하나 보시고 2023.12.29 - [WEB/CSS] - CSS Grid Layout-1 CSS Grid Layout-1 안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 합니다. 수업 중에는 하나의 섹션을 uiweb.tistory.com 바로 시작해봅시다!! 컬러들이 많죠? 지금 저 레이아웃 같은 경우엔 줄은 세줄 칸은 네 칸으로 나눌 수 있겠죠? 저번 포스팅에서 area에 이름을 지정해서 작업해 봤으니까 오늘은 display: grid가 적용된 그리드 컨테이너의 각 자식들에게 start와 en..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/2jlQa/btsAIJvwPbw/KcovB0dTeUQT1vLFxVOnQ1/img.png)
안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 하는데요. 수업 중에는 하나의 섹션을 Flex로도 짜고, Grid로도 짜서 비교해 보긴하는데 포스팅을 그렇게 하면 너무 길어질 테니까 각각의 속성을 알아보고 그리드로 짜는 템플릿을 좀 보여드릴까 해요. 그리드를 이용한 반응형 예제로 하단의 두 섹션을 작업한 포스팅을 올려볼까 해요 기대되죠?? ㅎㅎ 자 일단 저런 걸 해보려면 그리드의 기본 속성들을 알아봐야 합니다. 아 참고로 우리나라 웹 사이트 레이아웃 형태상 전체를 그리드로 짜는 건 저는 비추.. 그런 건 블로그 형태의 템플릿이나 웹진같이 좀 간단한 형태면 모를까 추천하지 않아요 그래서 연습도 그런 걸로 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cIrO9f/btsxgdsH5tn/T74CsGpYqaU8iAmfaEMBCK/img.png)
브라우저에서 보이는 스크롤 자체를 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..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/1q3ag/btstffATMQm/1XIQiBlMqkTOdTR4T9w4jK/img.png)
안녕하세요 찐망고입니다. 수업중에 만들어본 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..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/lNTjc/btsn27vYT4O/WGueD3itwSTKKmVpbjwn00/img.png)
안녕하세요 찐망고 입니다. 오늘은 Form요소를 CSS를 이용하여 디자인하는 포스팅을 해볼건데요. Form요소들은 기본적으로 본인들의 스타일이 적용되어있는데요 잘 살려서 작업해 보도록 하죠 기본 예시는 selecto웹사이트를 참고하였습니다. 수업 예제로 셀렉토 사이트를 클론코딩 해봤는데요. 오른쪽에 지역검색과 매장명, 매장서비스검색에 체크박스를 디자인해보려구 합니다. // HTML 지역검색 도/시선택 강원 경기 서울 인천 구/군 선택 매장명 02 매장 서비스별 검색 무선인터넷 기능 흡연시설 보유 주차가능 야외테라스 보유 모바일 가맹점 select요소를 이용해서 드롭다운 목록을 만들었는데 처음 보이는 부분의 디자인을 위해 span요소를 감싸주었구요 체크박스는 체크박스형태는 CSS가 가능하지만 체크모양 자체..
- Total
- Today
- Yesterday
- Slick
- 포토샵합성
- margin
- 웹표준
- Border
- 반응형웹
- 웹디자인
- 스마트폰해상도
- uiux
- css
- 프로그래밍기초
- 슬라이드플러그인
- uxdesign
- 디자인팁
- CSS3
- uidesign
- JavaScriptTips
- css4
- 피그마플러그인
- 코딩교육
- slickAPI
- boxmodel
- 크로스브라우징
- padding
- 자바스크립트숫자카운트
- css그리드
- 시멘틱마크업
- 웹접근성
- JavaScript
- UI디자인
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |