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

안녕하세요 찐망고입니다. 오늘은 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..