허도경, limewhale

📘 반응형 웹이란? 웹 사이트는 크게 적응형과 반응형으로 나눌 수 있습니다. 아니 적응형은 뭐고 반응형은 또 뭔가요??🥶🥶🥶 적응형은 사용자의 환경에 최적화 되게 PC와 모바일 환경을 구분해서 두 개의 웹 사이트 주소로 각각 구성된 화면을 보여줍니다. 예를 들어 모바일 사용자가 네이버에 접속하면 m.naver.com에 접속되고 PC 사용자는 www.naver.com 주소로 접속 됩니다. 반면 반응형은 웹 사이트 크기에 따라서 화면의 UI가 변경되면서 사용자에게 최적화된 화면을 제공해주는 방식입니다. 두 개의 가장 큰 차이점은 하나의 소스로 관리되며 화면의 브라우저 크기에 맞게 최적화된 UI를 제공하는가(반응형) 아니면 두 개의 소스로 관리하면서 사용자에게 모바일, PC의 최적의 화면을 각각 제공하는가의 ..

이전에 작성한 프론트 개발의 시간을 덜어주는 유용한 HTML(Part 1)에 이어서 두 번째 시간을 가져보도록 할게요. 그럼 바로 시작하겠습니다. 💡 details 게시판의 Q&A와 같은 토글 메뉴(슬라이드 메뉴)를 만들기 위해선 JS의 도움이 반드시 필요했습니다. 하지만 이젠 HTML과 CSS 만으로 토글 메뉴를 구현할 수 있습니다. ✅ details 태그는 사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항(additional details)을 명시할 때 사용하며 보통 사용자가 직접 접거나 펼 수 있는 대화형 위젯(interactive widget)을 정의할 때 사용됩니다., 그 안에는 어떠한 종류의 콘텐츠도 포함될 수 있습니다. 이러한 요소의 콘텐츠는 open 속성이 설정되기 전까지는 화..

웹을 구현함에 있어서 HTML과 CSS는 절대로 빠질 수 없는 부분입니다. 더욱이 CSS의 기능은 이전처럼 디자인 꾸밈 기능만 담당하던 시절과는 다르게 그 기능이 점점 강력해지고 있으며 JS로만 구현이 가능하던 기능들까지도 일부 기능들은 HTML과 CSS로만 구현이 가능하게 되어가고 있습니다. 대분분의 프론트 개발을 하는 많은 분들이 자바스크립트와 React(난 사실 라이브러리🤣), Vue와 같은 프레임워크만을 중요하다고 생각하고 기본이 되는 HTML, CSS는 가볍게 생각을 하는 부분이 있습니다. 하지만 오늘 알아볼 기능들을 살펴보게 되면 HTML, CSS의 기능에 놀라게 될 거라 생각합니다. 💡 @supports CSS3를 적용하려다 보면 브라우저마다 지원하는 스펙이 달라서 우리는 해당 브라우저에서 ..

모바일 작업을 진해할 때 가장 대표적인 안드로이드와 IOS(아이폰)의 환경을 최대한 비슷하게 구현해야 합니다. 하지만 의외로 IOS의 표준 동작은 우리가 예상하는것과는 다르게 동작할 때가 왕왕 있습니다. 우리는 숫자값을 입력받기 위해서 사용하기 위해 필드를 사용합니다. 안드로이드에서는 우리가 원하는 정상적인 방법으로 숫자 키패드가 적용되는데 IOS의 경우 기본적으로 상단에 숫자행으로 수정되어 특수문자가 혼용된 키보드가 기본적으로 적용되도록 되어 있습니다. 이는 숫자값만 필요한 필드에서 굉장히 불편한 UI 구조일 뿐 아니라 안드로이드와 IOS의 키패드가 다르게 동작된다는 점에서 사용자의 UX적인 측면에서도 좋지 않습니다. 이전에는 이런 경우 스크립트를 이용하여 강제로 키패드 패턴을 변경하는 방법을 사용하였..

페이지를 이동하기 위해선 html에 A태그(anchor)를 이용하여 페이지를 이동합니다. 이 때 자신의 사이트에서 타 사이트로 이동시에는 주로 현재 보고 있는 브라우저가 아닌 새 창으로 이동을 하게 되는데요. 이는 여러 문제를 발생시킵니다. 여러분이 자주 방문하는 웹사이트에 접속하여 개발자 도구를 한 번 켜서 HTML 요소 검사기에서 하이퍼링크(, 앵커 태그)들을 한 번 살펴보세요. 맥용 크롬 개발자 도구 단축키 : Option - Command - i 윈도우용 크롬 개발자 도구 단축키 : F12 위의 이미지를 보면 왼쪽은 노션, 오른쪽은 디스커스(Disqus). 일부 웹 앱의 하이퍼링크에는 rel 속성의 값으로서 noopener, noreferrer, nofollow의 속성이 적용되어 있는 것을 알 수..

