Study, 2022

자바스크립트 (JavaScript) - 웹 페이지의 동작을 담당한다. - 변수를 지정해 계산이 가능하다. getElementById() - id로 지정한 요소를 가지고 와 원하는 동작을 실행할 때 사용한다. 변수 설정 - array.toString() - 배열 속 요소들을 모두 출력할 수 있다. function - 스크립트 태그 내부에서 함수를 만들 수 있다. - input을 받을 때 id를 통해 변수로 사용할 수 있다. 당신이 가장 좋아하는 숫자는?: Try it

Responsive Web Design - 사용자의 웹 화면 크기에 따라 보여지는 컨텐츠의 배치가 달라지는 것 - 자바스크립트가 아닌 HTML과 CSS를 사용하여 제작한다. 화면 너비에 따라 컨텐츠 구성을 바꿀 때 - @media only~ 사용 - max-width로 각각의 조건을 설정한다. .responsive { padding: 0 6px; float: left; width: 24.99999%; } @media only screen and (max-width: 700px){ .responsive { width: 49.99999%; margin: 6px 0; } } @media only screen and (max-width: 500px){ .responsive { width: 100%; } } 이미..

CSS Background Border - 배경의 border radius를 조정하여 배경 모양을 변화시킬 수 있다. #1 border-radius: 25px; #2 border-radius: 15px 50px; transparent 속성 - 테두리를 투명하게 지정한다. - border를 영역만 남기고 숨기고 싶을때 사용한다. (참고: mylife365.tistory.com/67) border: 10px solid transparent; multiple background - 배경에 여러 이미지를 삽입할 수 있다. - 이미지 url 뒤에 위치를 선정할 수 있다. background: url(/2021Camp/images/club.jpg) left top no-repeat, url(/2021Camp/ima..

CSS Syntax CSS selector - element selector p { text-align: center; color: red; } - id selector #para1 { text-align: center; color: red; } - class selector .center { text-align: center; color: red; } 특정 element에서만 사용되는 특정 클래스 스타일을 정의할 때 p.center { text-align: center; color: red; } This paragraph refers to two classes. 스타일을 모든 HTML element에 적용할 때: * 을 사용 * { text-align: center; color: blue; } CSS ..

문제> lable이 textarea의 아래쪽에 위치 해결> css 에 vertical-align: top 추가 textarea { vertical-align: top; }

HTML Form 태그 안에 전송하고자 하는 정보를 입력 받아 전달 할 수 있다. 태그 설명 텍스트 입력 여러 항목 중 하나 선택 0개 이상의 선택 제출 버튼 표시 클릭 가능한 버튼 표시 target 태그 설명 _blank 새 탭 또는 새 창에 표시 _self 현재 창에 표시 _parent 상위 프레임에 표시 _top 창의 전체 본문에 표시 framename framename 의 이름을 가진 iframe에 표시 method - 입력 데이터를 제출할 때 HTTP 메소드 설정하는 것 - get 또는 post로 전송할 수 있다. (디폴트 값: GET) autocomplete - 양식 자동완성 기능 - on 또는 off 로 설정할 수 있다. novalidate - 입력 데이터 제출 시 유효성 검사 (boolea..

1. dothome 호스팅 서비스 사용 2. VS Code 설치 (code.visualstudio.com/download) Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications. code.visualstudio.com 3. Extension 설치 - HTML..

HTML - Hyper Text Markup Language - 웹페이지를 만드는 표준 언어 - 컨텐츠를 설명하는 방식으로 웹페이지의 구조를 나타낸다. 태그 설명 해당 문서가 html5 문서라는 것을 나타냄 웹페이지의 시작과 끝을 나타내는 요소 html 페이지의 메타 정보를 포함 웹페이지 탭에 나타나는 html 페이지의 제목 웹페이지에 보이는 모든 내용을 정의하는 문서의 본문 HTML Link 태그 설명 _self 클릭한 창에서 링크 연결 _blank 새창 또는 새탭에서 링크 연결 _parent 상위 프레임에서 링크 연결 _top 창의 전체 본문에서 링크 연결 My homepage link HTML Image alt: 그림이 랜더링되지 못했을 때 나타나는 글자 태그 설명 단락을 정의 단락을 나눌 때 수평..