inline 속성과 block속성 - inline 속성 : 안에 있는 값만큼만 공간을 차지, inline속성을 height값을 가지지 않는다 - block 속성 : 한줄을 만큼의 공간을 차지 display: inline - 해당하는 엘리멘트를 inline 속성으로 바꿈 display: block; - 해당하는 엘리멘트를 block 속성으로 바꿈 display: inline-block - 해당하는 엘리멘트를 inline속성과 block 속성을 가지게함 - 높이값도 가지고 안의 내용만큼만 공간차지background url background: url(../img/header_bg.jpg) center top repeat-x;div에 원하는 이미지를 넣을 수 있다. center 속성은 이미지의 가운데 부분을 ..

DOCTYPE(DTD, 버전 지정)DOCTYPE은 마크업 언어에서 문서 형식을 정의합니다. 이는 웹 브라우저에 우리가 제공할 HTML 문서를 어떤 HTML 버전의 해석 방식으로 구조화하면 되는지를 알려줍니다. (HTML은 크게 1, 2, 3, 4 , X-, 5 버전이 있습니다) 현재의 표준 모드는 HTML5입니다 Document type declaration TITLEHTML 문서의 제목을 정의 웹 브라우저 상에서 탭 부분에 나타나집니다. 티스토리 META(웹 페이지의 정보)HTML 문서에 관한 정보를 입력하는 곳입니다표시방식(인코딩), 제작자, 내용, 키워드 등을 입력합니다 charset - 문자인코딩 방식 - UTF-8, EUC-KR 등name - 검색엔진 등에 제공하기 위한 정보의 종류(메타 데이터..

비트맵과 벡터 이미지이미지(그래픽)는 크게 비트맵과 벡터로 구분됩니다.비트맵(Bitmap)은 각 픽셀이 모여 만들어진 정보의 집합으로 레스터(Raster) 이미지라고도 부릅니다. 픽셀 단위로 화면에 렌더링합니다.(렌더링: 컴퓨터가 화면에 그림을 그려서 우리가 볼 수 있게 합니다) 우리가 일반적으로 사용하는 대부분의 이미지가 비트맵 형식입니다. 그림판, 포토샵과 같은 툴로 편집할 수 있습니다.벡터(Vector)는 수학적 정보의 형태(Shape)들이 만들어내는 결과물입니다. 이미지가 가지고 있는 점, 선, 면의 위치(좌표), 색상 등의 정보를 온전히 가지고 있으며 그를 화면에 렌더링합니다. 따라서 좀 더 많은 연산을 해야 하지만, 대신 해상도(픽셀)에 영향을 비트맵 이미지와 달리 해상도로부터 자유롭게 렌더링..

웹 표준이란?웹에서 사용되는 표준 기술이나 규칙을 의미하며, W3C의 권고안 에서 나온 기술들이 여기에 해당합니다이 표준 기술들을 기준으로 웹 브라우저들(크롬, IE, 사파리 등)이 만들어지는데, 브라우저를 만드는 업체(구글, MS, 애플 등)에서 표준 기술을 해석하는 차이, 새로운 기술 삽입 등으로 조금은 다르게 구동되는 브라우저가 생깁니다. 표준화 제정 단계대부분의 경우 표준화 제정 단계의 '권고안'에 해당하는 기술을 표준이라고 생각하시면 쉽습니다 크로스 브라우징이란?조금은 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법 등을 말합니다대부분으 브라우저는 최대한 웹 표준을 준수해서 제작되기 때문에 문제 되는 경우가 적지만 IE(익스..

빠르게 훑어보는 웹 개발 트렌트 를 정리해보았습니다. 웹 개발 트렌트 1. 서버 중심으로 개발 2. 클라이언트 중심으로 개발 3. 고도화 1. 서버 중심으로 개발 - 서버랑 클라이언트랑 통신을 하지 않고 이미 만들어진 정적 페이지를 제공해서 클라이언트가 표시 - 페이지 단위로 rest - 사용자가 요청한 화면을 서버에서 페이지 단위로 생성해서 제공 - 이 당시 까지만 해도 자바스크립트가 있었지만 평가가 그리 좋지는 않았음 -> 클라이언트에 코드가 오픈이 되서 공들여서 짜지 않는 분위기 2. 클라이언트 중심으로 개발 - ajax, spring, jquery의 등장으로 자바스크립트를 더 써 볼 수 있겠다라는 생각이 퍼지기 시작 - 페이지를 띄워놓고 ajax로 동적으로 처리 할 수 있지 않을까? - 아이폰, ..

complexity(복잡도)는 가장 높은 경우로 결정한다 CONSTANT / O(1) : n이 증가 되어도 시간은 항상 똑같다.ex) 인덱스로 접근해서 처리할 경우 LOGARITHMIC / O(log n) : 결과를 처리하면서 시간이 줄어든다ex) memoise, binerySerch LINEAR / O(n) : n이 증가하면 시간도 비례해서 증가2n 으로 증가 QUADRATIC / O(n^2) :n이 증가하면 시간이 n^2으로 증가ex) 이중 for문 EXPONENTIAL O(c^n):n이 증가하면 시간이 기하급수적으로 증가함 참고 https://medium.com/basecs/looking-for-the-logic-behind-logarithms-9e79d7666ddabig-o cheet sheet

