💸원 and beyond

글의 구조를 마크업할 때 고민해야 할 게 많다. 이번에 다룰 것은 부제를 HTML 태그로 어떻게 표현해야 할 것인가다. 결론적으로 나는 아래처럼 사용하기로 마음먹었다. [박근혜 탄핵] 美 매체들 "한국 민주주의 발전 보여준 파면 결정"…이정미 재판관도 조명 명세를 확인하는 게 올바른 사용법을 아는 지름길이다. 클리어보스에서 여러 번 들었던 말인데 최근 새삼 느꼈다. 자세한 내용은 4.12.1 Subheadings, subtitles, alternative titles and taglines 항목에서 찾아 볼 수 있다. HTML에는 부제를 표현하는 태그가 없으며, 아래와 같은 방법을 제안한다 하고 설명이 돼 있다. 명세가 제안하는 방법은 세 가지다. 기호를 사용해서 구분하는 방법 美 매체들 "한국 민주주의..

"1+1은 무엇일까요?"라는 질문을 자주 듣습니다. 산수 시간에 말하는 정답은 2가 되겠죠. 세상에는 그 너머 다양한 정답이 존재할 수 있습니다. 어떤 관점으로 생각하느냐에 따라 다른 정답이 나오죠. 저자인 휴고 기로델은 이 글에서 독자에게 'Sass 프로젝트의 아키텍처란 바로 이것이다'라고 정답을 알려주지 않습니다. 대신 다양한 정답이 나오도록 Sass 프로젝트의 아키텍처 개념을 얘기합니다. 이 글을 읽고 여러분의 Sass 프로젝트에서 멋지게 창의력을 가미한 아키텍처를 만들어 보시기 바랍니다. [편집자 주]예전의 단순했던 CSS만으로 일했던 그때를 기억하시나요? 사용한 CSS 파일은 단 하나지만 (코드의 줄은) 잠 못 이루는 밤보다 더 길었습니다. (대게 서툴게 작성된) 셀 수 없이 많은 줄과 거기서 ..

# 마크업 개발 레벨 테스트레벨테스트의 목적은 현재 파악하고 있는 수준을 측정함에 있습니다. 자료를 찾아서 답을 작성하지 마시고, 편안한 마음으로 아는 만큼만 적어주세요.모든 답변은 2줄이 넘지 않을 정도의 분량으로 간결하게 작성해주세요. ## HTML1. Doctype을 사용하지 않을 때는 무슨 일이 발생할까요? 2. 웹표준에 맞게 작업할 때 b, i 태그 대신 적합한 태그는 각각 무엇일까요? 3. block 요소와 inline 요소에 해당하는 태그들을 각각 5개씩 적어보세요. 4. blockquote 태그는 어떤 용도로 사용해야 할까요? 5. 인라인 스타일(style=”property:value”)을 가급적 사용하지 말아야 할 이유는 무엇일까요? 6. myPhoto.jpg 파일을 img 태그로 작성해..

웹접근성 기본개념모든사람이 다양한 조건의 환경에서 손쉽게 웹 콘텐츠에 접근할 수 있도록 보장하는 것을 의미합니다. 장애가 있거나(일시적인 장애를 지니게 되는경우를 포함) , 네트워크 환경이 좋지 못한 경우 혹은 모바일 기기를 사용하는 경우, 다양한 운영체제 및 웹 브라우저를 사용하는 경우 등 환경조건에 관계없이 웹콘텐츠에 접근할 수 있어 웹 사용성을 증가시키게 됩니다.관리기준한국형 웹 콘텐츠 접근성지침 KWCAG V.2.0한국형 웹 콘텐츠 접근성 지침 2.0이 TTA 단체 표준으로 2009년 12월 22일에 제정되었습니다. 웹접근성 평가도구웹접근성 평가툴 K-WAH 4.0K-WAH 4.0은 한국형 웹 콘텐츠 접근성 지침 2.0에 따라 웹사이트(웹페이지)가 접근성 지침의 6개 세부지침을 준수하는지를 자동 ..

퍼블리싱 웹접근성 체크리스트No.항목명고려부서레벨적용여부1이미지(그림, 사진, 로고, 차트, 다이어그램, 배경처리된 이미지, 동적으로 제공하는 이미지, 플래시의 Name값 등)에 적절한 대체 텍스트를 제공하는가? 사용자 입력 이미지의 경우, 대체 텍스트를 넣을 수 있는 입력폼을 제공하는가?기획, 디자인, 퍼블리싱, 개발15W3C Validation을 통과하는가?퍼블리싱26주요 콘텐츠 제목을 h1~h6로 마크업했는가?기획, 퍼블리싱17표는 table로 표의 머리글은 th로 마크업했으며 scope 속성을 제공하는가?퍼블리싱28thead, tbody, tfoot으로 그룹핑 되어 있는가? (th로 그룹핑 안될경우 thead생략가능, tbody만 있을 경우 tbody생략 가능)퍼블리싱19table에 caption..

