Genie's Devlog

input 박스에 현재 시간을 띄워보겠다. 다음은 html javascript 시간이 실시간으로 바뀌어야하니까 setInterval()을 써줬다.

새롭게 시작하는 프로젝트... 지난번에 면접을 보면서 포트폴리오를 개선시켜야겠다는 마음이 커졌다, 그래서 이번달에는 기존에 없는(?) 서비스를 기획해서 배포까지 해보려고한다. 참고로 이번 프로젝트는 2인 프로젝트이다. (그래서 그런가 속도가 빠르다 ) 지난 주말에는 기획을 마무리 짓고. 이번주에 디자인 작업과 front 작업을 마무리 할 예정이다...( 물론 앞으로 수정할 일이 많겠지만...ㅎ) (이번에 DB는 oracle 말고 mysql을 써보려고 한다.)

Chapter 5는 flex 요소에 대해 집중적으로 다루는 장이다. 우선 flex를 사용하기 위해 필요한 속성과 속성값을 정리해보겠습니다. 부모 요소에 flex 적용하기 속성명 속성값 설명 display flex 자신은 블록 속성을 유지하면서 자식 요소에 flex 환경 설정 inline-flex 자신을 인라인 속성으로 변경하면서 자식 요소에 flex 환경 설정 flex-direction row flex의 기본축을 가로로 지정한다. column flex의 기본축을 세로로 지정한다. row-reverse 자식 요소 콘텐츠를 가로 역순으로 정렬한다. column-reverse 자식 요소 콘텐츠를 세로 역순으로 정렬한다. flex-wrap nowrap 자식 요소의 줄 바꿈을 하지 않는다. wrap 자식 요소의 ..

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 ) - 필요한 만큼의 영..