본문 바로가기

분류 전체보기124

[JavaScript] 자바스크립트와 웹 프론트엔드 파트4. Networking 01. AJAX - Request 보내기 AJAX 브라우저에서 페이지를 이동하지 않고 자바스크립트를 통해 HTTP Request를 보내고 받아 JS에서 처리할 수 있음 사용자에게 더 나은 사용 경험 제공, 대부분의 웹사이트에서 사용되고 있는 기술 1. AJAX를 위한 객체 생성 var req = new XMLHttpRequest(); // HTTP 요청을 만들 수 있는 새로운 객체를 생성하는 명령 2. 요청의 방식과 URL 설정 req.open("GET", "./data.txt"); // http request method와 URL 설정 3. 요청 전송 req.send(); 4. 응답 확인 req.response에 저장됨 비동기 방식으로 요청하기 때문에 send 메소드 호출 후, 바로 코드에서 접근하면 .. 2019. 12. 18.
[JavaScript] 자바스크립트와 웹 프론트엔드 파트3. Event 01. 시간을 기반으로 콜백함수를 호출 setTimeout( function, time ) time 시간이 지난 경우 function 함수를 콜백하는 함수 time 은 millisecond (1/1000초) 단위 timerId를 반환함 clearTimeout( timerId ) setTimeout 함수 호출의 결과로 반환된 timerId를 인자로 받아 예약되어 있던 function호출을 취소 이미 function이 호출된 경우(시간이 지나 이벤트가 발생한 경우)에는 효과 없음 setInterval( function, time ) time 시간이 경과할 때마다 function 함수를 콜백하는 함수 timerId를 반환함 clearInterval( intervalId ) setInterval 함수 호출의 결.. 2019. 12. 18.
[JavaScript] 자바스크립트와 웹 프론트엔드 파트2. DOM 01. DOM 소개 및 탐색 JS로 HTML문서에 접근이 가능한 것은 HTML문서가 DOM(Document Object Model)에 따라 기술되고, 이 돔 인터페이스를 통해 기술된 HTML엘리먼트가 객체로서 자바스크립트와 연결되기 때문입니다. tree 형태로, 컴퓨터가 문서를 잘 처리할 수 있도록 문서의 구조를 약속한 것. 이해하기: document.children[0] 최상위 엘리먼트 html document.children[0].children[0] 다음 엘리먼트 head document.children[0].children[1] body document.children[0].children[1].parentNode 는 html Element API 자식, 부모 엘리먼트에 접근하는 방법 .child.. 2019. 12. 18.
[JavaScript] 자바스크립트와 웹 프론트엔드 파트1. Javascript와 web 01. HTML, CSS, JS HTML: 웹 페이지의 구조를 나타냄 CSS: 웹 페이지 안에 존재하는 요소들의 스타일을 나타냄 JS: JS 로직을 통해 문서의 구조와 스타일에 변화를 줄 수 있음 브라우저는 자바스크립트 코드를 실행시키면서 HTML, CSS의 구조와 스타일에 변화가 생기면, 다시 브라우저에 해당 내용을 반영해서 렌더링하여 사용자가 그 변화를 확인할 수 있도록 한다. 02. window 객체 Javascript 실행 시 가장 상위에 존재하는 객체, 변수/함수 선언 시 window 객체 안에 선언됨 표시된 웹 페이지 정보에 접근, 변경 가능 window.location: 현재 브라우저 창의 주소를 나타내는 객체 window.location.href: 브라우저 창에 입력된 주소, 변경 가능 w.. 2019. 12. 17.
[CSS] 한 걸음 더 CSS: 코딩가나다 오버플로우(overflow) index8.html blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah style8.css body{ background-color: #ddd; } .box{ background-color: white; /*float된 left,right는 위에 떠있기 때문에 box는 float된 요소의.. 2019. 12. 17.
[CSS] 한 걸음 더 CSS: 코딩가나다 상속(Inheritance) style7.css /*상속이 되는 color, 상속이 안 되는 border 웹 초창기때부터 a태그의 글씨색은 기본 보라색으로(읽음표시) 노출됨 색을 바꾸려면 지정된 색으로 만들어줌. */ a{ text-decoration: none; /* 밑줄 없애기 */ color: inherit;/* 부모로부터 상속! 주의점: 인터넷 익스플로러 6,7버전에선 호환 안됨*/ } button{ font: inherit; } .box h1{ color: firebrick; } .box h1:before{ content: ' '; display: inline-block; background-color: currentColor;/*주의점: 인터넷 익스플로러 6,7,8버전에선 호환 안됨*/ width: 20px; height.. 2019. 12. 17.
[CSS] 한 걸음 더 CSS: 코딩가나다 버티컬 얼라인(세로 정렬, vertical-align) 예제1. index6.html style6.css body{ background-color: #999; } .wrapper{ background-color: blanchedalmond; width: 960px; height: 400px; line-height: 400px; /*한 줄 height를 전체 height로 잡아주면 vertical-align 세로 middle 성공!*/ text-align: center; /*여기서 text-align으로 좌우 center로도 만들어주기*/ margin: 0 auto; } .box{ display: inline-block; /*inline 속성을 포함해야 vertical-align의 middle이 의미 있어짐*/ background-color: green; wi.. 2019. 12. 16.
[CSS] 한 걸음 더 CSS: 코딩가나다 마진 병합(Margin Collapsing) index5.html Kim Lee Park Section #1 Section #2 Kim Lee Park's Profile style5.css .header h1{ background-color: #999; color: white; } .section { background-color: white; border: 1px solid #999; margin: 20px; padding: 20px; } .footer{ background-color: #eee; text-align: center; padding: 10px; color: #999; } 마진 병합 현상 인접해있는 block 요소끼리만 일어난다. 상하단으로만 일어난다. 문제가 될 수 있는 상황 예시 a b .parents{ background-col.. 2019. 12. 16.
[CSS] 한 걸음 더 CSS: 코딩가나다 라인하이트(줄 간격, line-height) index4.html Let's code! Coding is fantastic. I love it. style4.css .cover{ background-image: url(code.jpg); background-size: cover; background-color: #336699; height: 50vh; } .contents h1 { text-align: center; line-height: normal; /*폰트 종류에 따라 다르다.*/ color: white; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size: 80px; margin-top: -1em; /*font-size에 따라 맞춰 달라지게 하려면.. 2019. 12. 16.
[CSS] 한 걸음 더 CSS: 코딩가나다 디스플레이(Display Property) index.html 햄버거 (영어: hamburger, burger 또는 beefburger, 문화어: 고기겹빵, 다진 고기와 빵, 함버거)는 샌드위치의 일종인 음식이다. 양념, 빵가루 등에 고기를 갈아 넣고 버무린 뒤 구워낸 햄버그 스테이크(패티)와 채소, 양념 등을 두 장 이상의 동그랗거나 길쭉한 빵 사이에 넣어 만들며, 보통 손으로 쥐면서 들고 먹는다. 가정에서 직접 만들어 먹기도 하지만, 일반적으로 패스트푸드 식당에서 판매된다. 수많은 패스트푸드 식당들은 햄버거, 감자 튀김, 콜라를 하나로 묶어서 세트로 판매하기도 한다. style3.css ... /*인라인 블럭 처리를 해서 글자 디자인 처리*/ strong.bold{ background-color: black; color: white; marg.. 2019. 12. 16.
[공부][한 걸음 더 CSS: 코딩가나다] 네거티브 마진(Negative Margins) index2.html A B C NewYork City NewYork는 멋진 도시입니다. 한번 가보고 싶은 곳입니다. 궁금하네요. Map Seoul은 좋은 도시입니다. 구경할 게 많아요. 즐거운 도시입니다. style2.css body{ background-color: antiquewhite; } .header{ height: 300px; background-image: url(city.png); background-position: center; overflow: hidden; /*더 늦게 시작한다*/ margin-bottom: -100px; } .box-wrapper{ } .box{ width: 100px; height: 100px; background-color: yellow; margin: 5px.. 2019. 12. 16.
[CSS] 한 걸음 더 CSS: 코딩가나다 가운데 정렬: Centering in CSS index.html Hamburger 햄버거(영어: hamburger, burger 또는 beefburger, 문화어: 고기겹빵, 다진 고기와 빵, 함버거)는 샌드위치의 일종인 음식이다. 양념, 빵가루 등에 고기를 갈아 넣고 버무린 뒤 구워낸 햄버그 스테이크(패티)와 채소, 양념 등을 두 장 이상의 동그랗거나 길쭉한 빵 사이에 넣어 만들며, 보통 손으로 쥐면서 들고 먹는다. 가정에서 직접 만들어 먹기도 하지만, 일반적으로 패스트푸드 식당에서 판매된다. 수많은 패스트푸드 식당들은 햄버거, 감자 튀김, 콜라를 하나로 묶어서 세트로 판매하기도 한다. style.css body{ background-color:#ddd; } .box{ background-color: white; width: 480px; /*bo.. 2019. 12. 16.

티스토리툴바