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

안녕하세요 찐망고입니다. html요소 중 인용에 해당하는 두 요소가 있는데요 긴 인용문은 요소를, 짧은 인용문은 요소를 사용합니다. 는 블록레벨요소이고, 다른 웹페이지나 문서에서 인용한 텍스트를 표시할 수 있습니다. 홍범도 한말의 독립운동가. 만주 대한독립군의 총사령군이 되어 일본군을 급습하여 전과를 거두었다. 독립군 본거지인 봉오동 전투에서 독립군 최대의 승전을 기록하였으며, 청산리 전투에서는 제1연대장으로 참가하였다. 그 후 항일단체들의 통합을 주선하여 대한독립군단을 조직, 부총재가 되었으며, 고려혁명군관학교를 설립했다./p> [네이버 지식백과] 홍범도 [洪範圖] (두산백과 두피디아, 두산백과) 요소에는 제목요소인 h요소나 문단요소인 p요소와 같은 블록요소를 자식으로 포함할 수 있고, 시멘틱요소들도 ..

안녕하세요 찐망고입니다. 오늘은 문단을 정의하는 p요소에 대해 포스팅할 건데요. P는 Paragraphs를 뜻하고, 단락이라고 하죠? 블록요소입니다. 문단, 단락은 문장이 모여 문단이 된다고 하죠? 하나의 중심 생각을 나타내는 덩어리라고 생각하면 될 건데요. 우리는 책을 쓸건 아니니까, p요소가 실제 웹사이트에서 어떻게 쓰이는지 봐야겠죠? 나는 문단이다아아아아 라고 대놓고 보이는 곳이라면 당연히 p요소를 주저 없이 쓸 수 있을 테지만 아무래도 웹사이트는 그러지 못한 경우 가 많다 보니 고민을 해봅니다. 빨간 박스로 쳐놓은 부분이 저 정도는 p요소를 사용해도 무방하다는 뜻이고요 웹표준 코딩이란 게 요소의 의미에 맞춰 마크업을 하는 걸 뜻하니 다른 요소들을 대입해 보고 대입하기 애매한 요소들에게 p요소들을 ..

안녕하세요 찐망고입니다. h요소는 heading의 약자로 제목을 뜻합니다. 블록요소구여 html에서 제목요소는 웹 사이트에서 각각의 컨텐츠에 제목 역할을 할 때만 사용할 수 있는 요소 입니다. 글자가 커진다, 여백이 생기네? 글자를 두껍게 만들생각으로 사용하시면 안됩니다. 각각의 검정색 박스를 메인에 들어가는 각각의 컨텐츠라고 생각하면 그 컨텐츠에는 주제가 되는 제목역할을 하는 요소가 제목요소인 입니다. 제목요소1 제목요소2 제목요소3 제목요소4 제목요소5 제목요소6 숫자가 커질 수록 대제목에서 대제목, 중제목, 소제목 역할을 하는 것이죠. 정리를 해보면 h1요소는 html문서에서 한번만 사용 가능! 대체로 로고에 많이 사용하죠~ h2-h6요소는 상황에 맞춰 책의 목차 제목처럼 사용! 시멘틱 마크업시 필..

안녕하세요 찐망고 입니다.오늘은 안드로이드와 iOS단위에 대해 포스팅해보겠습니다. 1. 해상도란 무엇인가?해상도는 화면에 표시되는 픽셀의 총 개수를 이야기합니다.최신 스마트폰들의 해상도를 살펴보면 다음과 같습니다.갤럭시 Z 플립5: 2640 x 1080갤럭시 S23+: 2340 x 1080아이폰 14: 2532 x 1170아이폰 14 Pro: 2556 x 1179아이폰 14 Pro Max: 2796 x 1290  2. 픽셀 밀도(pixels per inch, ppi)와 중요성픽셀 밀도는 화면의 선명도를 결정하는 중요한 요소로, 1인치 안에 들어가는 픽셀의 수를 나타냅니다. 예를 들어, 아이폰 14 Pro Max는 1인치 안에 460 x 460개의 픽셀이 들어있다는 의미입니다.   3. 뷰포트와 디바이스 ..

안녕하세요 찐망고입니다. 카카오 메신저에서 URL을 공유할 때 나오는 썸네일...본적 있으신가요?  Open Graph Protocol이라고 페이스북에서 정의하고 만든 공개 표준화된 meta tag protocol인데요 하나의 URL이 페이스북에 공유될 때 표시될 컨텐츠를 정의하는 것을 목적으로 만들었고,표준으로 공개후 위 그림처럼 메신저에 URL이 공유되면서 썸네일등에 활용되는 거죠  관련 내용을 잘 포스팅해준 글이 있어 링크를 걸어봤구요 SNS의 시대, SEO와 SNS의 상호 관계웹페이지와 SNS의 상호작용을 위해 만들어진 두가지 표준 Meta tag에 대해서 알아봅니다. OG 태그의 경우 카카오에서도 활용되면서 국내에서 이제는 필수값이 되었죠.…seoguide.kr  요약을 해보면  실제..

HTML문서에서 HTML기본구조는 작업중인 페이지에 필수로 들어가는 요소들 입니다. 1. Doctype Document Type Declaration, DTD라고 문서형식선언이라하는데 각 버전마다 Doctype이 다른데 현재는 html5버전을 사용하고 작업중인 html문서에게 htm5버전으로 작업하겠다고 선언하는 것 이다. 2. html, head, body html - 문서의 시작 lang속성을 적용하여 문서를 ko (한국어) 형식으로 선언한다 head - 문서의 말머리 문서에 필요한 정보를 넣는다 meta요소, title요소, 외부스타일시트, 외부스크립트, style요소, script요소등을 넣을 수 있다. title - 문서의 제목 브라우저 탭 위치에 제목형태로 보인다. body - 문서의 본문 브..

안녕하세요 찐망고입니다. 오늘은 NH농협리츠운용모바일 사이트를 클론디자인해서 네비게이션에 인터렉션을 걸어볼겁니다. 일단 피그마는 디자인패널과 프로토타입 패널로 나누어지고, 프로토타입에서 인터렉션을 걸 수 있어요. Interractions에 더하기 아이콘을 클릭하면 이벤트와 애니메이션을 각각 고를 수 있는 메뉴가 뜨는데요 원하는 이벤트와 애니메이션을 찾아 골라주면 끝이긴 한데 디테일한 인터렉션을 걸어주려면 프레임작업을 조금 해주는게 좋아요 오늘은 간단하게 네비를 보였다 숨겼다 정도만 해볼게요 오픈오버레이는 현재 프레임위에 새프레임을 위로 올리는 건데. 위치값을 지정할 수 있어요 Overlay settings에서요 저는 메인프레임과 네비프레임이 같으므로 센터로 정렬을 했고, 오른쪽에서 왼쪽으로 보이기 위해 ..

안녕하세요 찐망고 입니다. 오늘은 디자인 관련 피그마 플러그인을 추천해볼건데요.. Iconify나 Unsplash처럼 엄청 자주쓰는건 아니지만 그래도 있으면 나름 쓸만한 플러그인들입니다. 이전 발행글도 참고해주세요~ 2023.07.14 - [UIUX디자인/피그마] - 피그마 추천 플러그인 피그마 추천 플러그인 안녕하세요 찐망고입니다. 벌써 5번째 카테고리인 플러그인 포스팅으로 넘어왔네요 저는 피그마 플러그인을 많이 사용하는 편은 아닌데요. 그래도 있으니까 편하다 하는 것들 위주로 포스팅 해 uiweb.tistory.com ARC - Bend your type! 텍스트를 먼저 쓰고 난 뒤 해당 플러그인을 실행시키면 밴드형태로 모양을 바꿀 수 있는데요. 글씨가 각각 하나씩 분리가 되고, 원형태도 가능해서 편..

안녕하세요 찐망고입니다. 오늘은 조금 재밌는 사이트를 찾아내서 포스팅 해보는데요.. 회원가입을 하면 (구글로그인가능) 원하는 카테고리에 맞춰 이미지를 보정할 수 있는데 합성, 보정, 일러스트도 가능하구여.. 무료와 유료가 합쳐져 있는 사이트 입니다. Hotpot.ai Hotpot.ai helps you create amazing graphics, pictures, and text. AI tools like AI Art Generator spark creativity and automate drudgery while easy-to-edit templates empower anyone to create device mockups, social media posts, marketing images, app i..

안녕하세요 찐망고입니다. 오늘도 시작해 볼까요? 컴포넌트는 사용자와 상호작용하는 기본적인 형태로, 어떤 공간에서든지 기능을 수행할 수 있는 가장 작은 단위입니다. 컴포넌트의 가장 중요한 특성은 재사용성이며, 어떤 문맥에서든지 사용자에게 이해하기 쉽고 사용하기 편리해야 합니다. 이의 목적은 특정 영역에만 제한되지 않고 명확하게 정의되어야 하며, 색상, 텍스트, 아이콘 등을 시각적으로 조직화하여 사용자에게 제공되어야 합니다. Definition 컴포넌트는 사용자가 다른 요소와 쉽게 구별하고, 사용자의 행동에 적절하게 반응하며, 현재 상태에 대한 정보를 명확하게 전달하는 가장 작은 단위입니다. 컴포넌트는 다섯 가지 특성을 가지고 있습니다. Usage: 컴포넌트의 목적과 역할을 정의 Shape: 다른 요소와 구..