HTML/CSS(16)
-
웹에서 모달창과 팝업창의 차이점
웹에는 숨겨진 영역이나 별도 공간을 필요한 상황에만 보여주는 다양한 인터페이스 요소가 존재한다. 가장 널리 쓰이는 것들 중 하나가 팝업창 및 모달창이다. 팝업창과 모달창의 공통점 특정 역영의 위치에 원하는 사이즈의 별도 레이어를 만들어 방문자에게 원하는 시점에 보여준다는 점이다. 팝업창과 모달창의 차이점 팝업창의 경우 웹 시작과 동시에 띄우는 경우가 많지만 모달창의 경우 중간 중간 사용자에게 보여주는 경우가 많다. 즉, 현재 의도하는 목적과 상관없는 경우에는 주로 팝업창을 표시하고 관련있거나 다음 진행을 위해 필요한 내용에는 모달창을 사용한다는 차이점이 있다. 또 다른 차이는 팝업창은 사용자가 원할 경우 브라우저의 옵션을 통해 열지 않도록 강제할 수 있는 기능이 있다. 그렇기 때문에 반드시 노출해야하는 ..
2020.01.12 -
쿼크모드(Quirks mode)와 표준모드(Standard mode)
웹 브라우저는 두 가지 렌더링 모드를 지니고 있는데 쿼크모드(Quirks mode)와 표준모드(Standard mode)이다. 즉 브라우저는 선언된 doctype에 따라 렌더링할 모드를 선택하게 되는데 이 과정을 doctype sniffing 또는 doctype switching이라고 한다. 쿼크모드(Quirks mode)는 오래된 웹 브라우저를 보여줄 때, 하위 호환성을 유지하기 위해서, 표준모드를 대신하여 쓰이는 모드이다. 즉 쿼크모드의 목적은 오래된 웹페이지들이 최신 버전의 브라우저에서 깨져 보이지 않으려는 것에 있다. 그렇다면 브라우저는 문서가 최신인지 오래된 문서인지 어떻게 판단할까? 바로 문서 상단에 있는 DTD(Document Type Defination)를 보고 쿼크모드 혹은 표준모드로 렌..
2020.01.12 -
점진적 향상법, 우아한 성능 저하법
1. 점진적 향상법 (Progressive enhancement) - 많은 테스트를 통해 말그대로 기능을 점진적으로 향상시키는 것 - 기초부터 차곡차곡 쌓아서 발전해 나가는 방법 - 노력과 시간이 필요하다 ex) 웹 페이지를 구상할 떄 1. HTML로 마크업을 구성한다. 2. CSS로 스타일을 입힌다. 3. JS로 사용자 경험을 향상 시킨다. 2. 우아한 성능 저하법 (Graceful degradation) - 최신 기술을 기반 또는 최신 기기에서 동작하는 기능을 만들고 나서, 오래된 기술 또는 오래된 기기에서 동작하게 하기 위해 유사한 기능을 만들어 동작하게 하는 것 - 사용자들의 기기를 위해 별도의 버전을 만들어 놓는 것. - 하지만 이것은 순전히 개발자 관점에서 작성된 것이다. 그래서 javascr..
2020.01.12 -
<strong>&<b>, <em>&<i> 차이점
&& : 강조 진하게 && : 강조 이테리체 시각적으로는 큰 차이가 없어 보이지만, 사용하는 용도가 다릅니다. && 의 경우에는 의미적인 강조를 나타내고, && 는 단순히 문자열을 굵게 표시하거나 효과를 주는 것을 나타냅니다. 그리고 가장 중요한 차이는 스크린 리더에 있습니다. 스크린 리더: 시각 장애인들에게 화면의 내용과 자신이 입력한 키보드 정보나 마우스 좌표 등을 음성으로 알려 주어 컴퓨터를 사용할 수 있도록 도와주는 프로그램. 정리하면, 스크린 리더를 사용하는 분들도 가장 중요한 요점이 무엇인지 훨씬 쉽게 파악 할 수있다는 것입니다. (웹 접근성이 뛰어나다.)
2020.01.11 -
reset.css의 개념
브라우저는 HTML언어를 번역해서 보여주는 기능을 합니다. 대표적인 브라우저로 IE(인터넷 익스플로러), Firefox, Chrome, Safari, Opera가 있습니다. 이들 브라우저는 모두 다른 기본값을 가지고 있습니다. 예를 들어, margin과 padding을 적용했을 떄, 또한 들여쓰기의 거리나 line height의 폭, heading의 크기의 기본값이 저마다 다릅니다. 이를 해결하고자 하는 방법이 reset.css 설정입니다. reset.css의 개념은 모든 브라우저에서 통일된 화면을 볼 수 있도록 기본값을 처음부터 초기화시킨다는 의미입니다.
2020.01.11 -
UI/UX 정의와 차이점
UI(User Interface)는 보이는 화면이나 접하는 부분의 시각적인 면을 디자인, 설계하는것을 의미한다. UX(User Experience)는 사용자의 경험(기억, 느낌, 감정)에 중시한 개발하는 것을 의미한다. 아이폰 개발을 통한 UI/UX의 차이점을 설명하자면, UI: 눈에 보이는 화면, 더 자세히 말하면 액정의 크기 해상도, 하나 밖에 없는 홈버튼, 폰을 켰을 떄 보이는 런치 아이콘의 디자인과 배열 색등을 말한다. UX: 편리하게 사용할 수 있는 기술, 예를 들면 터치하면 바로 반응하는 반응 속도, 지문 인식 등록을 통한 홈버튼 터치로 잠금장치 해제 방식 등 사용의 편리성에 중점을 둔다. 정리하자면 UI는 사용자에게 보여지는 인터페이스 범위, UX는 보여지는 것들을 토대로 통솔 및 설계, 전..
2020.01.11