CSS RESET, Pseudo-Class/Element

11 Mar 2021 | HTML/CSS

CSS RESET, Pseudo-Class/Element

CSS Reset
- CSS 초기화 문서 모음
- Eric Meyer’s “Reset CSS” 2.0 http://meyerweb.com/eric/tools/css/reset/
- HTML5 Doctor CSS Reset http://html5doctor.com/html-5-reset-stylesheet/
- Yahoo! (YUI 3) Reset CSS http://yuilibrary.com/yui/docs/cssreset/
- Normalize.css 1.0 https://github.com/necolas/normalize.css
가상 클래스 선택자(Pseudo-Class Selector)
- :link - 방문하지 않은 링크일 때
- :active - 클릭된 상태일 때
- :focus - 포커스가 들어왔을 때
- :checked - 체크 상태일 때
- :enabled - 사용 가능한 상태일 때
- :disabled - 사용 불가능한 상태일 때
- :first-child - 셀렉터에 해당하는 모든 요소 중 첫번째 자식 요소
- :lasst-child - 셀렉터에 해당하는 모든 요소 중 마지막 자식 요소
- :nth-child(n) - 셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식 요소
- :nth-last-child(n) - 셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식 요소
가상 요소 선택자(Pseudo-Element Selector)
- ::after - 콘텐츠의 뒤에 위치하는 공간을 선택
- ::before - 콘텐츠의 앞에 위치하는 공간을 선택
- 특정 태그가 시작하는 곳 바로 앞, 끝나는 곳 바로 뒤를 선택하게 된다
- 반드시 content와 같이 사용한다

참고 자료

모던 자바스크립트 deep dive

Comment Read more

2021-03-10 TIL

10 Mar 2021 | 로그포스

2021-03-10 TIL

오늘 한 것
1. 학원 대면 수업(15:30~22:00) Ajax, Spring 개발환경 구축 - JQuery로 Ajax 비동기 통신을 편리하게 사용하는 방법을 배웠는데 움.. JQuery는 잘 쓰지 않을듯하다. 그래도 Ajax는 중요하니 이렇게도 사용할 수 있구나 하고 알고는 있어야겠다.
2. Git / GitHub - 팀 프로젝트 버전관리에 사용할 Git 사용법을 처음부터 정리하는 중이다. 기본 사용법은 알고 있지만 팀 단위 프로젝트에서 한 번도 사용해본적이 없기 때문에 이번 팀프로젝트에서의 Git을 이용한 협업 경험은 매우 중요하다.
3. Ajax, 자바스크립트 비동기 part 블로그 업로드 - 자바스크립트의 꽃이라 불리우는 비동기에 대해 정리한 내용을 블로그에 업로드했다. 이제는 실제로 써봐야겠다.

내일 할 것
1. 비동기 통신을 이용한 간단한 SPA 만들어보기
2. 학원 대면 수업(15:30~22:00)
3. 블로그 업로드 - DOM. BOM API

끝으로

내일은 open api로 비동기를 연습해보자

오늘의 한 줄 총평 : 실전

Comment Read more

JQuery - Ajax API

10 Mar 2021 | JQuery

JQuery - Ajax API

Ajax API

JQuery 라이브러리를 사용해서 간편하게 Ajax 통신을 할 수 있다
JQuery에서 기본적으로 Ajax 메소드를 제공하고 있는데 이 중 $.ajax() 메소드를 사용한다
$.ajax() : 비동기 Ajax요청을 수행, GET / POST 방식을 지정

$.ajax({
    type: "POST", // HTTP 요청 방식, GET / POST 지정
    url: "path", // 요청을 보낼 서버의 URL 
    data: "JSON 형태의 데이터", // 요청과 함께 서버로 보낼 데이터
    success: response => {
        // 성공 시 실행할 로직 (응답 데이터를 response로 받는다)
    },
    error: (request,status,error) => {
        // 실패 시 실행할 로직
    }
    // 외에도 async, dataType, timeout, beforeSend, complete 등의 옵션이 있다
});

