subime에서 작성한 html파일 단축키로 웹브라우저에서 보기

cmd + shift + p 를 누른 후 install package 실행

View in Browser 검색후 설치

sublime text 재부팅 후 사용

사용법
.htm 또는 .html 파일을 open 한 다음

아래의 단축키를 누르면 작성한 html파일을 웹브라우저에서 보기위해 Finder로 찾아가는 불편함 없이
편하게 이용가능합니다.

Ctrl + Alt + C = Chrome으로 보기
Ctrl + Alt + S = Safari 로 보기
Ctrl + Alt + F = FireFox 로 보기

물론 해당 브라우저가 설치되어 있어야 겠죠?

(출처: NHN NEXT 하태호)

Advertisements

:nth-child(A) vs :nth-of-type(A)

<div class="table">
    <plate></plate>
    <bento></bento>
    <apple class="small"/>
    <plate>
        <orange/>
        <orange/>
        <orange/>
    </plate>
    <bento></bento>
</div>
bento:nth-last-child(4){} //첫번째 도시락 선택됨(선택한 부모의 자식을 셈)
bento:nth-of-type(2){} //마지막 도시락 선택됨(선택한 태그를 셈)

Reference

http://flukeout.github.io/

web 마크업 레벨테스트

개요

Tobyyun님의 Markup Level Test를 풀고 점검을 받았습니다.
첫 라인이 제가 쓴 답이고(대부분 틀렸어요 ^.^….눈물)
들여쓰기 되어있는 것이 첨삭받은 것입니다.

마크업 레벨테스트

  1. Doctype을 사용하지 않을 때는 무슨일이 발생하나요?
    특정버전으로 작성된 메서든데 다른 버전으로 보일 수 있다.

    HTML렌더링 모드, 독타입이 없으면 quirks mode로 간다.(스탠다드-웹표준, 얼모스트 스탠다드, 쿽스 모드) CSS를 해석하는 방법이나 등등이 깨질 수 있다.

  2. 웹표준에 맞게 작업할 때 b, i 태그 대신 적합한 태그는 각각 무엇일까요?
    <strong> , ?

    시맨틱!!! <strong>, <em>

  3. block 요소와 inline 요소에 해당하는 태그들을 각각 5개씩 적어보세요.
    블록: <img>, <div>, <header>, , <table>, <li>
    인라인: <p>, <a>, <strong>, <span>

    블록: div, p, section, article
    인라인: span, a, img, b, u, i….

  4. blockquote 태그는 어떤 용도로 사용해야 할까요?
    인용구를 넣을때

  5. 인라인 스타일(style=”property:value”)을 가급적 사용하지 말아야 할 이유는 무엇일까요?
    유지보수가 힘들다(왔다갔다)

    구조와 표현의 분리

  6. myPhoto.jpg 파일을 img 태그로 작성해보세요.
    <img src="경로/myPhoto.jpg" />

    <img src="경로/myPhoto.jpg" alt="대체텍스트"> //알트 꼭 쓰기

  7. HTML에서 id 속성을 사용하는 이유와 주의 할 점은 무엇일까요?
    요소에 유니크한 속성을 부여한다. 페이지당 한번만 쓴다.

  8. ‘TopArea’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?
    첫글자가 소문자가 아니다

    Top이라는 방향성을 가지고 있기 때문. 접근성차원에서도 방향은 의미 없으므로.

  9. ‘blue-box’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?
    색상이 CSS에서 변경될 수 있다.

  10. HTML5에 새롭게 추가된 aside 태그는 어떤 용도로 사용해야 할까요?
    사이드 메뉴

    HTML5 Doctor의 콘텐츠 요소 판별법 참고
    컨텐츠의 주요 내용이 아니고 부수적인 내용일때

  11. input 태그와 항상 함께 사용해야 할 태그는 무엇일까요?

label꼭 달자

  1. 모바일 웹 또는 반응형웹디자인 프로젝트에서 각 기기에 적합한 화면을 보여주기 위해 필요한 meta 태그는 무엇일까요?
    media-query
    > meta name=”viewport”

