white-space 사전적 의미로 white space는 '여백'을 뜻함. html에서는 공백의 의미 태그 작성시 생기는 공백 줄바꿈 (line break) 들여쓰기 (tab) 공백 (space) html 작성시 공백을 아무리 많이 입력해도 1개만 표현됨. 하나 이상의 공백을 표현하기 위해서는 를 사용해야함. 또는 태그를 사용하면 공백이나 줄바꿈을 있는 그대로 표시 white-space 속성 값 normal (default) 공백을 여러개 넣어도 1개만 표시. 글이 길어지면 텍스트가 자동 줄바꿈 됨(wrap) nowrap 공백을 여러개 넣어도 1개만 표시. 글이 길어도 줄바꿈 되지 않고 같은 줄에 계속 표시 pre 공백을 코드에 있는 그대로 표시. 태그처럼 행동함. 코드에 줄바꿈이 없다면 줄바꿈 되지 ..

Line Break 줄바꿈 할 때 사용됨 끝 태그가 없는 빈 태그(empty tag) 이지만, xhtml에서는 로 열고 닫는 태그를 대신함. Paragraph 문단을 구분할 때 사용됨 앞뒤로 여백이 들어가며, 태그를 두 번 사용한 것과 같은 결과가 나옴 Preformatted Text 입력한 그대로 화면에 출력되는 태그 문장 안에 있는 여백이나 줄바꿈도 그대로 표시 코드 등을 표현할 때 사용됨 Non-breaking Space 태그는 아니고 HTML Entity 하나 이상의 공백을 표현하기 위해 사용

HTTP 상태 코드 1xx (Informational) : 요청이 수신되어 처리중 2xx (Successful) : 요청 정상 처리 (성공) 3xx (Redirection) : 요청을 완료하려면 추가 행동이 필요. 리다이렉션 (location 헤더가 있으면 location 위치로 자동으로 이동) 4xx (Client Error) : 클라이언트 오류. 잘못된 문법 등으로 서버가 요청을 수행할 수 없음 5xx (Server Error) : 서버 오류. 서버가 정상적으로 요청을 처리하지 못함 HTTP 상태 코드 종류와 의미 200 OK 요청 성공 201 Created 요청 성공하여 새로운 리소스 생성됨 202 Accepted 요청이 접수되었으나 처리가 완료되지 않음 204 No Content 서버가 요청을 성..

HTTP 요청 메소드 주요 메소드 GET : 리소스 조회 POST : 요청 데이터 처리 (ex. 데이터 등록) PUT : 리소스를 대체, 해당 리소스가 없으면 생성 DELETE : 리소스 삭제 PATCH : 리소스를 일부만 변경 기타 메소드 HEAD : GET과 동일하지만 메시지 부분을 제외하고 상태 줄과 헤더만 반환 OPTIONS : 대상 리소스에 대한 통신 가능 옵션을 설명 (주로 CORS에서 사용) CONNECT : 대상 자원으로 식별되는 서버에 대한 터널을 설정 TRACE : 대상 리소스에 대한 경로를 따라 메시지 루프백 테스트를 수행 HTTP 메소드의 속성 1. 안전 (Safe Methods) 메소드를 계속해서 호출해도 리소스를 변경하지 않는다. 주요 메소드 중 GET 메소드가 이에 해당된다. ..

HTTP (Hyper Text Transfer Protocol) HTML 문서와 같은 리소스를 가져올 수 있게 해주는 프로토콜 웹에서 이루어지는 모든 데이터 교환의 기초 클라이언트-서버 프로토콜 : 수신자 측(웹 브라우저)에 의해 요청이 초기화되는 프로토콜 클라이언트와 서버들은 개별적인 메시지 교환에 의해 통신함 요청(Requests) : 클라이언트에 의해 전송되는 메시지 응답(Responses) : 그에 대해 서버에서 응답으로 전송되는 메시지 HTTP는 확장 가능한 프로토콜 (1990년대 초에 설계되어 거듭 진화됨) HTTP는 Application 계층의 프로토콜 TCP 혹은 TLS(암호화된 TCP연결)를 통해 전송 Reference HTTP 기본 HTTP란 무엇인가

Reflow 대화형 사이트에서 업데이트 한 후와 같이 browser가 웹 페이지의 일부 또는 전부를 다시 처리하고 그려야할 때 Reflow가 발생한다. 생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향 받는 모든 노드(자신, 자식, 부모, 조상 등 = 결국 모든 노드)의 수치를 다시 계산하여(Recalculate) Render 트리를 재생성하는 과정 Repaint (=Redraw) Reflow 과정이 끝난 후, 재생성된 Render 트리를 다시 그리는(paint) 과정 Reflow 과정이 일어나는 상황 Window Resizing Viewport 변화는 Global Layout에 영향 Font 변경 height 계산에 영향을 주므로 Global Layout에 영향 스타일 추가 또..

선택자 우선순위 순위 선언방식 설명 예시 1 !important 우선순위 최상위 명령어. 속성값 바로 뒤에 넣는다. p { color: red !important; } 2 inline style html 문서에서 tag 내에 style을 정의한 것 3 id Selector tag 내에 id를 정의한 후, #id 으로 선택 제목 #title { color: red; } 4 class Selector tag 내에 class를 정의한 후, .class 으로 선택 부제목 .subtitle { color: red; } 5 tag Selector tag 요소를 선택자로 사용 p { color: red; } 6 universal Selector asterisk(*)로 요소 전체를 선택 * { color: red; }..