컴과생의 끄적끄적

함수 : 코드의 유지보수 / 길이 / 가독성 측면에서의 장점들

5장. 폼 활용하기 5.1 폼 이해하기 요소의 사용 회원가입, 상품구매, 키워드 검색 등 사용자로부터 정보를 받을 때 사용자와 애플리케이션이 상호작용 (사용자 입력⇒전송버튼⇒애플리케이션(서버 측)에 전달⇒실행결과 반환) 요소의 역할 사용자가 입력하는 정보를 하나로 묶어서 애플리케이션에 전달 다양한 입력 양식을 그룹핑하고 전송방법을 설정 요소 내 사용자의 정보 입력 방식 , , 등의 입력 요소를 이용 method 속성: 데이터 전송 방식 지정 get 방식: 전송할 데이터를 URL 주소 뒤에 포함 (엽서의 특징 ㅡ 데이터가 한정적, 보안에 취약. 적은 양 데이터 보낼 때) post 방식: 프로그램의 입출력 방식을 사용, 데이터 양에 제한 없다. (편지의 특징 ㅡ 데이터 양의 제한 X, 보안 유지 가능. 많은..

4장. 링크와 멀티미디어 표현하기 4.1 링크 달기 4.1.1 하이퍼텍스트와 링크 하이퍼텍스트 : 서로 연관된 문서나 텍스트 조각들을 연결하여 원하는 정보를 찾아갈 수 있도록 해주는 것 (노드와 링크로 표현) 하이퍼미디어: 텍스트 뿐아니라, 이미지, 그래픽, 오디오, 비디오 등의 멀티미디어 정보가 연결 노드: HTML 문서나 멀티미디어 정보를 표현하는 기본단위 링크: 노드를 연결하여 내비게이션이 가능하도록 하는 구성요소 앵커: HTML 문서 내에서 링크의 출발점이나 도착점을 의미 앵커 영역: 앵커가 설정되어 있는 영역 외부문서 연결 & 문서 내 다른 지점 (책갈피) 4.1.2 문서 간 이동 숙명여자대학교 title 속성: 하이퍼링크에 설명을 하고 싶을 때 사용 target 속성: 연결된 웹 문서를 여는 ..

3장. 문서 구조 표현하기 3.1 표 그리기 3.1.1 표의 기본 구조 ■ 테이블 ⇒ 구성 요소: , , , : 테이블 행(row) : 테이블 머리글 : 각 셀의 데이터 3.1.2 표의 구조적 표현 셀 합치기 - rowspan(위아래 병합), colspan(옆 칸 병합) 속성 내용 : 표의 제목 , , : 표의 머리줄, 몸체, 꼬리줄 표현 (몸체만 스크롤 가능) 3.2 문서 구조화 하기 3.2.1 문서 구조화 요소 머릿말 : 외부 스타일시트 () 인라인 스타일시트 (~) ... + @import 방식

2장. HTML5 문서 기본 이해하기 HTML (HyperText Markup Language) 웹을 위한 하이퍼텍스트 문서 작성 언어 웹 브라우저에서 보여지는 문서의 내부형식을 규정 *.htm, *.html 2.1 문서 기본구조 : HTML5 문서 규약으로 만들어진 웹 문서 표시 : 현재 파일이 html 문서라는 지시사항을 나타낸 태그 - 요소(Element) : HTML 문서 일부분의 특징을 지정하는 개별적 부분 단독태그 / 복합태그 - 속성(Attribute) : 요소에 추가 정보를 주기 위해 사용 - 특수문자 공백 > " " & & © 카피라이트 2.2 문서 꾸미기 2.2.1 단락 제목과 줄 제목(Headline) : n=1(큰)~6(작은) 단락(Paragraph) : 줄을 바꾸면서 동..

HTML과 Javascript는 모두 컴퓨터 언어다. 하지만, HTML은 Javascript와는 달리 컴퓨터 프로그래밍 언어는 아니다. 프로그램 : 프로그램에는 순서라는 의미가 있고, 프로그래밍은 이러한 순서를 만드는 행위를 말한다. 조건문 *토글: 하나의 버튼으로 모드를 바꿔주는 기능을 함. (사전적으로는 1과 0을 반복적으로 되풀이하는 상태의 의미) 비교 연산자 === : 왼쪽과 오른쪽이 같은지 판단. 같으면 True, 다르면 False (T/F를 합쳐 Boolean이라 한다). var value = document.getElementById(id).value; value 값 가져오는 방법 (.value) 예제: 조건문을 활용해 day-night 토글 버튼 만들기 리팩토링 : 비효율적이 코드를 효율적..

JavaScipt HTML : 정적, Javascript: 동적 HTML을 이용해 웹 페이지를 만들고, Javascript를 이용해 사용자와 상호작용할 수 있도록 한다. 1. 자바스크립트는 사용자와의 상호작용 역할을 한다. 2. 웹 브라우저는 한번 화면에 출력되면 자기자신을 바꿀 수 없다. 태그 : HTML에서 Javascript 코드를 사용하기 위해서 script 태그를 사용할 수 있다. * 참고. HTML로 쓴 코드는 정적이기 때문에 문자 그대로를 출력하지만, Javascript 코드는 동적으로 이를 계산할 수도 있다. 이벤트 : 웹 브라우저에서 일어나는 유용한 사건 예) onclick 이벤트: 사용자가 어떤 것을 클릭하는 사건 onchange 이벤트: 입력창에서 사용자가 키보드를 이용해 무언가 입력..

16강 프론트엔드 개발자라면 필수로 알아야 하는 브라우저 101 필수 개념과 게임 프로젝트 WEB APIs(기본)/DOM/Events/브라우저와 JS의 runtime 환경 등.. 17강 개발자 취업을 위한 포트폴리오 만들기 1) 왜 프로젝트로 공부해나가야 하는지 : 프로젝트 단위로 공부해야 실용적인 방법들을 많이 배울 수 있고, 성취감을 느낄 수 있다. 문제해결능력★을 연습할 수 있는 좋은 기회! 2) 포트폴리오를 어떻게 만들어 나가면 좋은지 : 프론트엔드로 예를 들자면 HTML+CSS-> 정적인 반응형 웹사이트, JavaScript-> 동적인 웹사이트(서버에서 데이터를 받아옴) *node.js를 이용해서 백엔드 구축은 보너스, 프레임워크를 이용한 SPA 만듦. 3) 포트폴리오에 추가할 프로젝트는 어떤 ..

13강 프론트엔드 공부 시 유용한 노트 작성법 및 비쥬얼 스튜디오 코드 코멘트 색상 변경 방법 "editor.tokenColorCustomizations":{ "comments": "#ffc2c2(색상)" } 14강 웹사이트 따라 만들기, 반응형 헤더편 First. 블럭(구역) 나누기 무료 아이콘 사용 Font Awesome Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 실습 http://file:///C:/websys/2111490/htmlstudy/0510.html 15강 클론코딩 유튜브 사이드 ..

07강 CSS 셀렉터, 기초 이론 정리 1. 의미, 정의 CSS=Cascading & Style Sheet * !important : 연결고리를 무시하고 가장 중요한 스타일이 됨.(가능하면 쓰지 않는 것이 좋다.) 2. 선택자(selectors) universal * type Tag ID #id Class .class State : Attribute [] number1 number2 순서없는 리스트 3. 스타일링 .box{ width: 100px; height: 100px; padding: 20px; margin: 20px; border: 2px dashed pink; background: aliceblue; } * 가능한 속성값 확인 사이트 CSS Reference - A free visual guid..