CSS

  1. 화면 상에는 보이지 않으나, 스크린 리더에서 읽혀야 하는 요소에 주어야 할 스타일링을 작성해보세요.
    display:none

    위의것은 스크린리더에서 안읽어줌. 우리 사이트 a11y클래스 참고

  2. float 속성을 가진 자식을 품은 부모요소는 높이 값을 잃어버릴 때가 있습니다. 이 현상을 해소하는법(clearing)을 알고 있나요?

    나중에 알려줄게요.

  3. border-box와 content-box의 차이점은 무엇일까요?

    박스 모델을 알고있나? 지금은 컨텐트박스가 표준. box-sizing으로 변경 가능 =

  4. position: relative는 어떤 경우에 사용 하나요?
    다른 요소에 따라 이 요소의 위치값이 결정될때

    좌표를 재정의할때 쓴다

  5. CSS Reset은 무엇이며 왜 사용할까요?
    브라우저 기본으로 적용되어있는 CSS값들을 리셋. (기본 패딩 등등…)

    크로스 브라우징을 목적으로

  6. Sass, less, Stylus와 같은 CSS 프리프로세서를 사용해본적이 있나요?
    sass를 좀 보았습니다.

  7. id, class, inline style, !important를 우선순위 순으로 나열해보세요.
    !important > inline style > id > class

  8. CSS에서 상속이 되는 속성을 2개만 꼽아보세요.
    display? position?

    위 것들은 다 상속 안되는것들이고, color:red나 사이즈 같은거 상속됨.

  9. Sprite image 기법을 사용하는 이유는 무엇일까요?
    빠른 로딩과 용량을 줄이기 위해

    파일 요청횟수

  10. Sprite image 기법을 사용하는데 필요한 CSS 속성들을 꼽아보세요.
    top, left

    background-position

  11. 점진적 향상(Progressive Enhancement)의 뜻을 설명 할 수 있나요?
    특정 기능을 적용할 때, 구 브라우저에 적용이 안돼도 치명적이지 않을 만큼 조금씩 신기능을 추가

    graceful degration(우아한 낮춤?!) ttf만 쓰면 구형 인터넷익스플로러에선 안된다. eot, svg같은걸 추가 (ttf, eot파일 두개만 있으면 거의 다 지원된다.)

  12. 개발사 접두어(vendor prefix)를 꼭 사용해야 할 CSS 속성(property)를 2개만 꼽아보세요.

    앞에 webkit, moz같은게 붙는거.

  13. 반응형웹디자인의 3가지 요소를 꼽아보세요.
    모든 사이즈 지원, 모두 같은 내용, 코딩을 한번만 한다

    링크 참고

  14. 모바일기기를 대응할 때 기준으로 삼는 해상도 사이즈는 몇이며 그 이유는 무엇인가요?

    320을 최소로 잡고, 그것보다 넓으면 100%로 늘리면 되니까!

  15. :first-child와 :last-child가 지원하는 IE의 버전명을 적어보세요.

    7, 9(그래서 퍼스트차일드로 스타일예외처리를 많이 한다.)

  16. 포토샵(또는 다른 그래픽툴)에서 이미지를 자를 때 어떤 기능을 사용하나요? (메뉴명, 단축키 등)
    cmd + t

  17. jpg, gif, png의 차이점을 설명해보세요.
    png: 투명 가능, 용량 작다
    jpg: 이미지 손실이 덜하다
    gif: 움직이는 이미지 제작가능

    나중에 더 자세히

  18. 가상컨텐츠(:before, :after)는 어떤 용도로 사용할까요?
    애니메이션 만들때

    HTML고치지 않고 꾸밀때 (가상요소)

  19. 블럭요소 안의 어떤 자식 요소를 정중앙에 놓는 방법을 알고 있습니까?
    left: 50%
    right: 50%

    일일코딩시에 하겠습니다.