$.ajax({
    type: "POST", // HTTP 요청 방식, GET / POST 지정
    url: "path", // 요청을 보낼 서버의 URL 
    data: "JSON 형태의 데이터", // 요청과 함께 서버로 보낼 데이터
})
 .done(response => {
    // 성공 시 실행할 로직 (응답 데이터를 response로 받는다)
}
 .fail(() => {
    // 실패 시 실행할 로직
})
 .always(() => {
    // 성공, 실패 여부와 상관없이 실행
});

실행 예제

<!-- exam.html -->
   
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Ajax 예제</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
	$(document).ready(() => {
		$('#b1').click(() => {
			let json = {
					"name": "limu",
					"status": true
			};
   			
			$.ajax({
				type: "POST",
				url: "process.jsp",
				data: json,
				success: data => {
					$('#result').html(data);
				}
			});
		});
	});
</script>
</head>
<body>
	<button id="b1">결과</button>
	<div id="result"></div>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("utf-8");
	String resultStr = "처리결과: <br>";
	String name = request.getParameter("name");
	String status = request.getParameter("status");
	resultStr += "이름: "+name+"<br>";
	resultStr += "상태: "+status+"<br>";
	out.println(resultStr);
%>

실행 결과
- 데이터를 잘 받아왔다

참고 자료

KG IT Bank 강의 자료

Comment Read more

JS Day 15 DOM API

10 Mar 2021 | Javascript

JS Day 15 DOM API

DOM API
- DOM(Document Object Model) : 문서 객체 모델, 웹 페이지 내의 모든 콘텐츠를 객체로 나타내어 준다
- DOM에 접근하기 위해 document 객체를 이용한다
```
document.body.style.background = 'red';
```
- https://dom.spec.whatwg.org/ (DOM 관련 문서)
- DOM에서는 모든 HTML 태그, 태그 내의 텍스트는 객체이다
- 태그 하나가 감싸고 있는 자식 태그를 중첩 태그(nested teg)라 한다
- 이런 모든 객체는 자바스크립트로 조작할 수 있다
- 태그 하나 하나를 node라 하며 node는 트리 구조로 구성된다
- node types
  - DOM의 진입점이 되는 document node
  - DOM 트리를 구성하는 HTML 태그인 element node
  - 텍스트를 포함하는 text node
  - 주석을 담는 comment node
DOM 탐색하기
- 브라우저가 script를 읽는 도중 DOM 요소에 접근하면 null 예외가 나올 수 있으니 주의
- childNodes 컬렉션은 text node를 포함한 모든 자식 노드를 담고 있다
- HTML 태그만 선택하고 싶으면 children을 써야한다
- childNodes는 유사 배열인 iterable 객체로 array API (forEach,filter,map,reduce 등)를 사용할 수 없다
- for .. of를 사용해 순회하거나 배열에 담아서 array API를 사용해 순회한다
- firstChild는 첫 번째, lastChild는 마지막 자식 노드에 접근 할 수 있다
- DOM 컬렉션은 read-only의 속성을 가진다
```
childNodes[i] = newValue; // 자식 노드를 교체하는 것이 불가능하다
```
- for .. in 은 원치 않는 프로퍼티까지 순회 대상에 포함되므로 사용 x
- 형제 노드는 nextSibling, previousSibling / 부모 노드는 parentNode로 접근할 수 있다
- HTML 태그만 찾고 싶다면 parentElement,previous/nextElementSibling을 사용한다
DOM 검색하기
- querySelector(‘.class / #id / tag’)
- querySelectorAll(‘:hover’) : NodeList 반환
- CSS 가상 클래스인 :hover, :active 등도 검색할 수 있다
- getElementById(‘id’)
- getElementsByTagName / ClassName / Name : HTML 컬렉션 반환
- NodeList는 forEach가 먹힌다 / HTML 컬렉션은 안먹는다
DOM 조작하기
- innerHTML 강력하지만 XSS 공격에 취약하여 사용이 자제된다
- innerText : 사용자에게 보여지는 텍스트를 가져오거나 수정 가능
- textContent : 텍스트를 가져오거나 수정 가능, XSS 공격의 위험이 없다
- innerText와 textContent의 차이 : textContent는 해당 노드가 가지고 있는 텍스트를 가져온다. display: none 등 숨겨진 텍스트도 가져온다
- HTML 태그에 data-xxxx=”value”를 설정하고 스크립트에서 dataset으로 이 값에 접근하고 수정할 수 있다
- 이를 용용해 CSS를 활용하여 많은 것을 할 수 있다
```
<span id="user" data-name="show">안녕</span>
   
<script>
	user.dataset.name = 'hide'; 
</script>
   
<style>
    span[data-name='hide'] {
        display: none;
    }
</style>
```
- node.append(노드나 문자열) – 노드나 문자열을 node 끝에 삽입
- node.prepend(노드나 문자열) – 노드나 문자열을 node 맨 앞에 삽입
- node.before(노드나 문자열) –- 노드나 문자열을 node 이전에 삽입
- node.after(노드나 문자열) –- 노드나 문자열을 node 다음에 삽입
- node.replaceWith(노드나 문자열) –- node를 새로운 노드나 문자열로 대체
- node.remove() – 노드를 삭제
- node.cloneNode(true/false) – true는 노드의 자손까지 복제, false는 해당 노드만 복제
- DocumentFragment에 여러 노드를 담아서 한방에 삽입할 수도 있다
- 삽입하면 DocumentFragment는 사라지고 가지고 있던 요소들만 삽입된다
```
let fragment = new DocumentFragment();
   
for(let i=0; i<3; i++) {
    let li = document.createElement('li');
    li.append(i);
    fragment.append(li);
}
   
ul.append(fragment);
```
- node.className은 해당 클래스 이름을 가져온다
- elem.classList.add/remove("class") – class를 추가하거나 제거
- elem.classList.toggle("class") – class가 존재할 경우 class를 제거하고, 그렇지 않은 경우엔 추가
- elem.classList.contains("class") – class 존재 여부에 따라 true/false를 반환
- classList는 iterable 객체이므로 for…of로 순회가 가능하다
- className으로 class를 바꾸면 덮어써버리는 반면 classList.add는 추가하는 개념이다

참고 자료

JAVASCRIPT.INFO

MDN

Comment Read more

JS Day 14 BOM API

10 Mar 2021 | Javascript

JS Day 14 BOM API

BOM API
- BOM(Browser Object Model) : 브라우저 객체 모델, 문서 이외의 모든 것을 제어하기 위해 브라우저가 제공하는 추가 객체
- window 객체
- 브라우저 창을 제어할 수 있는 메서드 제공 DOM, BOM의 루트 객체
- ex) window.location => location // window는 최상단 객체이므로 생략이 가능하다.
  - window 객체 기본 메소드
    - moveBy(x, y) : 윈도우의 위치를 상대적으로 이동
    - moveTo(x, y) : 윈도우의 위치를 절대적으로 이동
    - resizeBy(x, y) : 윈도우의 크기를 상대적으로 지정
    - resizeTo(x, y) : 윈도우의 크기를 절대적으로 지정
    - scrollBy(x, y) : 윈도우 스크롤의 위치를 상대적으로 이동
    - scrollTo(x, y) : 윈도우 스크롤의 위치를 절대적으로 이동
    - focus() : 윈도우에 초점 맞춤
    - blur() : 윈도우에 맞춘 초점 제거
    - close() : 윈도우 닫음
    - open(url, name, spec, replace) : 새 창을 염
    - setTimeout(callback, time) : time 후 callback 실행
    - clearTimeout(변수명) : setTimeout을 제거
    - setInterval(callback, time) : time 간격으로 callback 실행
    - clearInterval(변수명) : setInterval을 제거
    - alert() : 경고창
    - confirm() : 확인/취소창
    - prompt() : 입력 받는 창
- navigator 객체 : 브라우저에 대한 정보
  - navigator 객체 속성
    - appCodeName : 브라우저의 코드 이름
    - appName : 브라우저의 이름
    - appVersion : 브라우저의 버전
    - platform : 사용 중인 운영체제의 시스템 환경
    - userAgent : 웹 브라우저 전체 정보
- screen 객체 : 브라우저가 아닌 사용자 화면
  - screen 객체 속성
    - width : 화면의 너비
    - height : 화면의 높이
    - availWidth : 실제 화면에서 사용 가능한 너비
    - availHeight : 실제 화면에서 사용 가능한 높이
    - colorDepth : 사용 가능한 색상 수
    - pixelDepth : 한 픽셀당 비트 수
- history 객체 : 브라우저의 세션 기록에 접근
  - history 객체 기본 메소드
    - back() : 뒤로가기
    - forward() : 앞으로 가기
    - go() : 현재 페이지 기준으로 이동 (1 : 앞, -1 : 뒤, 0 : 리로딩)
- location 객체
  - location 객체 속성
    - href : 새로운 페이지로 이동 ex) location.href = url;
    - host : 호스트 이름과 포트번호 // localhost:8080
    - hostname : 호스트 이름 // localhost
    - port : 포트 번호 // 30763
    - pathname : 디렉토리 경로 // /a/index.html
    - hash : 앵커 이름(#~) // #beta
    - search : 요청 매개변수 // ?param=10
    - protocol : 프로토콜 종류 // http:
  - location 객체 메소드
    - assign(link) : 현재 위치를 이동
    - reload() : 새로고침
    - replace(url) : 기존 페이지를 url로 이동(뒤로가기 사용 불가, history 기록 x)