basic
2000년대 초에는 %와 px로만 홈페이지를 만들어왔다. 그 당시에는 반응형이라는 말이 따로 없고, 넓이 1000px로 고정된 사이트만 있었기 때문이다(아마도). 조금 더 나아가 모바일 웹을 만들기도 했다. 당연히 똑같은 디자인일 수 없고,...
변수는 대소문자를 구분하며 변수값은 하위 요소에 상속된다. CSS에서 변수를 선언할 때는 :root라는 가상선택자를 최상위 엘리먼트에 선언하여 모든 요소에서 변수를 사용할 수 있도록 한다.(대표적으로 부트스트랩) 각 요소에 변수를 지정해도 상관은 없지만,...
검색 엔진 마케팅을 위해 필요한 것은? 바로 메타 태그이다. 그 외에도 웹페이지의 올바른 메타 태그로 인해 문서의 대략적인 내용을 알 수가 있으니 이보다 중요한 것은 없다. 메타 태그의 종류는 다양하지만,...
이번 장에서는 flex를 쓰지 않고 수직 정렬을 해보는 방법을 알아보자 아직 우리나라는 익스플로러를 많이 사용하고 있기 때문에 새로 나오는 신기술보다는 이전 구기술을 많이 사용하고 있다. (알다시피 익스플로러는 지원하지 않는게 너무...
CSS 선택자는 말 그대로 html의 어느 특정 요소를 선택하게 해준다. 그렇게 선택한 요소에 스타일을 적용하여 사용하는 것이다. 선택자의 종류는 여러가지가 있지만, 용어는 실무에서 그다지 쓸모없다. 클래스 선택자(.className{…}), 아이디 선택자(#idName{…}), 전체...
언제 어떻게 써야 하는 걸까?, 얘는 언제 썼었더라?? 하고 헷갈리는 경우가 있다. 그런적이 왕왕 있어왔기에 글을 적는다. a, button, input a태그 : 보통 페이지 링크를 걸 때 주로 사용되는 일반적인...
responsible
웹은 모바일, 태블릿, 노트북, 데스크탑 등 다양한 화면 크기에 맞춰 사용된다. 모바일도 종류에 따라 화면 크기가 다르기에 고려해야 할 것이 많다. responsible 태그를 통해 반응형 웹에서 적용이 가능한 이미지, 표...
반응형에서 table을 쓰지 않고, ul li 또는 div로 만드는 경우가 많다. 그러나 table이 반드시 필요한 예도 있다. 그럴 때 사용할 수 있는 두 가지 방법을 소개한다. 여러 가지로 응용이 가능하니...
이번 장에서는 반응형 웹에서 이미지 비율을 유지하고, 디바이스 크기에 따라 이미지 용량을 설정하는 방법에 대해 설명하겠다. 생각 외로 반응형 웹을 작업하다 보면 이미지 비율 문제가 많이 대두된다. 커다란 가로로 된...
월간 달력은 큰 화면에서 보기 좋으나 모바일 화면에서는 보기가 어렵다. 모바일에서도 최적화 하는 방법이 몇개 있지만 그 중 스타일을 다르게 하는 방법을 소개한다. 너비 1000px 이하는 주간, 이상은 월간 달력으로...
expand
2022년 하반기부터 모든 브라우저에서 dialog를 지원하게 되었다.
dialog는 js를 통해 조작해야 하며 아래의 인스턴스 메소드를 상속한다.
한 페이지 안에 다양한 내용을 넣어야 할 때 사용한다. 메뉴를 여러 개 만들기 어려운 상황에서 사용하는데, 같은 주제의 여러 문서를 하나의 메뉴로 통합할 때 쓰기 좋다. 정책 사업 설명할 때...
콘텐츠에서 강조하거나 예쁘게 꾸미고 싶을 때 불릿을 사용하기도 하지만, 형광펜 효과 또한 만만치 않게 사용한다. 한눈에 보기 편하고 색으로 강조되니 특정한 내용을 강조하고 싶을 때, 혹은 콘텐츠의 제목으로 많이 사용하고...
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus animi eligendi nemo facilis similique eum quae doloribus atque modi, recusandae sit optio corrupti, ratione tempore soluta maxime in. Quo, qui....
Web Accessibility
웹사이트는 기본적으로 키보드와 마우스를 사용하는 사용자를 위해 설계가 된다. 하지만 어떤 사용자는 사이트의 텍스트를 오디오나 점자로 변환하는 화면 판독기를 사용하기도 한다. 그뿐일까? 터치패드, 시선 추적 장치 등을 선호하는 사람들이 다양한...
사람은 변한다. 어제, 1시간 전, 1초 전의 나와 지금의 나는 다르다. 스크린리더기와 코딩들 또한 마찬가지다. 왜이렇게 장황하게 설명하냐면 웹접근성에 맞게 블라인드 처리를 완/벽/하게 해낼 수 있는 방법은 아직 없기 때문이다....
웹접근성이란? World Wide Web을 창시한 팀 버너스 리는 웹이란 장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간이라고 정의한다. 즉, 접근성이란 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를...