CSS 작업에 사용하면 유용한 요소인 속성 선택자를 정리해 봅니다. 💡 [attribute] a[target] { color: red; } a 태그에 target이라는 속성을 가진 요소를 선택합니다. link 선택함 link 선택하지 않음 💡 [attribute=”value”] a[target="_blank"] { color: red; } a 태그에 target=”_blank”라는 속성을 가진 요소를 선택합니다. ※ target이 반드시 _blank인 요소만 선택됩니다.(주의!) link 선택함 link 선택하지 않음 link 선택하지 않음 💡 [attribute~=”value”] div[class~="apple"] { background-color: red; } apple이라는 class를 가진 요소를..

디자이너에게 전달받은 디자인을 GUI 작업을 할 때 많이 사용되는 부분 중 하나가 X(닫기) 버튼입니다. 이걸 모두 이미지로 관리하자니 모양이나 크기만 조금 다를 뿐인데 리소스 관리적인 부분에서 상당히 비효율적인 부분이 발생하게 됩니다. 이때 X(닫기) 버튼을 이미지가 아닌 CSS로 만들어서 관리하면 이슈 대응도 편리하고 리소스적인 부분도 중복되지 않아서 효율적입니다. CSS로 X 버튼을 만드는 방법입니다. 첫 번째 방법 : content: "\00d7"를 활용 가상 선택자(before, after)에 content: "\00d7"; 만 추가해주면 아주 간단하게 X 버튼이 만들어 집니다. 크기는 font-size로 조정하면 되고 크기를 키울수록 굵기가 자동으로 굵어집니다. 다만 이 방법은 굵기의 세밀함을..

WAI-ARIA는 HTML의 접근성 문제를 보완하는 W3C 명세입니다. WAI-ARIA는 HTML 요소에 role 또는 aria-* 속성을 추가하여 콘텐츠의 '역할(roles), 상태(states), 속성(properties)' 정보를 보조기기에 제공합니다. WAI-ARIA 속성을 모든 HTML 요소에 무분별하게 사용할 수 있는 것은 아닙니다. role 또는 aria-* 속성을 특정 HTML 요소에 사용할 수 있는지 ARIA in HTML 명세를 검토하면서 적용해야 합니다. 1. HTML을 의미 있게 작성한다. 대부분의 WAI-ARIA 명세는 HTML 요소와 속성을 흉내내는 것입니다. 올바른 HTML을 사용한다면 WAI-ARIA 사용을 최소화할 수 있습니다. WAI-ARIA를 사용하기에 앞서 HTML을 ..

WAI-ARIA란? HTML로 화면의 마크업을 구성할 때 고려해야 하는 부분 중 하나가 웹 접근성인 부분입니다. 과거의 웹페이지는 정적인 정보성 화면이 주를 이루었습니다. 그래서 웹 표준을 지켜서 시멘틱 마크업과 접근성 요소들을 준수하면 웹 접근성 요소를 해결할 수 있었습니다. 하지만 최근에는 자바스크립트, AJAX 등을 활용하여 비동기 데이터를 불러오거나 시간에 따라 정보가 자동으로 업데이트되는 경우 전맹 시각장애인들은 스크린리더 등 보조기기에서 업데이트 된 정보를 인지하기 어려움을 느끼게 됩니다. 이러한 부분을 보완하기 위해 나온것이 WAI-ARIA입니다. WAI-ARIA는 W3C에 의해 제정된 웹 접근성을 위해 지원되는여러 가지 특성들을 대한 표준 기술 규격을 의미합니다. WAI는 ‘Web Acce..

디자이너가 전달한 화면의 GUI 작업을 하면 이미지 요소를 사용해야 하는 부분이 있는데 이를 최적화하기 위해 아이콘 요소는 SVG로 만들어서 처리를 하거나 이미지 자체 포맷을 압축하는 방법을 사용합니다. 그런데 이미지를 강제로 압축해서 처리하면 이미지 화질 요소가 낮아지게 되어 만족스러운 효과를 얻지 못하는 결과가 왕왕 나오기도 합니다. 이럴 때 사용자의 브라우저 환경에 따라서 이미지를 다르게 보여주는 환경으로 로직을 구성한다면 웹 최적화를 통해 속도면에서도 향상되고 이미지 품질면에서도 모두가 만족스러운 결과를 얻을 수 있을 거라 예상합니다. 이미지 품질을 유지하면서 속도를 개선하기 위해 차세대 포멧인 WebP와 avif를 이용하려고 합니다. WebP란 무엇인가요? Webp는 구글에서 만든 이미지 포멧으..