Dev Note

HTTP 요청 메시지를 통해 클라이언트에서 서버로 데이터를 전달하는 방법 3가지 GET - 쿼리 파라미터 POST - HTML Form HTTP message body에 데이터를 직접 담아서 요청 GET - 쿼리 파라미터 메시지 바디 없이, URL의 쿼리 파라미터에 데이터를 포함해서 전달한다. 검색, 필터, 페이징 처리할 때 많이 사용하는 방식이다. ex) http://url?username=genie&age=20 클라이언트에서 서버로 데이터를 전송할 때, 쿼리 파라미터는 URL에 데이터를 넣어서 전송한다. http://localhost:8080/request-param?username=hello&age=20&username=kim 이런식으로 ? 를 시작으로 데이터를 넣고, 파라미터들은 &로 구분한다. ..

transform 속성 요소를 확대/축소, 회전, 비트는 등의 형태로 변형할 수 있는 속성이다. 속성명 속성값 설명 transform(2D) scale 선택한 요소의 크기를 확대/ 축소 현재 크기의 비율을 기준으로 1보다 크면 확대, 1보다 작으면 축소 skew 선택한 요소를 x축 y축으로 비틀어서 변형. 원하는 각도를 지정하여 기울기 조절 translate 현재 위치 기준에서 x축 또는 y축으로 이동 rotate 원하는 각도 지정하여 회전 transform(3D) rotateX, rotateY x축 또는 y축으로 회전 translateZ z축으로 입체감있게 이동시킴 perspective px 3D 효과가 적용된 요소가 입체감 있게 보이도록 부모 요소에 원근감 부여 transform-style prese..

웹 페이지의 배경 배경색 background-color 속성 속성명 속성값 설명 background-color 영문명 배경색을 영어 색상명으로 지정 rgb(0, 0, 0) 배경색을 RGB 표기법으로 지정 #000000 배경색을 16진수 표기법으로 지정 배경 이미지 속성명 속성값 설명 background-image url(이미지 경로) 배경 이미지 삽입 background-repeat repeat, repeat-x, repeat-y, no-repeat 배경 이미지 반복 background-position 가로축, 세로축 배경 이미지 위치 지정 background-size contain, cover 배경 이미지 크기 지정 background-attachment fixed 배경 이미지 고정 DOCTYPE ht..

[ 3장 CSS 기본 문법 빠르게 끝내기 ] HTML에 CSS 연결하기 에디터에서 외부 CSS 파일 입력하기 - 에디터는 visual studio code 사용 link:css 를 입력 후 enter를 누르면 css파일은 연결하는 자동 완성 구문이 나타난다. 태그의 href 속성에 경로를 넣어준다. 폴터 루트는 다음과 같이 구성하였다. css 파일을 열어 문자 인코딩 방식을 작성한다. 인코딩 : utf-8 CSS 문법 h1 : 선택자 color : 속성명 blue : 속성값 속성명과 속성값의 연결은 콜론( : ) 으로 나누고, 세미콜론( ; ) 으로 선언들을 구분한다. 전체 선택자 예제) See the Pen css1 by yejin (@geniest) on CodePen. CSS 파일에서 기호 " * ..

드디어 골드문제 도전! https://www.acmicpc.net/problem/1715 1715번: 카드 정렬하기 정렬된 두 묶음의 숫자 카드가 있다고 하자. 각 묶음의 카드의 수를 A, B라 하면 보통 두 묶음을 합쳐서 하나로 만드는 데에는 A+B 번의 비교를 해야 한다. 이를테면, 20장의 숫자 카드 묶음과 30장 www.acmicpc.net 풀이 from queue import PriorityQueue n = int(input()) card = PriorityQueue() lst = [] for _ in range(n): card.put(int(input())) for i in range(n-1): temp = card.get(card)+card.get(card) card.put(temp) lst..

시맨틱 태그 웹 페이지를 만들 때 HTML5의 시맨틱 태그를 이용하여 영역을 구분하여 기본 구조를 정해야한다. 종류 설명 머리말 영역 링크 등의 메뉴 영역 동영상, 사진 등 다양한 멀티미디어를 담는 영역 웹 문서의 본문으로 콘텐츠를 담는 영역 본문과 연관성이 적은 외부 영역 특정 영역을 그룹화한다. 기사나 개별 콘텐츠를 담는 영역 꼬리말 영역 참고로 VSCode에서 ctrl + alt + f 를 누르면 코드들이 자동 정렬된다. 서식태그 block 요소와 inline 요소 블록 요소( Block element ) - 사용 가능한 최대의 가로너비 사용 ( default width 100% ) - 한 줄에 한개 배치 - 레이아웃 작업하기 용이 인라인 요소 ( Inline element ) - 필요한 만큼의 영..

스터디를 위한 책 정리~ Chater 01 웹 페이지 제작 준비하기. UI ( User Interface ) - 사용자 환경을 의미. - 사람들이 콘텐츠를 이용할 때 만나는 도구와 사용 환경을 의미한다. UX ( User Experience ) - 사용자 경험을 의미. 인터랙티브 UI/UX ( Interactive UI/UX )란? 사용자와 상호 작용하는 여러 모션과 동적인 콘텐츠를 사용하는 환경을 의미한다. HTML, CSS, Javascript 의 역할 HTML - 뼈대 CSS - 디자인 Javascript - 기능 부여 예제 html:5만 입력하고 enter를 누르면 DOCTYPE html> Document 이렇게 기본 구조로 자동완성 된다.

https://www.acmicpc.net/problem/2869 2869번: 달팽이는 올라가고 싶다 첫째 줄에 세 정수 A, B, V가 공백으로 구분되어서 주어진다. (1 ≤ B = v: break day -=b print(cnt) 처음에는 이렇게 풀었는데, 입력의 숫자가 커질수록 시간초과가 발생했다. 반복문 없이 풀어야 시간초과 문제를 피할 수 있어서 고민하다가 결국 구글의 도움을 받았음...ㅠㅠ import sys im..

오늘은 심심해서 무엇을 해볼까 하다가 테트리스 게임 만들기를 해보려고 한다. 물론,,, 다른 분의 블로그를 보면서 만들어볼 것이다.! https://ui.toast.com/weekly-pick/ko_20191216 모던 자바스크립트로 테트리스 만들기 오늘은 고전 게임인 테트리스로 게임 개발 여행을 해보려고 한다. 그래픽, 게임 루프 및 충돌 감지 등을 다루고, 마지막에는 점수와 난이도가 완벽하게 작동하는 게임을 갖게 될 것이다. ui.toast.com 참고한 블로그 블로그를 보면서 만들 때 조금씩 다른 점을 여기에 적어보려고 한다. 파일은 이렇게 형성했다. 참고로 css 랑 js 연결하려면 index.html에 링크로 연결해야한다.. 확실히 파일을 나눠서 관리하니까 관리하기 좋은 것 같다. DOCTYPE..

https://www.acmicpc.net/problem/1159 1159번: 농구 경기 상근이는 농구의 세계에서 점차 영향력을 넓혀가고 있다. 처음에 그는 농구 경기를 좋아하는 사람이었다. 농구에 대한 열정은 그를 막을 수 없었고, 결국 상근이는 농구장을 청소하는 일을 시작 www.acmicpc.net [풀이] n = int(input()) arr = [] lst = [] for _ in range(n): name = input() arr.append(name[0]) for i in arr : if arr.count(i) >= 5 : lst.append(i) result = "".join(sorted(list(set(lst)))) elif len(lst) == 0 : result = 'PREDAJA' ..