데스크탑 브라우저, iPhone, iPad 모바일 브라우저 등에 스타일시트를 구분하기 위한 미디어 쿼리(Media Queries)를 Andy Clarke씨가 정리했습니다. 속성으로 구분하는 방법과 파일로 구분하는 두가지 방법을 모두 포함합니다. [출처-파이어준] 추가적인 수정은 계속 내가~[출처] 디바이스별 미디어쿼리(media queries) 정의 정리|작성자 냐비 속성으로 구분/* 스마트폰 가로+세로 */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px){ } /* 스마트폰 가로 */ @media only screen and (min-width : 321px) { } /* 스마트폰 세로 */ @media o..

브라우저마다 input file은 제각각 다르게 보임.CSS 와 Jquery로 input file 스타일을 바꾸는 소스 아래 첨부파일은 간단하게 소스만 정리 아래 주소는 원래 소스 URLhttps://github.com/alterebro/jQuery.NiceFileInput.js

레이어 팝업 소스 오늘 하루 이 창을 열지 않음 [닫기] 오늘 하루 이 창을 열지 않음 [닫기]

사이즈에 따른 반응형 스타일링 responsive3 .box { width: 25%; height: 300px; background: orange; float: left; } @media (min-width: 401px) and (max-width: 800px) { .box { width: 50%; } } @media (max-width: 400px) { .box { width: 100%; } } A B C D

Posted by 서 지수 in 배움터 - 열공on Mar 31st, 2014 태블릿 PC, 스마트 폰 등 모바일 기기의 이용이 늘어나면서 모바일 웹에 대한 관심이 많아 지고 있습니다. 사용자들은 같은 웹 컨텐츠를 이용 하더라도 PC와 모바일 기기에서 동등한 서비스를 제공 받기를 원합니다. 이에따라 화면 크기의 제약사항과 단말기의 기능 속성에 따른 고려사항이 생겼지만 그렇다고 여러 종류의 웹(url)을 만들 수 없습니다. 그에 대한 대응 방안으로 반응형 웹이 뜨고있습니다. 반응형 웹(Responsive Web) 그렇다면 반응형 웹이란 무엇일까요? 쉽게 말해 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정 되는 것을 말합니다. 어떠한 환경에서도 그에 맞게 사이즈가 변화되어 사용자가 보기 편리하게 ..

블로그를 꾸미다 보면 네이버 블로그야 기본적으로 나눔고딕을 PC에 설치만 하면 포스팅할 때 나눔고딕이나 나눔바른고딕으로 지정해서 발행할수 있지만 티스토리는 얼마전까지만 해도 웹폰트로 변환하고 업로드 해야되는 불편함이 있었는데요. http://www.google.com/fonts/earlyaccess 나눔붓글씨 웹폰트 @import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css); font-family: 'Nanum Brush Script', cursive; 붓글씨와 펜글씨까지 웹폰트로 적용가능 한 것 보고 깜작 놀랐습니다. 나눔고딕 웹폰트 @import url(http://fonts.googleapis.com/earlyaccess/na..

나눔고딕 폰트는 다른 웹폰트들처럼 구글을 사용하면 편리한데, 사용법 : http://www.google.com/fonts/earlyaccess 최근 새로 나온 나눔바른고딕은 아직 포함 안된건지??여튼 이제는 바른고딕이 더 예뻐보여서!!^^ css 파일에 추가 @font-face { font-family: 'NanumBarunGothic'; src: url('NanumBarunGothic.eot'); url('NanumBarunGothic.woff') format('woff'), url('NanumBarunGothic.ttf') format('truetype'), font-weight: normal; font-style: normal;}@font-face { font-family: 'NanumBarunGo..

네이버 NanumBarunGothic(나눔바른고딕) 폰트를 웹폰트로 변환하여 홈페이지에 적용했다. 개발자들이 코딩 완성하면 이런 기분이겠구나. 다 해서 한 여섯 시간 이상 투입한 것 같다 http://onlinefontconverter.com/위의 사이트에서 특정 폰트를 웹폰트로 변환시킨다. 나눔바른고딕을 예로 들자면 나눔바른고딕 TTF 혹은 OTF 파일을 받으면 된다. 폰트 설치가 프로그램 설치형식이라면 제어판>글꼴에 가면 원본 파일을 찾을 수 있다. 혹여나 저작권 이슈로 논란이 될 수도 있으니 잘 확인해보고 사용하는 것이 좋을 것이다. 이 홈페이지에서 eot, woff, svg, otf 네 가지 형태로만 변환해서 개인 FTP 혹은 홈페이지에 업로드 하면 된다. 간편하게 font 폴더를 하나 만들어서 ..