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

외부 스크립트 파일 연계시키기 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..