안녕하세요 찐망고입니다. 오늘은 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()`와 같죠 저번 ..
안녕하세요 찐망고입니다. 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 ..
안녕하세요 찐망고입니다. 오늘은 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..
안녕하세요 찐망고입니다. 오늘은 HTML에 첫 글을 올리는 것 같은데요.. 모 HTML 요소 하나하나 설명하는 포스팅을 할까 하다가... 그런 사이트는 많고, 널려있고, 제가 좋아하는 w3School도 있고 해서.. 기본적인 것에 대해 접근을 해보도록 하겠습니다. 그중 첫 번째는 웹 표준 그러니까 크로스 브라우징에 관련된 포스팅입니다. 일단 웹 표준을 말하기 전에 브라우저에 대해 이야길 해봐야 하는데요. 제가 수업시간에 자주 접속하는 사이트가 하나 있어요 https://gs.statcounter.com/ StatCounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share Tracks the Usage Share of Sear..
- Total
- Today
- Yesterday
- 포토샵합성
- uidesign
- css4
- uxdesign
- css그리드
- 디자인팁
- UI디자인
- 크로스브라우징
- Border
- padding
- 반응형웹
- 슬라이드플러그인
- css
- Slick
- 코딩교육
- 웹접근성
- 자바스크립트숫자카운트
- 스마트폰해상도
- 웹디자인
- 피그마플러그인
- CSS3
- 시멘틱마크업
- JavaScriptTips
- margin
- 웹표준
- JavaScript
- slickAPI
- 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 |