Web/HTML CSS JS 17

css - 외부 스타일시트 불러오기, 인라인 스타일 시트, 선택자

외부 스타일 시트 가저오기 css상단에 html charset 과 같은 내용을 써줘야함 ; 안붙이면 적용안됨 @charset: "UTF-8"; p{ color: deeppink; } 사과사과사과 @import를 사용해서 불러올 수도 있음 사과사과사과 인라인 스타일은 우선순위가 높지만 유지보수가 힘들어서 거의 안쓴다고 함 초콜렛 선택자 표현할 대상이 되는 부분 h1 { color:red; } h1: 선택자 color : 속성 red: 속성값 color:red; : 선언 {color:red;} : 선언부 타입 선택자 id 선택자 id 선택자 적용 안됨 class 선택자 class 선택자 하위 선택자 하위 선택자 하위 선택자 (id 지정) 자식 선택자 자식의 자식 자식의 자식 자식 선택자 인접 선택자(그룹선택..

Web/HTML CSS JS 2020.10.23

HTML - form, input type 속성, text area, select, 주요 입력 속성

블록 레벨 요소 입력한 값들을 처리하는 프로그램으로 전달 텍스트, 인라인, 블록 요소 포함 블록 레벨 요소 양식 요소 그룹화 텍스트, 인라인, 블록 요소 포함 자식: 그룹화된 서식 제목 정의 서식에서 작성한 값을 처리하는 URL 지정 서식의 값들을 서버 프로그램에 전달하는 방법 정의 get, post 인라인 요소 데이터 값 입력 type속성에 따라 다양한 폼 컨트롤러 생성 공통으로 name, value 속성을 가짐 로그인 text: password: search: email: tel: color: number: range: radio(Y/N): checkbox: 1 2 3 submit: reset: button: image: file: hidden: 파일 선택 클릭시 여러줄 입력 가능한 텍스트 박스 중 ..

Web/HTML CSS JS 2020.10.22

html - map, text, list, table

1. map 엑셀로 대충 만든 지도 이미지에 링크 걸기 map 태그를 사용하면 이미지 중 도형으로 구역을 설정해서 링크를 달 수 있다. 이미지 좌표는 그림판으로 간단하게 확인할 수 있다 A를 누르면 이동 2. text em 태그: 기울여짐(강조) strong 태그: 굵어짐(강조) b 태그: 굵어짐(의미없음) mark 태그: 노란 줄 small 태그: copyright sub 태그: 아래첨자 H2O sup 태그: 위첨자 100m2 3. ol, ul, li : 순서 목록 : 비순서 목록 (동그라미 나옴) => 둘다 자식으로 반드시 포함 대분류 1 소분류 1 소분류 2 소분류 3 대분류 2 소분류 1 소분류 2 소분류 3 대분류 3 소분류 1 소분류 2 소분류 3 4. dl : 설명 목록을 나타냄 : 설명할 ..

Web/HTML CSS JS 2020.10.21

HTML - 블록 레벨 요소, 인라인 요소, a 태그 관련

블록 레벨 요소 줄 바꿈이 있는 것 인라인 요소와 텍스트 요소를 자식으로 쓸 수 있음 ex) 어쩌고 같은 블록 요소라도 자식으로 사용할 수 있는 것이 있고 아닌 것이 있음 , , 태그 등이 있다. 인라인 요소 줄 바꿈이 없는 것 인라인 요소와 텍스트 요소만을 자식으로 쓸 수 있음 블록 레벨 요소는 자식으로 못 씀 html 5에는 좀더 복잡한 콘텐츠 모델이라는 것으로 대체되었음 HTML 5.2: 3. Semantics, structure, and APIs of HTML documents Every XML and HTML document in an HTML UA is represented by a Document object. [DOM41] The Document object’s URL is defined ..

Web/HTML CSS JS 2020.10.19

Java Script - 비동기 프로그래밍 2 (async, await, Promise API (all, race))

