분류 전체보기
TIL] 동적 프로그래밍
동적 프로그래밍 동적 프로그래밍은 이름부터 생소하다. 동적 프로그래밍은 다이내믹 프로그래밍이라고도 부르고 동적 계획법이라 부르기도한다. 동적 프로그래밍의 원리는 주어진 문제를 풀기 위해서 문제를 여러 개의 하위 문제로 나누어 푼 다음 그것을 결합하여 최종적인 답을 구하는 것이다. 동적 프로그래밍의 장점 동적 프로그래밍의 장점으로는 하위 문제의 해결을 계산한 뒤 그 해결책을 저장하여 후에 같은 하위 문제가 나왔을 경우 저장된 해결책을 재활용하여 간단하게 해결하여 내려가므로 계산 횟수를 줄일 수 있다. 저장된 해결책을 재활용하는 것을 메모 이제이 션이라고 부른다. 또한 프로그램을 구현할 때에 필요한 모든 가능성을 고려해서 구현하게 되기 때문에 동적 계획법을 이용하여 항상 최적의 결과를 얻을 수 있다. 동적 ..
TIL] form
form 폼은 사용자 의견이나 정보를 알기 위해 입력할 큰 틀을 만드는 데 사용된다. 폼은 입력된 데이터를 한번에 서버로 전송한다. 전송한 데이터는 웹서버가 처리하고, 결과에 따른 또 다른 웹페이지를 보여준다. 폼의 동작방법부터 살펴보도록 하자. form 동작 방법 폼이 있는 웹페이지를 방문한다. 폼 내용을 입력한다. 폼 안에 있는 모든 데이터를 웹 서버로 보낸다. 웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘긴다. 웹프로그램은 폼데이터를 처리한다. 처리결과에 따른 새로운 html 페이지를 웹 서버에 보낸다. 웹서버는 받은 html 페이지를 브라우저에 보낸다. 브라우저는 받은 html 페이지를 보여준다. 폼의 동작방법은 위의 순서를 거쳐 html페이지를 보여주게 된다! form태그 속성 ..
TIL] css단위 vh와 vw
vh 반응형으로 웹디자인을 할 때는 아무래도 픽셀 단위가 아닌 % 단위를 많이 사용한다. 하지만 css의 퍼센트 값이 모든 문제를 해결할 수 있지는 않다! css의 너비 값은 가장 가까운 부모 요소에 상대적인 영향을 받기 때문이다. 이럴 때 vh가 상대적으로 많이 쓰인다. vh 요소는 높이값의 100분의 1단 위이다. 예를 들어 브라우저 높잇값이 700일 때 1vh는 7px이라는 뜻이다. vw 그렇다면 높이값 말고 뷰포트의 너비 값으로 적용하려면 어떻게 해아 할까? vw를 사용하면 된다. vw 요소는 뷰포트의 너비 값의 100분의 1단 위이다. 예를 들어 뷰포트의 너비 값이 700px이면 1vw는 7px이라는 뜻이다. 뷰포트란 무엇일까? vh단위를 쓸 때 브라우저의 높이는 어떤 건지 알지만 vw단위를 쓸..
두번째 토이프로젝트를 하며 느낀점
두 번째 토이 프로젝트 두 번째 프로젝트도 첫 번째와 마찬가지로 토이프로젝트라고 하기에 민망할정도로 완성도가 낮았다. 하지만 첫번째 토이 프로젝트보다 발전했다! 그것에 큰 성취감을 느낀다. 두 번째 토이 프로젝트는 우선 플라스크를 통해 서버를 만들었고 로그인을 구현하였다! 회원가입은 구현하지 못했지만 회원가입은 꼭 구현하고 싶은 것 중 하나이다! 로그인은 session을 통하여 구현하였고 로그인을 구현하면서 쿠키와 세션에 대해 공부하게 되었다. 이번 토이 프로젝트를 하면서 느낀 점 이번 프로젝트를 하면서 로그인을 너무 구현하고 싶었다. 따라서 로그인 페이지를 통하여 메인 페이지에 접속하게 하였고 그 후에 메인페이지 속에서 영화 추천 및 이벤트 응모를 만들어서 지금까지 배운 것들을 응용하였다! 배운 것을 ..
TIL] em과 rem
em em은 현재의 font-size를 정의한다. 예를 들면 body태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받는다. test 위의 예제를 보면 div에 폰트 사이즈를 2em으로 지정했다. 위의 예제는 2px(body태그의 폰트 사이즈)를 기준으로 2배의 폰트 사이즈로 표현이 된다. 결과적으로 4px의 크기가 된다. 즉 em은 1em = 부모의 폰트 크기라는 계산법을 가지고 있다. 대부분의 브라우저에서 폰트 크기의 디폴트 값은 16px이기 때문에 별도로 지정하지 않는다면 1em은 16px이 된다. rem rem은 relative to the root element의 줄임말인데 HTML 문서에서 최상위 요소(root element)는 바로 요소를 가..
TIL] ajax
ajax ajax는 전에 블로그에 공부한 것을 올린 적 있지만 아직 이해도가 부족하다고 생각하여 복습 겸 좀 더 자세히 다뤄야겠다! ajax의 기본 형태 $.ajax({ url:"/example/~~~/~~~/~~~.~~~", //클라이언트가 요청을 보낼 서버의 URL주소이다. data: {~~~ : "~~~"}, //HTTP요청과 함께 서버로 보낼 데이터 type: "GET", //HTTP요청 방식(GET과 POST가 있다.) dataType:"json" //서버에서 보내줄 데이터 타입 }) ajax의 기본 형태는 다음과 같다. url 부분에 클라이언트가 요청을 보낼 서버의 URL 주소를 넣고 data에 HTTP요청과 함께 서버로 보낼 데이터 값을 넣는다. 데이터 요청방식을 설정하고 dataType을 ..
TIL] ::before 과 ::after
가상 요소 ::before, ::after 가상 요소란 별도의 클래스를 지정하지 않아도 지정한 것처럼 요소를 선택할 수 있다. 가상 요소는 가상 클래스처럼 선택자에 추가되고 존재하지 않는 요소를 존재하는 것 처럼 부여하여 특정 부분 선택이 가능하다. ::before은 실제 내용 바로 앞에서 생성되는 자식 요소를 뜻하고 ::after은 실제 내용 바로 뒤에서 생성되는 자식요소를 뜻한다. 또한 두가지를 사용해야 할 땐 content 속성이 필요하다. content="" content는 ::before과 ::after와 함께 쓰이는 가짜 속성이다. HTML 문서에 정보로 포함되지 않는 요소를 css에서 새롭게 생성해주기 때문이다. content를 쓸 때 대표적으로 사용되는 속성들은 아래와 같다. normal ..
TIL] outline
outline outline속성은 border 속상과 비슷하다. boder를 테두리라고 한다면 outline은 border 바깥 외곽선을 말한다. outline 속성의 용도는 요소를 강조하기 위해 사용한다. outline 사용하기 outline 속성을 사용하면, 외곽선 색상, 모양 , 너비를 한꺼번에 지정할 수 있고 outline-color, outline-style, outline- widtht 속성으로 각각 지정할 수 있다. 하지만 outline-style은 항상 필수로 지정해야 한다. 선이 있어야, 색상이나 너비를 지정할 수 있기 때문이다. outline은 border와 마찬가지로 외곽선 스타일을 지정할 수 있다. outline-style 속성 dotted : outline을 점선으로 설정한다. d..
TIL] css포지션(position)
css 포지션 css포지션 속성은 HTML에서 element를 배치하는 방법을 지정하는 속성이다. position속성에 쓸 수 있는 것은 총 5개가 있다. 5개를 차례대로 살펴보자. static static은 HTML에서 일반적인 흐름을 따라 배치가 된다. element에서 포지션을 지정하지 않는다면 기본값으로 static이 적용된다. *static에서는 top, right, bottom, left, z-index 속성들이 아무련 효과를 주지 못한다. relative relative는 static과 마찬가지로 HTML에서 일반적인 흐름을 따라 배치된다. static과의 차이점은 static에서는 적용되지 않는 top, right, bottom, left, z-index속성들이 적용된다는 것이다. abso..