블로그에 웹 소스코드를 테스트하고 공유할 수 있는 온라인 코드 플레이그라운드를 비교해보았다. codepen.io See the Pen test by yunbinni (@yunbinni) on CodePen. jsfiddle.net

Shortcuts(단축키) [Ctrl] + [`] TERMINAL로 포커싱한다. [Ctrl] + [0] 탐색기 사이드바에 포커싱한다. 파일을 검색하려면, 바로 검색어를 입력하면 된다. [Ctrl] + [ , [Ctrl] + ] 현재 행을 들여쓰기 또는 내어쓰기 해준다. [Ctrl] + [A] 후, [Ctrl] + [K] 누르고 [Ctrl] + [F] html 태그들을 보기 좋게 가지런히 정렬해준다. [Ctrl] + [D] 현재 커서에 있는 단어를 선택해준다. [Ctrl] + [Enter] 커서가 줄 끝에 있지 않더라도, 바로 아랫 줄로 Enter해준다. [Ctrl] + [Shift] + [K] 현재 행을 삭제한다. [Ctrl] + [PageUp], [Ctrl] + [PageDown] 작업 탭을 이전 또는..

외부 스크립트 파일 연계시키기 JS 기본 입출력 alert - 알림 창 출력하기 alert("안녕하세요?") confirm - 확인 창 출력하기 var reply = confirm("정말 배경 이미지를 바꾸시겠습니까?"); prompt - 프롬프트 창에서 입력받기 var name = prompt("이름을 입력하세요.", "기본값"); document.write() - 웹 문서에 내용 출력하기 console.log() - 콘솔 창에 내용 출력하기 어서오세요 ※ 크롬에서 콘솔 창 띄우기 단축키 : Ctrl + Shift + J 기본문법 변수 선언 var 변수명; var season = ["봄", "여름", "가을", "겨울"] undefined 유형 : 자료형이 정의되지 않은 데이터 null 유형 : 데이터..

CSS 선택자 기본 선택자 예시 의미 * { } 전체 요소 p { } p 태그 .exclass { } exclass라는 class를 사용하는 태그 #exid { } exid라는 id를 사용하는 태그 (한번만 적용 가능) 고급 선택자 예시 의미 section p { } section 요소의 모든 p 요소 선택 (자식의 자식까지 적용) section > p { } section 요소의 바로 아래 p 요소 선택 h1 + p { } h1 요소의 바로 다음 형제 p요소 선택 h1 ~ p { } h1 요소의 모든 형제 p 요소 선택 a[href] a 요소 중에서 href 속성이 있는 요소 선택 a[target = _blank] a 요소 중에서 target속성값이 _blank인 요소 선택 [class ~= butto..

기본 태그 HTML은 머리(head)와 몸(body)로 이루어져있다고 생각하면 편하다. head는 HTML의 전반적인 특성을 설정하는 곳이다. body는 화면에 그려질(render) 내용들을 넣는 곳이다. 태그 의미 웹 문서의 유형을 html로 지정 모든 html 태그들의 최상위 태그 문서의 공통적인 특성들을 넣는 곳, 전역특성 메타 데이터 입력 문서의 제목 문서의 본문, 여기에 내용을 나타낸다. 예) See the Pen 기본 태그 by yunbinni (@yunbinni) on CodePen. 내용 입력 제목 h1, h2, …, h6 (heading) See the Pen 문서 구조 태그 by yunbinni (@yunbinni) on CodePen. 문단 p(paragraph) See the Pen..