미디어쿼리 css 사용 방식 혼자 포트폴리오 작업할 때 쓰던 쿼리 방식은 다음과 같았다. @mixin responsive($media) { @media screen and (max-width:$media) { @content; } } .inner { width: 1200px; margin: 0 auto; @include responsive(1200px) { width: 100%; } } 이런 식으로 따로 반응형 작업에 대해서 빼지 않고 각 element 밑에 추가하는 방식이었다. 물론 breakpoint 도 정의해두었지만 필요할때는 정해진 분기 이외에 따로 값을 지정하기도 했다. 이 방법은 내가 그냥 만들면서 편리한 방법이었다. 구조가 복잡해질수록 클래스명을 중복해서 작성할 필요가 없었으니까. // _r..

IR( image replacement ) 대체 텍스트 for 웹접근성. img 태그 내의 alt 속성과 같다. 하지만 백그라운드이미지로 넣는 경우에는 대체텍스트가 필요. text-indent:-9999px 등 여러가지 방법이 있으나 최신 방법은 아래와 같다. (H5BP-html5 boilerplate, 부트스트랩에서 사용중) .sr-only { position: absolute; /* position: absolute/fixed 에서만 clip 속성 작동 */ margin: -1px; /* 부트스트랩에선 안씀 */ width: 1px; height: 1px; padding: 0; border: 0; white-space: nowrap; overflow: hidden; /* overflow: visibl..

$ pwd : print working directory $ ls : list -la / -al : list all $ cd : change directory ~ 현재 접속 중인 홈 디렉터리 ./ 현재 작업 중인 디렉터리 ../ 상위 디렉터리 $ mkdir 00 : make directory $ rm : remove -r : 하위 디렉터리와 파일까지 삭제 $ clear : 터미널 창의 내용 삭제 $ exit : 터미널 창 종료 $ vim 00.txt : vim을 이용한 파일 생성 i / a : insert / add 입력모드 esc : ex 모드 :w / :write :q / :quit :wq 00 : write and quit, 파일 이름 입력 시 그 이름으로 저장 :q! 문서를 저장하지 않고 편집기 ..

인터넷의 원리 웹사이트 주소 웹페이지가 가지고 있는 고유한 주소 http://www.google.com https:// 프로토콜 어떤 방식으로 웹사이트에 접속할지, 즉 인터넷 탐색 시의 이동 수단. http와 https는 거의 동일한 프로토콜이지만 https는 암호화를 통해 보안성이 강화됨. www 대부분 붙이지 않아도 상관없지만 완전한 주소를 보여주기 위해. 전화를 걸때 국가번호를 빼고 말해도 되는 것처럼. google.com 도메인 모든 웹사이트는 최소 1개의 ip주소가 존재한다. 컴퓨터는 도메인이 아닌 ip주소라는 숫자코드를 이용해 접속한다. 도메인을 ip 주소로 전환하기 위해 DNS, domain name service를 이용한다. DNS는 주소록이라고 보면 되고, 컴퓨터는 dns를 이용해 ip ..

Block__element--modifier : simply speaking, code style guide Block is a stand alone entity that consists of elements independent UI element, meaningful on its own a single contained block or component on the page one whole structure / component block make sense whereas inside or outside ( ex. button can be a block ) the outermost parent element Element an element or part of a block they depend o..

픽셀 사용을 추천하지 않는 이유 픽셀은 고정된 절대값이므로 접근성에 저해될 수 있다. 즉, 유저 입장에서 볼 때 브라우저의 기본 폰트값을 변경하더라도 픽셀값은 변하지 않는다. 물론 유저가 ctrl +/- 를 이용하여 줌 하는 경우에는 접근성을 해치진 않는다. REM Represents the font-size of the root element (typically ). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this). https://developer.mozilla.org/e..