함수 함수를 정의할 수 있다. head 에 정의하고, body 에 호출한다. function 함수명(파라메터 목록){ 실행문; return 값; } 함수호출 함수명(); 함수호출 예시 함수 버튼(button)과 함수(function) 텍스트 값 지정 값으로 바꿔주기 텍스트 값을 읽어오는 함수
개발자 도구 자바 스크립트에서는 코드를 통해 오류를 찾는 것이 아닌, 크롬 등의 브라우저의 개발자 모드를 통해 오류를 찾는다. 크롬의 경우, F12 혹은 도구 더보기 - 개발자 도구를 통해 오류를 찾는다. 개발자 도구 사용법 1. 오류가 발생한다면 개발자 도구 상단에 X 표시가 뜨게 된다. 이를 눌러주면 하단에 나온 에러의 파일 명을 선택하면 이와 같은 페이지가 나오며 오류가 생긴 부분을 알려줍니다. 이를 보고 고치면 끝! 참 쉽쥬?
JavaScript 기본 문법 script 태그는 위치는 상관없다. head 안, body 안 둘 다 가능하다. 배열 자바스크립트의 배열은 대괄호로 표현한다. 제이슨(JSON, JavaScript Object Notation) : 중괄호는 객체, 대괄호는 배열 (중요) var나 let 없이 실행이 가능하다. 자바 스크립트에서의 HTML 사용 아래 문법을 이용해 HTML 을 입력한다. document.write("내용"); ⬇️ 자세한 설명 [JavaScript] JavaScript에서의 HTML 사용 JavaScript 에서의 HTML 사용 HTML 문서에 출력하는 메서드이다. document.write("내용"); JavaScript 와 HTML 실행 JS에서 정의한 값을 메서드 문법을 사용해 불러오면..
JavaScript 에서의 HTML 사용 HTML 문서에 출력하는 메서드이다. document.write("내용"); JavaScript 와 HTML 실행 JS에서 정의한 값을 메서드 문법을 사용해 불러오면 다음과 같은 결과를 볼 수 있다.
dotted 테두리가 점으로 이루어진 스타일이다. #d1 {border-style: dotted;} dashed 테두리가 짧은 선으로 이루어진 스타일이다. #d2 {border-style: dashed;} solid 테두리가 두꺼운 선으로 이루어진 스타일이다. #d3 {border-style: solid;} double 두개의 얇은 선으로 이루어진 스타일이다. #d4 {border-style: double;} groove 일반 선으로 이루어진 스타일이다. #d5 {border-style: groove;} ridge 입체감 있는 선으로 이루어진 스타일이다. #d6 {border-style: ridge;} inset 왼쪽과 상단에 음영이 들어간 음각 모양으로 이루어진 스타일이다. #d7 {border-sty..
기본 배경 #b1{ background-color:lavender; } 배경 반복 이미지는 작은 이미지를 넣어야 반복된다. (아래에 이미지 공유) #b2{ background-image:url("../img/star.png") } X축만 반복 #b3{ background-image:url("../img/star.png"); background-repeat: repeat-x; } Y축만 반복 #b4{ background-image:url("../img/star.png"); background-repeat: repeat-y; } 반복 없이 위치 지정 #b5{ background-image:url("../img/star.png"); background-repeat:no-repeat; background-pos..
div div 는 영역을 설정하는 코드이다. 앞서 간략히 설명했던 div 기능에 대해 자세하게 설명해보겠다. [HTML] HTML 기본기능, 영역 설정 줄이 분리된다. 줄이 바뀌며 고유한 본인의 영역이 생긴다. 가나다 라마바 이전 내용의 바로 옆에 출력된다. 앞에 연결이 되어야하기 때문에 스타일이 적용되지 않는다. abc def skylarcoding.tistory.com 1. static div 영역들을 순서대로 배치한다. 2. relative 상대 위치이다. 기준점 (앞요소) 으로부터 위에서. 왼쪽으로 얼만큼 떨어진 위치로 설정한다. #div2{ width:100px; height:100px; background-color:papayawhip; /* top, left : 얼만큼 떨어진 건지 지정 */..
CSS 사용 용도 HTML을 더 편하게 꾸미는 코드. 요소 선택 태그명/id/class CSS 작성법 페이지 전체에 적용 : aaa bbb ccc ddd eee fff ggg hhh 이 모든 것들이 한 파일 안에 들어가 있으면 복잡하니, 코드를 CSS 파일로 저장해 필요할 때마다 import 하는 방법이 있다.
CSS 파일 링크 css 스타일을 파일로 만들어 적용한다. CSS 파일을 생성 mystyle.css 파일을 생성해준다. CSS 파일 생성하면된다. 복잡한 CSS 요소를 파일로 따로 저장해주고 HTML 에서 불러오는 것이다. @charset "UTF-8"; h1 { width: 150px; height: 100px; background-color: yellow; } body { color: blue; } /* id를 할당하고 그에 따라 디자인 채워넣기 */ /* 아이디가 h1_1인 요소 */ #h1_1 { color: red; } /* h1요소 중에서 아이디가 h2_2 인 요소 */ h1#h1_2 { color: green; } /* 태그 종류 상관없이 클래스가 c1인 요소 */ .c1 { backgrou..
폼 사용자가 입력한 데이터를 서버 페이지에 제출 ➡️ 서버 페이지는 전달한 값들을 받아서 처리 폼 양식 폼의 id는 HTML에서 유일한 이름 지어주는 방법이기 때문에 중복되면 안 된다. 타입 submit는 데이터를 전송해준다. 경로를 사진 파일로 변경하면 데이터 전송을 클릭할 때 아래와 같은 결과를 얻을 수 있다. 폼 양식(사진연결) 폼 양식 종류 name 은 해당 데이터의 이름이다. id : pwd : phone : color : date : 각자의 input 은 오른쪽 사진과 같은 결과를 얻어낸다. text 텍스트를 받아온다 password 텍스트를 암호화 처리해 보여준다 number 숫자만 입력할 수 있게 처리해준다. color 색상을 선택할 수 있다. date 날짜를 선택할 수 있다. 체크박스 체..