promise 를 조금더 간결하게 사용하게 하고 동기적 실행처럼 보이게 해준다. promise chain (then => then => then ..) 을 일반적인 동기적 코드를 작성하는 것처럼 간편하게 해준다. 1. async promise 로 작성시 //1.1 promise function fetchUser() { return new Promise((resolve, reject) => { resolve('홍길동'); }); } const user = fetchUser(); user.then(console.log); async를 이용하여 작성시 promise를 쓰지 않아도 promise를 리턴하고 비동기 실행한다. //1.2 async - promise를 쓰지 않아도 promise 비동기 실행 asyn..

Web/HTML CSS JS 2020.09.28

Java Script - 비동기 프로그래밍 1 (callback, promise)

2020.07.13. 수업내용 - node.js (1) 참고할 사이트 1. node.js 다큐먼트 Index | Node.js v13.14.0 Documentation nodejs.org 2. java script 다큐먼트 JavaScript JavaScript(JS)는 가벼운 인터프리터 또는 JIT 컴파일 프로그래밍 언어로, 일급 함수.. srk911028.tistory.com 다시 복습~ 자바 스크립트는 동기적 언어(synchronous) 동기 방식(sync) hoisting이 된 이후부터 순차적으로 한줄 한줄 실행 (hoisiting: var, function 선언을 가장 위로 올려주는 것) 한 메서드가 오래걸려도 계속 기다리고 완료되면 다음 메서드 실행 (블로킹) 비동기 방식(async) 안기다리..

Web/HTML CSS JS 2020.09.25

Java Script - JSON

HTTP : hypertext Transfer Protocol 서버 통신 규약 Hypertext : 링크, 리소스(이미지, 파일) 서버에게 데이터를 요청해서 받아오는 방법 Ajax : Asynchronous JavaScript And XML 웹페이지에서 서버와 동적으로 데이터를 주고 받을 수 있는 기술 대표적으로 XHR (XMLHttpRequest)라는 브라우저 API에서 제공하는 오브젝트가 있음 이를 이용하면 간단하게 서버와 통신할 수 있다. XML : html과 같은 Markup 언어 서버를 통신하면 XHR 이나 최근에 추가된 fetch() API를 사용한다. 요새 트렌드는 xml을 주고받는 것이 아니라 json을 주고 받는 것 xml은 불필요한 태그가 많아 용량이 크고 가독성이 떨어져서 사용하지 않..

Web/HTML CSS JS 2020.09.25

JavaScript - array api

실무에서 많이 쓰고 면접에 잘 나온다고 한다. 1. join 배열의 요소를 string으로 변환하고 구분자를 지정하여 출력할 수 있다. const fruits = ['apple', 'banana', 'orange']; console.log(fruits.join(' & ')); //apple & banana & orange console.log(fruits.join()); //생략시 , 가 나옴 apple,banana,orange 2. split 문자열을 구분자를 이용하여 나누고 배열로 반환한다. const fruits = '사과, 키위, 바나나, 체리'; console.log(fruits.split(',')); //배열로 담겨서 그대로 출력 console.log(fruits.split(',', 2)); ..

Web/HTML CSS JS 2020.09.25

Java Script - Array

배열은 같은 타입의 데이트를 담아두는 자료구조 자바스크립트는 동적 타입 언어이므로 다양한 타입을 한번에 담을 수 있음 ex) 토끼 배열 : 토끼, 검정 토끼, 하얀 토끼.. -> 내가 알던 배열 잡다한 배열 : 토끼, 당근, 자동차, 사자.. -> 자바스크립트에서 가능한 배열 가능하지만 안 쓰는 게 좋다고 함 1. 배열 만들기 int[] arr = new int[5]; 처럼 길이 안정해줌 'use strict'; //1.Declaration const arr1 = new Array(); const arr2 = [1,2]; 2. 인덱스 접근 이건 똑같다 //2. Index position const fruits = ["사과","바나나"]; console.log(fruits); console.log(frui..

Web/HTML CSS JS 2020.09.25