TIL

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단위를 쓸..

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..

TIL] input type과 box-sizing

input type input 요소의 동작 방식은 type특성에 따라 달라진다. 특성을 지정하지 않은 경우 기본값은 text이다. input autocomplete 속성 input 태그의 autocomplete 속성은 input요소에서 자동완성 기능을 사용 여부를 결정해준다. on으로 설정하게되면 브라우저는 사용자가 이전에 입력했던 값을 기본으로 드롭다운 형식으로 보여주게 된다. off를 하게되면 자동완성 기능을 사용하지 않게 된다. input 타입의 required속성 input타입의 required속성은 폼 데이터가 서버로 제출되기 전 반드시 채워져있어야하는 입력 필드임을 명시한다. required속성은 불리언 속성인데 해당 속성을 명시하지 않으면 자동으로 False가 되고 명시하게 되면 True가 ..

TIL] 나의 첫 토이프로젝트를 하면서 느낀점

자기소개(첫 토이 프로젝트) 위의 사진은 나의 첫 토이 프로젝트이다. 맨 위의 부분에서는 h1태그를 이용해 나의 개발자 별명인 Jongveloper를 넣었고 부제목 목으로 (feat. 자기소개)를 넣었다. 화면 왼쪽을 보게 되면 블로그 형식으로 작성하였다. 깃허브 보러 가기 버튼을 클릭하게 되면 나의 깃허브로 이동이 된다. 그 밑에는 마음가짐이 있고 또 그 밑에 개발자 블로그(티스토리 블로그)가 있다. 그 밑에는 현재 날짜와 시각이 나오고 순차적으로 온도와 습도가 나온다. 화면의 메인에는 기본정보인 이메일과 휴대폰이 있고 노션 보러 가기 버튼이 존재한다. 노션 보러가기 버튼을 클릭하게 되면 항해 99를 함께하는 항해99 2기 2조 사전과제 노션 페이지로 이동된다. 그 밑으로는 순서대로 현재 공부 중인 언..