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

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..

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..

안녕하세요 찐망고입니다.요즘 버튼모양 테두리에도 그라디언트가 들어가는 디자인을 보게 되는데요.쉽게 테두리에 그라디언트를 적용해 보겠습니다.   그라디언트는 원래 image의 영역이에요.그래서 본디 배경색에 그라디언트를 넣는 경우에도 background-image로 적용했거든요.  See the Pen Untitled by 찐망고 (@nnwbliyz-the-styleful) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 a요소의 테두리만 그라디언트로 보이기 위해a요소 자체에 배경이미지로 그라디언트를 넣고,span요소에도 배경색을 넣고 width와 height를 2px씩 줄여서 테두리처럼 보이게 만드는 방법이 있습니다 ㅎㅎ  물론 지금은 border자..

안녕하세요 찐망고입니다. 오늘은 HTML에서 정의 목록을 만들 때 사용하는 dl, dt, dd 요소에 대해 알아볼까요? 정의 목록이란?: description list의 약자로, 정의 목록을 나타냅니다.: description term의 약자로, 정의할 항목(용어)을 나타냅니다.: description description의 약자로, 용어에 대한 설명을 나타냅니다.사전을 예로 들으면 좀 쉬울까요? 사전에서 단어와 그 뜻을 나열하는 방식과 비슷합니다. 예를 들어, 사전에 "사과"라는 단어와 그 뜻을 설명하는 것처럼 말이죠.    dl 요소 안에 들어가는 dt와 dd의 구성은 다양한 방법이 가능합니다.  기본 사용법먼저 기본적인 사용법을 간단한 예제로 살펴보겠습니다. 사과 사과는 빨간색 또는 초록색의 ..

안녕하세요 찐망고 입니다.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: break-wo..

안녕하세요 찐망고입니다. 전에 ios에서 동영상 재생 관련 포스팅을 했었는데요. 읽어보시는 걸 추천합니다. iOS 에서 동영상 재생이 안되나요? 안녕하세요 찐망고입니다. 아주 간단하지만 제법 많이 질문하는 부분이라 미리 포스팅을 해볼까해요. 요즘 기업사이트 추세가 메인 비주얼 섹션에 영상을 많이 넣더라구요. 거의 국룰이랄까.. uiweb.tistory.com 요소는 웹 페이지에 비디오를 표시하는 데 사용됩니다. 영상을 업로드할 때는 사용하는 코드 이 controls속성은 재생, 일시중지, 볼륨과 같은 비디오 컨트롤을 추가합니다. width 및 height속성을 포함하는 것이 좋은데, 높이와 너비가 설정되지 않으면 비디오가 로드되는 동안 페이지가 깜박일 수 있기 때문입니다. 요소를 사용하여 비디오 타입을 ..

안녕하세요 찐망고입니다. 오늘도 그리드 레이아웃을 이용한 포스팅을 해볼 건데요. 일단 grid에 관련된 이전글 하나 보시고 2023.12.29 - [WEB/CSS] - CSS Grid Layout-1 CSS Grid Layout-1 안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 합니다. 수업 중에는 하나의 섹션을 uiweb.tistory.com 바로 시작해봅시다!! 컬러들이 많죠? 지금 저 레이아웃 같은 경우엔 줄은 세줄 칸은 네 칸으로 나눌 수 있겠죠? 저번 포스팅에서 area에 이름을 지정해서 작업해 봤으니까 오늘은 display: grid가 적용된 그리드 컨테이너의 각 자식들에게 start와 en..

안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 하는데요. 수업 중에는 하나의 섹션을 Flex로도 짜고, Grid로도 짜서 비교해 보긴하는데 포스팅을 그렇게 하면 너무 길어질 테니까 각각의 속성을 알아보고 그리드로 짜는 템플릿을 좀 보여드릴까 해요. 그리드를 이용한 반응형 예제로 하단의 두 섹션을 작업한 포스팅을 올려볼까 해요 기대되죠?? ㅎㅎ 자 일단 저런 걸 해보려면 그리드의 기본 속성들을 알아봐야 합니다. 아 참고로 우리나라 웹 사이트 레이아웃 형태상 전체를 그리드로 짜는 건 저는 비추.. 그런 건 블로그 형태의 템플릿이나 웹진같이 좀 간단한 형태면 모를까 추천하지 않아요 그래서 연습도 그런 걸로 ..

안녕하세요 찐망고입니다. 디자인 어렵죠? 이론적인 게 머리에 충만해도 막상 흰 창을 보면 머부터 시작해야 할지 막막하고 그래서 조금 쉽게 풀어보고자 해요. 제품상세페이지디자인! 상세디자인이라고 하는 그 이미지들. 기억나네요.. 2006년인가 지마켓에 옥수수 판매 상세페이지를 만들어달라던 농부님.. 그때 당시엔 뭣도 모르고 내 눈에 이쁘고 내 눈에 이쁘면 그만이지 하는 마음으로 작업했는데.. 지금 생각해 보면 참.. 그 이후로 상세디자인 작업을 종류별로 참 많이 해봤는데요.. 이번 포스팅엔 전체적인 구성을 기획하여 작업하면 좋을지에 대해 포스팅해볼게요.. 레퍼런스는 각종 채널에서 확인이 가능하죠? 저는 와디즈와, 네이버스토어, 쿠팡을 많이 보는데요. 특히 와디즈 베스트 펀딩 상세페이지들은 정말 좋은 레퍼런..

안녕하세요 찐망고입니다. 가끔 이벤트 상세디자인이나 배너들을 보다 보면 어떤 폰트를 사용했는지 궁금한 디자인들이 있더라고요 저만 그런 거 아니죠? 저 폰트는 뭘까 하고 고민하면서 구글링 해보니 비슷한 폰트를 찾아주는 사이트가 있어 포스팅해 봅니다. https://www.sandollcloud.com/#schpop 산돌구름 폰트가 필요할 때 언제 어디서나! www.sandollcloud.com:443 링크에 접속하면 이미지를 업로드하거나 url을 입력하라는 창이 뜹니다 저기에 이미지를 업로드하고 해당 폰트 영역을 선택하면~~~ 짠~~ 이렇게 리스트 형태로 뜹니다. 이 이미지를 업로드해서 쿼터 이상 구매 시라는 텍스트 박스를 눌러봤거든요. 프리텐다드 폰트가 딱? 물론 정확한 폰트가 아닐 확률이 더 높긴 하지..