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 하태호)
cmd + shift + p 를 누른 후 install package 실행
sublime REPL 검색후 설치
sublime text 재부팅 후
Tool -> sublime REPL -> shell 선택
(출처: 손영수 교수님)
<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){} //마지막 도시락 선택됨(선택한 태그를 셈)
Tobyyun님의 Markup Level Test를 풀고 점검을 받았습니다.
첫 라인이 제가 쓴 답이고(대부분 틀렸어요 ^.^….눈물)
들여쓰기 되어있는 것이 첨삭받은 것입니다.
HTML렌더링 모드, 독타입이 없으면 quirks mode로 간다.(스탠다드-웹표준, 얼모스트 스탠다드, 쿽스 모드) CSS를 해석하는 방법이나 등등이 깨질 수 있다.
<strong> , ?
시맨틱!!!
<strong>,<em>
<img>, <div>, <header>, , <table>, <li><p>, <a>, <strong>, <span>
블록: div, p, section, article
인라인: span, a, img, b, u, i….
인라인 스타일(style=”property:value”)을 가급적 사용하지 말아야 할 이유는 무엇일까요?
유지보수가 힘들다(왔다갔다)
구조와 표현의 분리
<img src="경로/myPhoto.jpg" />
<img src="경로/myPhoto.jpg" alt="대체텍스트">//알트 꼭 쓰기
‘TopArea’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?
첫글자가 소문자가 아니다
Top이라는 방향성을 가지고 있기 때문. 접근성차원에서도 방향은 의미 없으므로.
HTML5에 새롭게 추가된 aside 태그는 어떤 용도로 사용해야 할까요?
사이드 메뉴
HTML5 Doctor의 콘텐츠 요소 판별법 참고
컨텐츠의 주요 내용이 아니고 부수적인 내용일때
label꼭 달자
위의것은 스크린리더에서 안읽어줌. 우리 사이트 a11y클래스 참고
나중에 알려줄게요.
박스 모델을 알고있나? 지금은 컨텐트박스가 표준. box-sizing으로 변경 가능 =
좌표를 재정의할때 쓴다
크로스 브라우징을 목적으로
id, class, inline style, !important를 우선순위 순으로 나열해보세요.
!important > inline style > id > class
CSS에서 상속이 되는 속성을 2개만 꼽아보세요.
display? position?
위 것들은 다 상속 안되는것들이고, color:red나 사이즈 같은거 상속됨.
파일 요청횟수
background-position
graceful degration(우아한 낮춤?!) ttf만 쓰면 구형 인터넷익스플로러에선 안된다. eot, svg같은걸 추가 (ttf, eot파일 두개만 있으면 거의 다 지원된다.)
앞에 webkit, moz같은게 붙는거.
링크 참고
320을 최소로 잡고, 그것보다 넓으면 100%로 늘리면 되니까!
7, 9(그래서 퍼스트차일드로 스타일예외처리를 많이 한다.)
jpg, gif, png의 차이점을 설명해보세요.
png: 투명 가능, 용량 작다
jpg: 이미지 손실이 덜하다
gif: 움직이는 이미지 제작가능
나중에 더 자세히
HTML고치지 않고 꾸밀때 (가상요소)
일일코딩시에 하겠습니다.
인터랙티브 프론트엔드 웹 개발 교과서 자바스크립트&제이쿼리 (제이펍)
논리 연산자들은 왼쪽->오른쪽 순으로 실행됨.
이 연산자들은 결과를 얻게 되는 순간 단축 평가(즉, 평가의 중단)를 시행.
false && 표현식 -> 이미 false발견
true || 표현식 -> 이미 true
그러나 그 결과값은 (반드시 true 또는 false가 아니라) 평가를 중단하게 된 계기가 된 값을 리턴한다.
var me = "바보"; var you = (me || "천재"); //"바보"
내용을 가진 문자열은 true니까 you에 me값이 대입된다.
var me = ""; var you = (me || "천재"); //"천재"
var me = "";
var you = (me || {}); //"천재"
me가 값을 가지고 있지 않은 경우엔 빈 객체 생성
vA = 0;
vB = 1;
vC = 2;
if(vA||vB||vC){
//do something
}
인터랙티브 프론트엔드 웹 개발 교과서 자바스크립트&제이쿼리 (제이펍) p.169
환경설정 – spotlight에 들어가서 밑에 ‘Spotlight 검색 키보드 단축키’를 원하는 키 조합으로 바꿔줍니다. (저는 control + space로 하였습니다)
후에 어디서든 지정해둔 키 조합을 쓰면 spotlight창이 열리고, 원하는 어플리케이션을 쳐서 바로 열 수 있습니다. (정말 많이 사용합니다)
노트를 정리하는 앱입니다. 익숙해지면 상당히 편리하기 때문에 충성하는 사용자들이 많습니다. 분야별로 노트북을 만들고, 그 안에 노트를 만들어 정리합니다.
에버노트를 만든 회사에서 함께 만든 앱입니다. 현재 이 글을 정리하는데도 유용히 쓰고 있습니다.
화면(전체/부분)을 캡쳐한 후 간단한 후작업을 할 수 있는데, 하단에 ‘png’를 드래그 앤 드롭해서 많은 곳에 붙여넣을 수 있습니다. 저는 에버노트에 많이 붙여넣습니다.
트랙패드나 매직마우스의 제스쳐로 여러가지 일을 할 수 있게 도와주는 앱입니다.
가장 편한 기능이 화면을 모니터 위/왼쪽 오른쪽 상단/오른쪽 모퉁이 등으로 끌어놓으면 자동으로 크기에 맞게 변하는 것입니다.
매우 유용하게 사용하고 있습니다.
레진엔터테인먼트 > Mac 편하게 쓰기 가이드 > 스크린샷 2015-04-01 오후 12.17.30.png
(우측 끝에 끌어다놓으니 선택한 창이 화면의 반을 차지하게 된다.)
맥 잠자기모드를 방지하는 앱입니다. 실행시키면 상단바에 커피모양이 뜨는데, 이것을 클릭하면 작동합니다.
맥을 닫아놓은채로 USB를 연결해서 충전하고 싶다거나 할 때 사용합니다. (틀어놓은채로 너무 격하게 맥을 이동하지 마세요!)
대량의 이미지를 일괄적으로 리사이즈하는 앱입니다.
간단한 인터페이스에 속도랑 성능도 괜찮습니다.
맥에서 나오는 소리를 더욱 크게 하고 싶다(ex. 개러지밴드로 연주하는데 소리가 작다)
혹은 이퀼라이저를 조정할 때 쓰는 앱입니다. 성능 좋습니다!
mac기본 캘린더입니다. 일정/시간관리를 위해 이러저러 방법들을 다 써봤지만
타임라인관리: iCal 체크리스트관리: Evernote
로 하는것이 저는 편하더군요! 아이폰, 아이패드 연동도 유용합니다.
맥 기본 앱입니다. 외장하드나 기타 저장소를 연결하고, 이 타임머신을 돌려놓으면
그 날짜의 내 맥의 모든 자료들이 저장됩니다. 예전에 맥북 떨어뜨려서 하드 날아갔을때(ㅠㅠ) 이 기능으로 원상복구 했습니다.
블로그 이사갔어요! https://milooy.github.io/ 