Code Playground

< h1 > Code Playground </ h1 >

[1] Javascript 작성 방법: HTML 소스 코드에 포함되는 형태로 작성된다. [2] HTML 소스코드에 포함시키기:다음의 코드를 HTML 소스코드 안에 명시. 일반적으로 에 위치한다. ... [3] 외부 파일에 대한 참조를 포함시키기:``` [4] 콘솔: 웹 브라우저에서 화면에 표시되는 것과 관계없이 어떠한 내용을 출력하기 위한 공간. [5] 변수데이터를 저장하기 위한 키워드. 변수를 사용하기 위해서는 선언과 할당의 과정이 필요하다. ```javascriptvar 변수이름; // 변수의 선언변수이름 = 값; // 선언된 변수에 값 할당``` [6] 선언과 할당을 결합한 형태...javascriptvar 변수이름 = 값;... 변수의 이름은 영어+숫자+언더바의 조합으로 구성한다.띄어쓰기가 필요한..

Day8 -background- [1] background background-color -> 배경색상 지정background-image : url("파일경로"); -> 배경이미지background-repeat : repeat/ repeat-x / repeat-y /no-repeat; ->배경이미지 반복 설정background-attatchment : scroll / fixed; -> 스크롤에 따른 배경 이미지 처리background-position :left/ right/ top/ bottom /center /px값; -> 배경 이미지 위치 background: 위의 다섯가지 속성을 공백으로 구분하여 일괄 명시. 불필요한 요소는 생략 가능. [배경관련 속성 활용] - 이미지에 텍스트가 포함된 경우1) ..

Day7 -Position- 1. Position속성: 위치를 자유자제로 이동하기 위한 방법static 기본값relative 상대위치(원래 위치 기준으로 이동)absolute 절대위치(부모 위치 기준)fixed (=absolute, 스크롤 여부와 상관없이 화면 고정) position:fixed로 적용하면 다른 요소가 그 위치로 밀려 올라올 수 있음.-> 그 만큼 padding을 부여해야 함. position: relative;top: 30px;left: 30px; 2. z-index : 요소들의 겹치는 순서 결정 -값이 클수록 위에 떠있음 ---> z-index를 아무리 써도 플래시는 못 덮음 3. 절대좌표 방식으로 할 때 부모에게 position속성이 부여되면 부모를 기준으로 좌표를 설정한다. --->..

Day6 -Display/Float- Display 속성 1. display: block; --->width와 height 적용O / 자동 줄바꿈block-level 요소의 기본값어떤 요소를 문단처럼 구성할 수 있음 2. display: inline; --->width, height 적용X / 줄바꿈Xinline-level 요소의 기본값어떤 요소를 문장처럼 구성할 수 있음 3. display:inline-block; --->width,height적용O / 문장으로 형성(줄바꿈X)크기 지정이 가능한 문장요소inline-block으로 적용 시 가로로 배치되는데 박스 사이에 공백이 생긴다.공백 제거(코드 상의 줄바꿈을 주석으로 처리박스1박스2 4. display:none; --->화면 표시 X(숨김) -JS와..

Day5 -CSS 박스 모델- 박스=Block Level 요소 (...) [1] 박스의 크기를 결정하는 요소 1. 내용 영역의 넓이 --->width, height: px단위, %특별히 설정되지 않은 경우 넓이는 부모 가득, 높이는 내용만큼.고정값을 갖기 때문에 한 번 값이 부여되면 늘어나거나 줄어들지 않는다. 2. 테두리 --->border: width(px) style(solid dashed dotted none) color;-border-top/border-right/border-left/border-bottom 3. 내용 영역~테두리 사이의 여백 --->padding값을 하나만 지정하는 경우: 상, 하, 좌, 우 동일 지정값을 두 개 지정하는 경우: 상, 하 / 좌, 우값을 네 개 지정하는 경우:..

Day3~4 -CSS/글자 속성- [1] HTML 태그 분류 Block Level: fieldset / blockquote / form / ul , ol , li / h1~h6 / p / div / table관련 tag / address / noframes / center/ dir / hr / menu / dl / pre Inline Level: a / img / span / br / input / strong / label / textarea / i / select / u / iframe / strike / abbr / button / sub / q / font / q [2] 적용 방법 1. head태그 2. 외부 파일 링크 [3] Selector 1. tag 이름h1 { color: #222; } 2..

Day3- input태그를 이용한 입력양식- [1] XHTML에서 사용되던 태그 --->영역 지정 ->파일 첨부를 위해 ->get: 속도 빠름/보안 취약/ 글자 1024제한/새로고침O ->post: 속도 느림/보안 나음/글자 무제한/새로고침X --->그룹 형성 ---> 그룹 제목 표시 제목-기타 들어갈 수 있는 속성: placeholder: 설명글 ex)아이디를 입력하시오. 제목 --->JS와 같이 사용 -> 제출 ->모든 입력 내용 삭제=버튼 표시 텍스트 ->이미지 버튼 ... 화면표시 내용 ...기본적으로 작성되어있을 내용 [2] HTML5에서 추가된 태그

Day2- 문장 꾸미기/테이블/멀티미디어- [1] 문장/단어 강조1. 폰트 태그.... , 굵게 기울임 / 밑줄 2. ...: CSS스타일을 적용하기 위한 영역 지정 3. ...: 형광펜 기능 4. ... 링크 기능 -"#"-현재 페이지로 이동 / "#id값" -그 id값 위치로 이동 [2] 테이블 만들기 ---> 상단 제목 영역(생략가능) --->1줄 ->열의 제목 ->열의 내용 --->본문(생략가능) --->하단(생략가능) (기타) rowspan (th, td에 적용 가능) 행 병합(세로로 병합) colspan (th, td에 적용 가능) 열 병합(가로로 병합) [3] 멀티미디어 1. 이미지: 2. 이미지 상대경로 표시법../ ---> 한 칸 위로./ ---> 현재 폴더ex) folder1/photo..

Day1 -HTML의 기본구조- 1. 기본 구조 2. 단락관련 태그~: 제목, / : 리스트(ordered, unordered): 본문: 인용문: 영역 나눔: 직선 표시 / : 줄 바꿈: 주소, 저작권(카피라이트), 회사 연락처 등등 *id 속성: -웹 페이지에서 고유한 요소를 의미하는 값. -특수문자:© :카피라이트 특수문자 :띄어쓰기 & :&: ---> >: « 내용 »왼쪽 화살표/오른쪽 화살표: ← / → *구조를 표현하기 위한 기타 시멘틱 태그들: 주로 ~와 같이 사용: 사이트 앞머리, 머릿글, 사이트 소개 등등: 블로그 포스팅, 뉴스 기사, 회사 소개 등: 본문과 상관없는 사이드바/배너 영역: 페이지 하단:주로 메뉴: 제목과 관련 부제목 하나로 묶기