HTTP - 웹상에서 클라이언트와 서버 간에 요청/응답으로 데이터를 주고 받을 수 있는 프로토콜(규약, 약속) - 클라이언트가 HTTP 프로토콜을 통해 서버에 요청을 보내면 서버는 요청에 맞는 응답을 클라이언트에 전송- GET과 POST는 HTTP 메소드 중 비슷하지만 다른 역할이기에 GET / POST 의 차이점을 알아보자 'GET은 가져오는 것이고 POST는 수행하는 것' GET- Select적인 성향을 가지고 있다- 데이터를 가져와서 보여주는 용도일 뿐 서버의 값이나 상태 등을 바꾸지 않는다- 입력한 query의 이름과 값이 URL에 결합되어 서버에 전달 된다- 따라서 전송 데이터 양에 제한이 있다 - ex) 게시판의 리스트나 글보기 같은 기능 POST- 서버의 값이나 상태를 바꾸기 위해서 사용- ..

1. graph- 노드들이 선으로 연결되어 삼각형의 형태를 띄고 있는 자료구조- tree 구조와는 다르게 노드가 하나 이상의 in-degree, out-degree를 가질 수 있다.- directed graph: deree가 방향성을 가지고 있다: E노드의 경우 in-degree 2개, out-degree 2개 로 표현한다 - undirected graph: 방형성이 없어 E노드는 degree가 4개라고 표현한다 2. tree - 구조가 나무의 뿌리 같이 생겨 트리 구조라고 불리운다- 부모노드에서 자식노드로 갈 수 있지만 자식 노드는 부모노드로 갈 수 없다.- 작은 graph구조라고 할 수 있다 3. binary search tree- 정렬 알고리즘 이다- 어떠한 기준(사진에서는 자신보다 크면 오른쪽 작..

1. stack- FILO(first in last out), LIFO(last in first out)- psedo code: 필요한 매소드자료를 넣는 매소드 ->넣은 순서대로 쌓일 것넣은 자료를 뒤에서 부터 빼는 매소드 2. queue- FIFO(first in first out) - psedo code: 필요한 매소드자료를 넣는 매소드 ->넣은 순서대로 쌓일 것넣은 자료를 앞에서 부터 빼는 매소드 3. linked list - 배열과의 차이점: 만약 중간에 자료를 넣어야 할때 배열의 경우 중간 이후의 모든 자료들이 방을 이동해야 하지만 linked list의 경우 앞의 메모리 영역과 뒤의 메모리 영역 사이에 연결만 잘 해주면 된다.- psedo code: 필요한 매소드노드와 노드를 이어주는 매소드노..