Javascript DOM

1. 요소에 접근하기

하나의 요소 노드를 선택하기

  • getElementById(): 요소 유일한 id특성값 이용
  • querySelector(): CSS선택자 이용. 일치하는 요소들 중 첫 번째 리턴
  • 또한, 돔 트리 내에서 한 요소로부터 다른요소 탐색해갈수 있다.

여러개의 노드 선택

  • getElementByClassName()
  • getElementByTagName()
  • querySelectorAll() 좀 느리다

요소 노드 사이 탐색

  • parentNode : 현재요소의 부모노드 선택 (하나만 리턴)
  • previousSibling / nextSibling : 현재 돔트리내의 이전/다음 형제요소
  • firstChild/lastChild : 현재 요소의 첫/마지막 자식노드

2. 요소 조작하기

텍스트 노드에 접근/수정

  • li요소 선택 후 firstChild속성을 사용해 텍스트 노드를 선택.
  • nodeValue: 텍스트 노드의 유일한 속성.

HTML내용 조작

  • innerHTML : 이 하나의 속성을 통해 모든 자식 요소와 텍스트 콘텐츠에 접근 가능 보안에 취약
  • textContent : 특정 요소의 텍스트 콘텐츠에만 접근
  • createElement()
  • createTextNode()
  • appendChild() / removeChild()

특성 값에 접근/수정

  • className / id
  • hasAttribute()
  • getAttribute()
  • setAttribute()
  • removeAttribute()

Refer

인터랙티브 프론트엔드 웹 개발 교과서 자바스크립트&제이쿼리 (제이펍)

Javascript Short-Circuite Evaluation(단축 평가 값)

논리 연산자들은 왼쪽->오른쪽 순으로 실행됨.
이 연산자들은 결과를 얻게 되는 순간 단축 평가(즉, 평가의 중단)를 시행.
false && 표현식 -> 이미 false발견
true || 표현식 -> 이미 true
그러나 그 결과값은 (반드시 true 또는 false가 아니라) 평가를 중단하게 된 계기가 된 값을 리턴한다.

예제

ex.1

var me = "바보";
var you = (me || "천재"); //"바보"

내용을 가진 문자열은 true니까 you에 me값이 대입된다.

ex.2

var me = "";
var you = (me || "천재"); //"천재"

ex.3

var me = "";
var you = (me || {}); //"천재"

me가 값을 가지고 있지 않은 경우엔 빈 객체 생성

ex.4

vA = 0;
vB = 1;
vC = 2;

if(vA||vB||vC){
    //do something
}
  • 세 값 중 어느 하나라도 true로 취급될 수 있으면 if내의 코드가 실행.
  • 경험 많은 개발자들은 그래서 비용이 높은 코드는 가능한 한 나중에 평가되도록 작성한다.
  • OR연산자를 사용할 땐 true를 리턴할 가능성이 높은 코드를 첫 번째 조건으로 작성하고,
  • AND연산자에선 false를 첫번째로.

참고

인터랙티브 프론트엔드 웹 개발 교과서 자바스크립트&제이쿼리 (제이펍) p.169

Mac 편하게 쓰기 가이드

맥 환경설정

  1. 환경설정 – 트랙패드 에 들어갑니다.
    스크린샷 2015-04-01 오전 11.47.20

  2. 원하는 옵션들을 선택해줍니다. (저는 모두 클릭해두었습니다.)
    동영상을 보면 잘 나와있지만, ‘탭하여 클릭하기’, ‘보조 클릭’, ‘세 손가락으로 드래그하기’는 매우 유용한 옵션입니다 ^_^
    스크린샷 2015-04-01 오전 11.51.12

  3. 환경설정 – spotlight에 들어가서 밑에 ‘Spotlight 검색 키보드 단축키’를 원하는 키 조합으로 바꿔줍니다. (저는 control + space로 하였습니다)
    스크린샷 2015-04-01 오전 11.57.20

  4. 후에 어디서든 지정해둔 키 조합을 쓰면 spotlight창이 열리고, 원하는 어플리케이션을 쳐서 바로 열 수 있습니다. (정말 많이 사용합니다)
    스크린샷_2015-04-01_오후_12_00_12

