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

안녕하세요 찐망고입니다. 전에 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을 입력하라는 창이 뜹니다 저기에 이미지를 업로드하고 해당 폰트 영역을 선택하면~~~ 짠~~ 이렇게 리스트 형태로 뜹니다. 이 이미지를 업로드해서 쿼터 이상 구매 시라는 텍스트 박스를 눌러봤거든요. 프리텐다드 폰트가 딱? 물론 정확한 폰트가 아닐 확률이 더 높긴 하지..

안녕하세요 찐망고 입니다. 오늘은 웹내비게이션에 대해 알아보려 합니다. 웹사이트에 접속한 사용자가 현재 위치와 이동경로를 파악할 수 있도록 돕는 내비게이션은 매우 중요합니다. 이는 사용자가 빠르게 원하는 목적을 달성할 수 있도록 도와주죠. 내비게이션은 그 구성에 따라 여러 단계로 나누어집니다. 예를 들어 사이트는 노란색 컬러에 해당하는 1단 메뉴를 눌렀을 때 빨간색에 해당하는 2단 메뉴가 나오고 빨간색을 기준으로 파랑계열의 3단 메뉴가 나옵니다. 이처럼 3단계 내비게이션은 깊이가 있지만, 너무 많은 단계는 사용자에게 혼란을 줄 수 있어 피하는 게 좋습니다. 반응형 사이트를 설계할 때는 PC와 모바일에서 내비게이션을 어떻게 표현할지 고민해야 합니다. 때로는 한 개의 내비게이션을 공유하고, 때로는 두 개의 ..

안녕하세요 찐망고입니다. 오래간만에 swiper관련 포스팅을 하네요. 오늘은 pagination의 블릿 모양 대신 텍스트로 나오게 작업을 해볼까 합니다. 마녀공장을 클론코딩한 학생의 swiper슬라이더인데요. 텍스트를 클릭해서 화면을 넘기고 싶은 거죠 ㅎㅎ 여러 방법이 있으나 저는 배열을 이용해서 작업했습니다. const bullet = ['마녀공장', 'GS25']; const swiper01 = new Swiper ('.work-slider, { loop: true, pagination: { el: '.work-slider .swiper-pagination', clickable: true, renderBullet: function (index, className) { return '' + (bulle..

브라우저에서 보이는 스크롤 자체를 css로 커스텀 할 수 있는데요. 요즘은 일부러 스크롤을 안보이게도 하던데.. 사용자경험 측면에서 스크롤이 없는게 과연 맞는것일까 잠깐 생각해보았습니다 ㅎㅎ https://m.manyo.co.kr/main/index.php m.manyo.co.kr 마녀공장 모바일 사이트 인데요 네비게이션 부분에 스크롤이 보이지 않아요 CSS로 커스텀 하는 경우 IE에선 소용이 없지만 그분은 운명하셨으므로 한번 써볼까요? ㅎㅎ /* 스크롤바 커스텀 css */ .navi-scroll::-webkit-scrollbar { width: 0; /* 스크롤바 너비 */ } .navi-scroll::-webkit-scrollbar-thumb { height: 100%; /* 스크롤바 길이 */ b..

안녕하세요 찐망고입니다. 오늘은 html문서에 이미지를 불러와볼 건데요. 문서에 이미지를 불러오는 요소들을 모두 포스팅해볼게요.. 이미지 맵은 따로 포스팅하도록 하겠습니다. 어떤 요소를 사용하든 이미지를 불러오려면 역시 경로가 중요합니다. 상대경로와 절대경로 안녕하세요 찐망고입니다. 오늘은 경로를 포스팅해볼까 하는데요. 경로를 사용하는 경우 대부분은 문서에 링크를 걸거나 이미지를 띄울 때 많이 사용합니다. 경로가 틀어지지 않아야 링크도 잘 uiweb.tistory.com 1. 요소 이미지요소는 경로를 통해 문서에 이미지를 불러올 때 사용하는 가장 기본적인 요소인데요. alt속성을 꼭 같이 넣어줘야 합니다. 웹접근성에 어긋나지 않기 위해서죠. 스크린리더기에서 해당 이미지를 alt속성에 사용한 값으로 읽어줍..

안녕하세요 찐망고입니다. a요소는 문서와 문서를 연결하거나 이미지를 클릭하여 페이지가 넘어가거나 메일을 보내거나 같은 페이지끼리 위아래로 연결하려고 할 때도 사용합니다. a는 인라인 요소지만 블록요소를 포함할 수 있는 요소이며 블록요소를 포함할 땐 css를 이용하여 display: block; 혹은 inline-block을 지정해서 width, height, margin, padding을 적절히 잘 넣는 게 중요합니다. 일단 문서끼리 연결을 하려면 경로를 이해해야 하는데 경로 모르면 안 되니까 이전 포스팅 보고 오시길 바랍니다 상대경로와 절대경로 안녕하세요 찐망고입니다. 오늘은 경로를 포스팅해볼까 하는데요. 경로를 사용하는 경우 대부분은 문서에 링크를 걸거나 이미지를 띄울 때 많이 사용합니다. 경로가 틀..