본문 바로가기

전체 글178

CSS 이론 채워 넣기 - 5. CSS 속성의 상속과 적용 우선 순위 상속 상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것을 의미한다. 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다. ※ 프로퍼티 중에는 상속이 되는 것과 되지 않는 것이 있다. 상속되지 않는 경우(상속받지 않는 요소 또는 상속되지 않는 프로퍼티), inherit 키워드를 사용하여 명시적으로 상속받게 할 수 있다. property Inherit width/height no margin no padding no border no box-sizing no display no visibility yes opacity yes background no font yes color yes line-height yes text-align .. 2023. 9. 15.
CSS 이론 채워 넣기 - 4. text 관련 CSS 속성 1. font Shorthand font : font-style(optional) font-variant(optional) font-weight(optional) font-size(mandatory) line-height(optional) font-family(mandatory) font: italic small-caps bolder 16px/1.2 monospace; 2. letter-spacing 글자 사이의 간격을 지정한다. 3. text-align justify ( 양쪽 정렬 ) 양쪽 모두를 가지런하게 맞추기 위해서 띄어쓰기 간격이 조금씩 달라진다. 특히 영어의 경우 단어가 길면 간격이 많이 이상할 수 있는데, word-break 속성으로 조정할 수 있다. 4. white-space white s.. 2023. 9. 15.
CSS 이론 채워 넣기 - 3. background 관련 속성 1. background-image 요소에 배경 이미지를 지정한다. body { background-image: url("http://poiemaweb.com/img/bg/dot.png"); } 2. background-repeat 배경 이미지의 반복을 지정한다. 수직, 수평 또는 수직과 수평 모두의 반복을 지정할 수 있다. 설정된 이미지의 크기가 화면보다 작으면 자동으로 이미지가 반복 출력되어 화면을 채우게 된다. 이것은 background-repeat 프로퍼티의 기본값이 repeat 이기 때문이다. 속성 설명 repeat-x x축으로만 배경 이미지를 반복한다 repeat-y y축으로만 배경 이미지를 반복한다. no-repeat 반복하지않는다. background-image에 복수개의 이미지를 설정 b.. 2023. 9. 14.
CSS 이론 채워 넣기 - 2. 다양한 CSS 단위 1. 크기 단위 cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다. px은 절대값이고 em, %는 상대값이다. 1.1 px px은 픽셀(화소) 단위이다. 1px은 화소 1개 크기를 의미하고 픽셀은 디바이스 해상도(resolution) 에 따라 상대적인 크기를 갖는다. 이와 같이 디바이스 별로 픽셀(화소)의 크기는 제각각이기 때문에 픽셀을 기준으로 하는 단위는 명확하지 않다. 따라서 대부분의 브라우저는 1px을 1/96 인치의 절대단위로 인식한다. 1.2 % % 는 백분률 단위의 상대 단위이다. 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정한다. 1.3 em em은 배수(倍數) 단위로 상대 단위이다. 요소에 지정된 사.. 2023. 9. 14.
CSS 이론 채워 넣기 - 1. 셀렉터(Selector) 1. 기본적인 셀렉터 종류 전체 셀렉터 (Universal Selector) * { color: red; } 태그 셀렉터 (Type Selector) p { color: red; } ID 셀렉터 (ID Selector) #p1 { color: red; } 클래스 셀렉터 (Class Selector) .container { color: red; } 2. 어트리뷰트 셀렉터 (Attribute Selector) 패턴 설명 예시 셀렉터[어트리뷰트] 지정된 값을 갖는 모든 요소를 선택한다. a[href] { color: red; } 셀렉터[어트리뷰트="값"] 지정된 값이 일치하는 모든 요소를 선택한다. a[target="_blank"] { color: red; } 셀렉터[어트리뷰트~="값"] 지정된 값을 (공백으.. 2023. 9. 14.
HTML 다시 배우기 - 4. hyperlink / list / 멀티미디어 태그 / form 1. hyperlink 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공한다. 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능을 하이퍼링크(hyper link) 라 한다. href 어트리뷰트 href 어트리뷰트는 이동하고자 하는 파일의 위치(경로)를 값으로 받는다. 경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의미한다. href 어트리뷰트에 사용 가능한 값 절대 URL: 웹사이트 URL (href=”http://www.example.com/default.html”) 상대 URL: 자신의 위치를 기준으로한 대상의 URL (href=”html/default.html”) fragment identifier: 페이지 내의 특정 id를 갖는 요소에의 링크 (href=”#.. 2023. 9. 9.
HTML 다시 배우기 - 3. text 관련 태그 1. 제목 (Headings) 태그 Heading 태그는 제목을 나타낼 때 사용하며 h1에서 h6까지의 태그가 있다. h1이 가장 중요한 제목을 의미하며 글자의 크기도 가장 크다. 제목 이외에는 사용하지 않는 것이 좋다. 검색엔진은 제목 태그를 중요한 의미로 받아들일 가능성이 크다. heading 1 heading 2 heading 3 heading 4 heading 5 heading 6 2. 글자 형태 (Text Formatting) 태그 2.1 b (non-semantic) bold체를 지정한다. 의미론적(Semantic) 중요성의 의미는 없다. 2.2 strong (Semantic) b tag와 동일하게 bold체를 지정한다. 하지만 의미론적(Semantic) 중요성의 의미를 갖는다. 웹표준을 준수.. 2023. 9. 8.
HTML 다시 배우기 - 2. HTML 기본 태그 1. 문서 형식 정의 tag 문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다. 문서의 최상위에 위치해야 하며 대소문자를 구별하지 않는다. 문서별 기술 양식은 아래와 같다. // HTML5 // HTML 4.01 // XHTML 1.0 2. html tag html 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다. 즉, 모든 요소는 html 요소의 자식 요소이며 html 요소 내부에 기술해야 한다. 단 는 예외이다. html은 글로벌 어트리뷰트를 지원한다. 특히 lang 속성을 사용하는 경우가 많다. 3. head tag head 요소는 메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재한다... 2023. 9. 7.
HTML 다시 배우기 - 1. 시맨틱 웹(Semantic Web) 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 "의미" 와 "관련성" 을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다. 검색엔진은 로봇(Robot)이라는 프로그램을 이용해 웹사이트 정보를 수집한다.(이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.) 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다.(이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.) 인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. 즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Sema.. 2023. 9. 7.
Express 탐구 - 2 <Request, Response> Request req 객체는 HTTP 요청을 나타내며 요청 쿼리 문자열, 매개 변수, 본문, HTTP 헤더 등에 대한 속성을 나타냄 객체 req는 Node 자체 요청 객체의 향상된 버전이며 모든 기본 제공 필드 및 메서드를 지원 속성 req.app Express 애플리케이션의 인스턴스에 대한 참조 req.baseUrl 라우터 인스턴스가 마운트된 URL 경로 app.mountpath 과 유사 req.body 키-값 의 형태의 request body 데이터를 의미, 기본값은 undefined, req.body 는 상황마다 다르기 때문에 신뢰할 수 없다. req.cookies cookie-parser 를 사용할 경우 쿠키 객체를 나타냄 기본 값은 {} req.fresh 클라이언트의 캐시가 최신 상태인지를 판단.. 2023. 7. 17.
Express 탐구 - 1 설명 Express.js 는 Node.js 를 기반으로하는 간단하게 웹 서버를 만들 수 있 웹 애플리케이션 프레임워크이다. 사용하기 어렵지 않기 때문에 어떤 속성 및 기능들이 있는지 한 번씩만 둘러봐도 큰 도움이 될 것 같다. 분류 express() Application Router Request Response express() express 최상위 모듈로써 Express 응용 프로그램 생성 var express = require(&#39;express&#39;) var app = express() 메서드 express.json([options]) Express 에 내장된 미들웨어 기능이며 JSON payloads 로 들어온 데이터를 parsing 처리 (body-parser 기반) express.ra.. 2023. 7. 11.
Buffer 의 이해 버퍼(Buffer) 는 데이터를 임시로 저장하는 일시적인 메모리 공간을 의미한다. 버퍼는 바이너리 데이터를 다루는 데 사용되며, 특히 네트워크 통신이나 파일 입출력과 같은 작업에서 데이터를 일시적으로 저장하거나 전송하는 데 유용. 버퍼링(buffering)이란 버퍼를 활용하는 방식 또는 버퍼를 채우는 동작을 의미한다 하드웨어나 소프트웨어 모두 사용될 수 있는 개념이자 기능이라고 볼 수 있다. ex) api 서버, RAM ※ 바이너리 데이터 : 데이터의 저장과 처리를 목적으로 0과 1의 이진 형식으로 인코딩된 파일 2023. 7. 11.

티스토리툴바