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

안녕하세요 찐망고입니다.드디어..드디어 CSS가 추가로 지정되는 속성 없이 코드 한 줄로 요소를 수직정렬하는 기능이 생겼네요. 과거 요소들을 수직정렬하기 위해(특히 center) 행했던 수많은 수직정렬의 역사들이 주마등처럼 스쳐 지나가네요. 새로 코드가 생긴 건 아니고, 원래 flex나 grid에서 사용했던 CSS코드였는데요.flex나 grid 없이 사용이 가능하게 되었습니다. (와! 짝짝짝)align-content: center; 테스트를 여러 번 해보니 기본 좌우 정렬해서 수직정렬하는 건flex나 grid를 사용하면 될 것 같고a링크요소들처럼 버튼처리해서 만드는 요소들은 수직정렬하기가 편하겠어요. center 외 start, end로 값을 지정할 수 도 있겠지만 안 쓸 거 같죠..?크롬 123, 파이..

안녕하세요 찐망고입니다. CSS에서 min() 함수와 max() 함수는 반응형 웹 디자인에서 매우 유용하게 사용할 수 있는데요.vw단위를 많이 쓰고 있는 이 시점에서 CSS속성 값을 동적으로 계산할 수 있게 도와줍니다.  min() 함수 역할: 주어진 값들 중에서 가장 작은 값을 반환합니다. 주로 너비나 높이 혹은 폰트사이즈에서 최솟값을 지정할 때 사용합니다.사용예시:.tit { font-size: min(3vw, 20px)} min(3vw, 20px)은 3vw와 20px 중 더 작은 값을 폰트 크기로 사용한다는 뜻으로, (vw는 뷰포트 너비의 1%를 의미합니다.) 화면이 너무 넓어서 3vw가 20px보다 크게 된다면, 폰트 크기는 20px로 고정될 거고, 반대로 화면이 좁아서 3vw가 20px보다..

안녕하세요 찐망고 입니다. 히어로 섹션에 동영상을 삽입하는 건 이젠 기업 웹사이트의 트렌드가 되었잖아요?그만큼 동영상은 웹사이트의 첫인상을 좌우하는 중요한 요소가 되었습니다. 그래서 제가 관련 포스팅도 몇 개 했었죠? iOS 에서 동영상 재생이 안되나요?안녕하세요 찐망고입니다.아주 간단하지만 제법 많이 질문하는 부분이라 미리 포스팅을 해볼까해요.요즘 기업사이트 추세가  히어로섹션에 영상을 많이 넣더라구요.거의 국룰이랄까..영상을uiweb.tistory.com  youtube iframe 연결하여 자동 재생하기안녕하세요 찐망고입니다. 전에 ios에서 동영상 재생 관련 포스팅을 했었는데요. 읽어보시는 걸 추천합니다. iOS 에서 동영상 재생이 안되나요? 안녕하세요 찐망고입니다. 아주 간단하지만 제법uiweb..

안녕하세요 찐망고입니다.오랜만에 reset문서를 수정해 봅니다.  1. 기본 HTML 요소의 초기화목적: 모든 기본 HTML 요소의 여백과 패딩을 제거하고, 기본 글꼴 스타일을 초기화.코드:html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strong, sub, sup, var,b, u, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,arti..

안녕하세요 찐망고입니다. 이전에 그라디언트를 이용하여 마우스 hover할때 밑줄 애니메이션 효과를 적용하는 포스팅을 한적이 있는데요. 마우스 호버 CSS 밑줄 효과, CSS hover 밑줄 애니메이션안녕하세요 찐망고입니다. 오늘은 마우스 hover시 텍스트에 밑줄이 들어가는 작업을 해볼 거예요 https://hobancf.or.kr/ 호반문화재단 Creating culture, connecting hearts. www.hobancf.or.kr https://www.yesan.go.kr/chusa.duiweb.tistory.com 오늘은 텍스트에 배경색이 아래서 위로 채워지는 효과를 포스팅 할 예정입니다. 예시 사이트를 보면 스크롤 이동시 텍스트에 배경색이 채워집니다.     CSS코드h2 { color..

안녕하세요 찐망고입니다.  CSS에서 그라디언트는 background-image 속성으로 적용됩니다. 그러나 그라디언트는 직접적인 값의 변화가 아니라, 하나의 이미지처럼 렌더링 되기 때문에CSS의 `transition` 속성을 사용해도 그라디언트의 색상이나 위치가 부드럽게 변화하지 않습니다.그래서 그걸 해결하려면!! 가상 요소를 사용하기 가상 요소(::before 또는 ::after)를 사용하여 기존 요소 위에 그라디언트를 덮고, opacity 속성을 이용해 부드럽게 보였다 안보였다 하도록 설정합니다. .element { position: relative; width: 200px; height: 200px;}.element::before { content: ""; position: absolut..

안녕하세요 찐망고입니다.CSS의 너무 기초적인 부분을 포스팅하려고 합니다. CSS(Cascading Style Sheet)란 웹 페이지의 겉모습을 정의하고 꾸미는 데 사용되는 스타일 시트 언어인데요. 주요 기능은 다음과 같습니다:  레이아웃 정의: 페이지의 구조와 배치를 지정합니다.스타일 설정: 텍스트의 글꼴, 색상, 크기 등을 지정합니다.디자인: 배경, 테두리, 여백 등을 설정하여 페이지의 시각적 디자인을 조정합니다.반응형 디자인: 다양한 장치(데스크톱, 태블릿, 스마트폰 등)에 맞게 레이아웃과 스타일을 조정합니다.   CSS는 기본적으로 선택자(Selector)와 선언(Declaration)으로 구성되며, 선언은 속성(Property)과 값(Value)으로 이루어집니다. h1 { color: ..

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