유용한 앱

1. Evernote

노트를 정리하는 앱입니다. 익숙해지면 상당히 편리하기 때문에 충성하는 사용자들이 많습니다. 분야별로 노트북을 만들고, 그 안에 노트를 만들어 정리합니다.
스크린샷_2015-04-01_오후_12_08_48

2. Skitch

에버노트를 만든 회사에서 함께 만든 앱입니다. 현재 이 글을 정리하는데도 유용히 쓰고 있습니다.
화면(전체/부분)을 캡쳐한 후 간단한 후작업을 할 수 있는데, 하단에 ‘png’를 드래그 앤 드롭해서 많은 곳에 붙여넣을 수 있습니다. 저는 에버노트에 많이 붙여넣습니다.
스크린샷 2015-04-01 오후 12.12.55

3. Better Touch Tool

트랙패드나 매직마우스의 제스쳐로 여러가지 일을 할 수 있게 도와주는 앱입니다.
가장 편한 기능이 화면을 모니터 위/왼쪽 오른쪽 상단/오른쪽 모퉁이 등으로 끌어놓으면 자동으로 크기에 맞게 변하는 것입니다.
매우 유용하게 사용하고 있습니다.
레진엔터테인먼트 > Mac 편하게 쓰기 가이드 > 스크린샷 2015-04-01 오후 12.17.30.png
(우측 끝에 끌어다놓으니 선택한 창이 화면의 반을 차지하게 된다.)
스크린샷 2015-04-01 오후 12.17.30

4. Caffeine

맥 잠자기모드를 방지하는 앱입니다. 실행시키면 상단바에 커피모양이 뜨는데, 이것을 클릭하면 작동합니다.
맥을 닫아놓은채로 USB를 연결해서 충전하고 싶다거나 할 때 사용합니다. (틀어놓은채로 너무 격하게 맥을 이동하지 마세요!)
스크린샷 2015-04-01 오후 12.20.53

5. Th-MakerX

대량의 이미지를 일괄적으로 리사이즈하는 앱입니다.
간단한 인터페이스에 속도랑 성능도 괜찮습니다.

6. Boom (유료)

맥에서 나오는 소리를 더욱 크게 하고 싶다(ex. 개러지밴드로 연주하는데 소리가 작다)
혹은 이퀼라이저를 조정할 때 쓰는 앱입니다. 성능 좋습니다!

7. iCal

mac기본 캘린더입니다. 일정/시간관리를 위해 이러저러 방법들을 다 써봤지만
타임라인관리: iCal 체크리스트관리: Evernote
로 하는것이 저는 편하더군요! 아이폰, 아이패드 연동도 유용합니다.
전체화면_2015__4__1__오후_2_02

8. Time Machine

맥 기본 앱입니다. 외장하드나 기타 저장소를 연결하고, 이 타임머신을 돌려놓으면
그 날짜의 내 맥의 모든 자료들이 저장됩니다. 예전에 맥북 떨어뜨려서 하드 날아갔을때(ㅠㅠ) 이 기능으로 원상복구 했습니다.

기타 단축키

  • 맥 단축키
    • 윈도우의 ctrl+alt+delete의 기능(응용 프로그램 강제 종료) 단축키 : opt + cmd + esc
    • 선택한 프로그램 열기 : cmd + 아래방향키
    • finder에서 상위 폴더로 가기: cmd + 위방향키
    • 오려내서 이동하기 : cmd+c -> 붙여넣을 폴더에 option누르며 오른쪽클릭 -> “여기로 항목 이동” 클릭
    • 종료: cmd + q
    • 설정: cmd + ,
  • 크롬 단축키

참고

http://digitalnomad.kr/22
http://macnews.tistory.com/533