![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/DuNyD/btsHtSNpGZ0/hKS0hK3ci7NiIGUJQVjHH0/img.png)
안녕하세요 찐망고입니다. 오늘은 CSS에 clip-path를 이용하여 사다리꼴 이미지 형태의 선택영역을 만들어볼 건데요.이전에는 상상도 할 수 없던 디자인들이 요새는 쏟아져 나오네요. 😀 a와 b섹션이 나뉘어 있고, 각각 클릭하면 새창으로 넘어갑니다.선택영역을 사다리꼴모양과 일치하게 만들어야 하는 거죠그 이전엔 불가했던 작업이지만,아! 이미지 맵을 쓰면 되었으려나.. 하지만 이미지 맵은 반응형으로 만들 수 없어요 바로 작업해 볼까요 각 단락에 해당하는 링크를 걸어주고 * { margin: 0; padding: 0;} body { background-color: #f0f0f0;}.container { width: 100%; height: 100dvh; positi..
안녕하세요 찐망고 입니다.오늘은 `:where()`셀렉터 관련 포스팅을 해볼건데요. `:where()`와 `:is()`는 둘다 CSS4초안에 소개된 새로운 기능입니다.이전글에서 `:is()`셀렉터 관련 포스팅을 보고 오시길 추천합니다. CSS의 :is() 클래스 활용하기안녕하세요 찐망고입니다. CSS의 `:is()` 함수는 CSS의 단점이었던반복되는 셀렉터의 형태를 더 간결하게 그룹화하는 의사클래스입니다. 아래 예시를 볼까요?ul li,ol li {}:is(ul, ol) li {} 위에 있는uiweb.tistory.com `:where()` 셀렉터는 여러개의 셀렉터를 한꺼번에 그룹화 할 수 있으며, 셀렉터의 구체성을 0으로 만듭니다.셀렉터를 한꺼번에 그룹화한다 그건 `:is()`와 같죠 저번 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/B6fKR/btsHorhHHEF/8tJnkwu2xoDumIj6tXSXvK/img.png)
안녕하세요 찐망고입니다. CSS의 `:is()` 함수는 CSS의 단점이었던반복되는 셀렉터의 형태를 더 간결하게 그룹화하는 의사클래스입니다. 아래 예시를 볼까요?ul li,ol li {}:is(ul, ol) li {} 위에 있는 각각의 li요소를 선택할 때 :is() 클래스를 사용하면 묶어서 처리가 가능합니다. 다중선택에 특화된 셀렉터이죠:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) { color: #BADA55;}section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article..
안녕하세요 찐망고입니다. CSS의 `:not()` 함수는 특정요소를 제외한 나머지 요소들을 선택할 수 있는 선택자입니다. 아래 예시를 볼까요? list01 list02 list03 list04.list li:not(.list02) { background-color: orange;} list02 클래스를 가진 두 번째 li요소를 제외한 나머지 li요소들에게 오렌지색 배경이 지정됩니다. 다음 예시를 보면not실렉터를 이용하여 하나의 클래스가 아닌 여러 개의 클래스를 선택할 수 있습니다.body :not(h1, h2, h3, h4, h5, h6) { color: gray;}body요소 중 제목요소들을 제외하고 컬러를 그레이로 지정합니다. not실렉터를 이용하여 특정 타입의 입..
안녕하세요 찐망고입니다. CSS의 `:has()` 함수는 특정 자식 요소를 가진 부모 요소를 선택할 수 있게 해줍니다.이것은 이전 CSS선택자에선 할 수 없는 것들을 가능하게 해주는데요. 아래 예시를 볼까요? Child1 Special Child Child2 .parent:has(.special) { background-color: yellow;} 위 코드에서 `.special` 클래스를 가진 두번째 `.parent` 요소가 선택 되어 배경색이 바뀝니다. 다음 예시도 볼까요? menu depth.. menu depth.. menu ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bpwCRr/btsGI6dLiwt/1HOV9k1FM3idpvNP9Yxgm1/img.png)
안녕하세요 찐망고입니다. 오늘은 position속성 중 sticky를 써볼 건데요.. position관련 CSS를 포스팅 해놓은 게 없네요? 이런;; html에서 포지션역할은 여러 가지가 있습니다. 잘 쓰면 너무 좋은 데 absolute를 남발하는 개발자들 보면 단전에서부터 화가.. 요즘은 그러신 분 안 계시죠? sticky를 아직 안 써본 분이 계시려나.. 아마 ie에선 지원을 안 해서 쓰고 싶어도 못쓰는 그런일들이 있었죠. sticky속성은 relative와 fixed가 같이 적용된다고 생각하면 되는데요. https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky W3Schools online HTML editor The W3Sch..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cfuJfk/btsGDJRvwbi/FiWHFNMBQVsi4pQh100TVK/img.png)
안녕하세요 찐망고입니다. 이전에 xeicon관련 포스팅을 했었는데요. 드디어 다음 포스팅을.. 2021.07.23 - [WEB/CSS] - 웹에서 사용가능한 웹아이콘 적용방법 - XEIcon 웹에서 사용가능한 웹아이콘 적용방법 - XEIcon 안녕하세요~ 드디어 3일차 글을 쓰게 된 찐망고입니다. 오늘은 웹에서 사용하기 편한 웹아이콘을 적용하는 방법에 대해서 포스팅을 해보려고 합니다. 제가 예전에 자주 쓰던 사이트는 폰트어썸 uiweb.tistory.com 요즘은 워낙 svg가 대세이긴 해서 웹에서 사용하는 아이콘들이 svg가 많은데요. 아직도 곳곳에선 xeicon이나 구글아이콘 폰트어썸 등을 사용합니다. 구글아이콘은 사용하기는 편한데 종류가 별로 없어서..ㅎㅎ 워낙 다른 블로그 포스팅에 html을 이용..
안녕하세요 찐망고입니다. 오늘은 폰트 단위 관련 포스팅을 시작해볼게요 HTML에서 단위는 상대적인수치와 절대적인수치로 나뉘는데요. div { width: 200px; height: 200px; font-size: 16px; } div > span { display: block; width: 100%; height: 80%; font-size: 1em; } span이 div의 자식이라고 가정할 때 %는 부모요소의 크기를 기준으로 들어갑니다. width와 height모두 200px이 되겠죠? 본인이 absolute인 경우엔 relative의 크기를 상속받기도 합니다. 참고로 height요소를 %로 지정할 경우 무조건 상속받을 부모에게 높이값이 존재해야 합니다. px말고 가장 많이 사용하는 폰트 단위는 em과..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/mdBkC/btsGDA6GgvE/mzkt7PaMELh0pmZD7J5Kjk/img.png)
안녕하세요 찐망고입니다. 오늘도 간단한 그리드레이아웃을 연습한 샘플을 보여드릴게요.일단 그리드 레이아웃이 처음이라고 한다면 이전글을 보고 오시고.. CSS Grid Container 속성CSS Grid Layout-1 안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 하는데요. 수업 중에는uiweb.tistory.com CSS Grid Items 속성CSS Grid Layout-1 안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 하는데요. 수업 중에는uiweb.tist..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/c7LIEi/btsGw89VAuI/tMszJWYuPq7b3webSL1mc1/img.png)
안녕하세요 찐망고 입니다. 오늘은 모바일 뷰포트 관련 이야기를 포스팅 해볼게요 vw와 vh는 뷰포트 너비와 높이를 이야기합니다. 폰트나 여백이나 길이의 단위를 뷰포트 단위를 사용하게 되면, 아무래도 브라우저 사이즈에 영향을 받겠죠? 1vw는 뷰포트 너비를 기준으로 100분의 1인데 만약 브라우저 사이즈가 1850px이라면 1vw는 18.5px이라고 생각하면 됩니다. 1vh는 뷰포트 높이를 기준으로 100분의 1이고 브라우저 높이에 따라 변하겠죠? 요소 높이에 100vh를 주게 되면 전체 높이에 꽉 차게 작업을 할 수 있는데 모바일에선 이슈가 좀 있습니다. 모바일 주소 표시줄 영역 때문인데요. 저렇게 주소표시줄 때문에 밀리는 현상 많이 보셨나요? ㅎㅎ 그래서 풀페이지 사이트 만들 때도 저런 현상들 때문에 ..
- Total
- Today
- Yesterday
- JavaScript
- Slick
- UI디자인
- 피그마플러그인
- 자바스크립트숫자카운트
- 웹접근성
- 반응형웹
- uxdesign
- 프로그래밍기초
- Border
- 디자인팁
- 코딩교육
- css그리드
- margin
- 시멘틱마크업
- css4
- 웹표준
- 스마트폰해상도
- 슬라이드플러그인
- css
- 포토샵합성
- 크로스브라우징
- uidesign
- slickAPI
- padding
- CSS3
- JavaScriptTips
- 웹디자인
- boxmodel
- uiux
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |