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

안녕하세요 찐망고입니다.오늘은 경로를 포스팅해 볼까 하는데요. 경로를 사용하는 경우 대부분은 문서에 링크를 걸거나이미지를 띄울 때 많이 사용합니다.경로가 틀어지지 않아야 링크도 잘 걸리고 이미지도 잘 보이겠죠 ㅎㅎ당연히 css문서나 js문서를 연결할 때도 매우 중요하고요 상대경로의 기준은 현재 작업하고 있는 문서의 위치를 기준으로 연결한 문서들을 찾는 거고요절대경로의 기준은 현재 경로를 걸기 위한 문서 위치의 시작을 찾는 거예요. 예를 들어서D드라이브에 찐 망고폴더에 문서와 이미지폴더가 있는데문서에 이미지폴더 안에 있는 이미지를 연결하고 싶다고 하면 상대경로는 문서를 기준으로 이미지폴더를 찾는 거라이런 식으로 경로를 넣어주면 되지만 절대경로는 절대경로는 웹사이트의 루트 디렉토리를 기준으로 경로를 지정하는..

안녕하세요 찐망고입니다.오늘은 강조를 뜻하는 인라인요소인 요소와 요소, 요소에 대해 포스팅해볼 건데요.  html마크업을 하면서 주의할 점은 요소의 의미를 파악하는 것입니다.브라우저에서 글자가 두꺼워지고 기울어지고 여백이 생기고 하는 것들은 css로 수정이 가능하니까요.  요소와 , 모두 강조의 의미를 뜻할 때 사용하는 요소인데요.각각 다른 방식으로 강조를 나타내요   요소 요소는 주로 중요한 텍스트의 의미를 나타내는데,해당 텍스트가 문서의 중요한 부분임을 강조하는 데 사용합니다.예를 들어, 금융상품의 가격이나 경고메시지와 같이 중요한 정보를 강조하는 데 사용하죠그리고 스크린 리더등 보조기술을 사용하는 사용자에게 중요한 내용임을 전달합니다.논리적으로 중요한 텍스트를 강조하죠주의: 이 상품은 ..

안녕하세요 찐망고입니다. 수업중에 만들어본 boxmodel 테스트 문제인데요. 친구들이 풀면서 고생하길래 블로그에도 공유해봅니다. 아직 초보자 이신 분들 한번 풀어보세요. 아래 문제가 테스트 문제구요~ 제목요소 menu01 menu02 menu03 이용약관 ©copyright 결과이미지를 보고 똑같이 만드는 작업입니다 답은 여기요! 더보기 제목요소 menu01 menu02 menu03 이용약관 ©copyright 2021.12.30 - [WEB/CSS] - box model (박스모델) - border와 padding box model (박스모델) - border와 padding 안녕하세요 찐망고입니다. 오늘은 box model에 관련해서 포스팅을 하려고 합니다~ 카테고리를 HTML로 지정해야 할지 CS..

안녕하세요 찐망고입니다. 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에서요 저는 메인프레임과 네비프레임이 같으므로 센터로 정렬을 했고, 오른쪽에서 왼쪽으로 보이기 위해 ..