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

안녕하세요 찐망고 입니다. ARIA(Accessible Rich Internet Applications)는 웹 접근성을 개선하기 위해 만들어진 표준입니다.주로 스크린 리더나 기타 보조 기술을 사용하는 사용자들이 웹 콘텐츠를 더 쉽게 이해하고 사용할 수 있도록 도와줍니다. 왜 ARIA가 필요한가?일반적인 HTML 요소는 이미 접근성을 어느 정도 지원합니다. 예를 들어:은 기본적으로 클릭 가능하다는 정보를 보조 기술에 전달합니다.는 alt 속성을 통해 이미지를 설명합니다.하지만, 동적 콘텐츠나 맞춤형 UI 컴포넌트(예: 탭, 드롭다운, 모달 창) 같은 복잡한 요소는 기본 HTML만으로는충분한 접근성을 제공하지 못합니다. 이럴 때 ARIA를 사용하여 접근성을 강화할 수 있습니다. ARIA의 주요 개념ARIA는..

안녕하세요 찐망고 입니다. 기술적인 질문 중 홈페이지가 보이는 순서를 물어보는 경우도 있다고 해서요오늘은 그에 관련 포스팅을 해볼까 합니다.  홈페이지가 보여지는 과정은 클라이언트(사용자 브라우저)와 서버 간의 상호작용으로 이루어집니다.이 과정은 여러 단계로 이루어져 있으며, 각 단계마다 중요한 역할을 합니다. 1. 주소 입력과 서버 연결사용자가 브라우저 주소창에 웹사이트 주소 (예: www.example.com)를 입력하면, 다음과 같은 일이 일어납니다. DNS 조회: 브라우저는 DNS 서버에 해당 도메인의 IP 주소를 요청합니다. 서버 연결: IP 주소를 받은 브라우저는 서버와 연결을 시도합니다. 2. 서버로 데이터 요청 및 수신서버와 연결이 되면:브라우저는 서버에 웹페이지 데이터를 요청합니다.서버..

안녕하세요 찐망고 입니다. 얼마 전 제자가 면접을 보면서 받은 기술적인 질문 중 하나인데요.머릿속으로 맴돌긴 하는데 긴장해서인지 정확히 답변하기가 힘들었다고 하더라고요그래서 쉽게 답변하기 위한 내용을 포스팅해보려고 합니다. GET 방식과 POST 방식은 웹에서 데이터를 전송하는 두 가지 주요 방식인데요  GET 방식목적: 주로 데이터를 요청해서 서버로부터 정보를 가져올 때 사용함특징:URL에 데이터를 포함해서 보내기 때문에 주소창에 ?name=찐망고&age=25 같은 쿼리 스트링이 보임URL 길이 제한이 있어서 아주 많은 양의 데이터를 전송하기엔 적합하지 않음보안 측면에서, 데이터를 URL에 직접 노출하기 때문에 민감한 정보를 보낼 때는 사용하지 않는 게 좋음사용 예: 검색어 입력 후 검색 결과를 보여주..

안녕하세요 찐망고 입니다. VScode는 익스텐션이 많은데요.그중 open in browser를 설치하면 단축키를 이용하여 HTML파일을 브라우저로 열 수 있습니다. 익스텐션 아이콘을 클릭하고, Open In Default Browser를 검색합니다.  설치하면 되겠죠? 설치 후 마우스 우클릭 해보면 Open In Default Browser메뉴가 생겼습니다.  Alt + B는 현재 열려 있는 HTML 파일을 기본 브라우저에서 열기 위한 단축키이고,Shift + Alt + B는 브라우저를 선택해서 HTML 파일을 열 수 있는 단축키입니다.

안녕하세요 찐망고입니다.웹에서 쓰는 폰트 관련 글들이 조회수가 높더라고요..제가 또 친절하게 설치파일과 웹폰트를 공유하기도 해서 그렇겠죠? TTF 파일이나 OTF 파일은 로컬에 설치하는 글꼴 파일입니다.반면에, 웹에서 사용하는 폰트는 WOFF(웹 오픈 폰트 형식)과 WOFF2 같은 파일 형식을 사용해요.@font-face { font-family: 'SUITE'; font-weight: 300; src: url('./SUITE-Light.woff2') format('woff2');}@font-face { font-family: "Pretendard"; font-weight: 100; src: url(Pretendard-Thin.woff) format(woff);} 위 코드..

안녕하세요. 찐망고입니다. 오늘은 Apple Touch Icon 관련 포스팅을 해볼까 하는데요. Apple Touch Icon은 iOS기기에서 웹 사이트를 홈 화면에 추가할 대 사용하는 아이콘 입니다.이 아이콘을 설정하면 사용자가 웹 사이트를 홈 화면에 추가했을 때 표시되는 아이콘 이미지를 지정할 수 있습니다. 물론 Apple Touch Icon을 웹 사이트에 추가하는 것이 필수는 아니지만,홈화면 추가시 iOS 기기의 홈화면에 아이콘이 깔끔하게 표시됩니다.만약 이 아이콘이 없다면 기본 웹 브라우저 아이콘이나 웹사이트의 축소된 화면이 표시될 수 있는데 그거 정말 너무나 별로겠죠?또한 Apple Touch Icon을 설정하는 것은 최신 웹표준을 따르는 좋은 관행 중 하나입니다.   Apple Touch Ic..

안녕하세요 찐망고입니다.오늘은 favicon에 대해 포스팅 할겁니다.  파비콘이란?  모든 브라우저의 탭엔 제목이 있고 그옆엔 저렇게 파비콘이 붙어요.물론 없어도 큰일 나지는 않지만, 있으면 이뻐! 파비콘은 브라우저 탭, 북마크, 즐켜찾기 목록에서 웹사이트를 대표하는 작은 아이콘입니다.이를 통해 사용자는 쉽게 웹사이트를 인식하고 찾을 수 있어요.일관된 브랜드 이미지 구축에도 도움이 되구요. 파비콘의 중요성사용자가 여려개의 탭을 열어놓았을때, 탭이 아주 작아지는 경험들 다들 있으시잖아요?파비콘이 있으면 제목이 뭔지 몰라도 웹사이트를 빠르게 식별할 수 있습니다. 또한, 일부 검색 엔진은 파비콘을 검색결과에 표시하기도 합니다.당연히 사용자의 클릭률(CTR)을 높이는데 기여할 수 있죠 제일 중요한건 파비콘이 없..

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

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

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