분류 전체보기

CSS - Flexbox, Grid 연습 사이트

codepip codepip 라는 사이트에서 게임으로 코딩공부를 할 수 있다. 무료 게임은 아래의 2개가 있다. Codepip Learn to code by playing games codepip.com flexbox 연습 사이트 Flexbox Froggy Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com Grid 연습 사이트 Grid Garden Grid Garden - A game for learning CSS grid How well can you tend to your carrot garden using CSS grid? In this game, you must water your carrot crops and poison the ..

CSS - Flexbox (플렉스 박스)

기본 용어 Axis main axis : 이 축을 기본으로 배치됨 - 범위 : main size (main-start ~ main-end) cross axis : main axis의 수직인 축 - 범위 : cross size (cross-start ~ cross-end) 플렉스 컨테이너 속성 (Properties) display (플렉스 컨테이너 정의) .container { display: flex | inline-flex }​ flex (기본값) : flex 레이아웃 적용 inline-flex : flex레이아웃 적용, container 영역이 item에 딱 맞춰짐 flex-direction (배치 방향) .container { flex-direction: row | row-reverse | colu..

코딩 테스트 풀이 - 2021 카카오 블라인드 1차 (1~4번 문제)

문제 해설 공식 사이트 2021 카카오 신입공채 1차 온라인 코딩 테스트 for Tech developers 문제해설 지난 2020년 9월 12일 토요일 오후 2시부터 7시까지 5시간 동안 2021 카카오 신입 개발자 공채 1차 코딩 테스트가 진행되었습니다. 테스트에는 총 7개의 문제가 출제되었으며, 개발 언어는 C++, Java, Jav tech.kakao.com 1번 문제 핵심 키워드 : 문자열 조작 + 구현 총 7가지의 단계를 단순 구현해내면 풀리는 문제다. 1단계 : str.lower() 를 통해 소문자로 변경 2단계 : string.digit(0~9) strings.ascii_lowercase(a~z) 를 알고 있으면 더 수월했을 것임. 3단계 : (주의) ..이 없어질 때 까지 ..을 .으로 ..

파이썬(python) 알고리즘 - 최단 경로 (다익스트라, 벨만포드, 플로이드 워셜)

양의 그래프에서 최소 비용 찾는 문제를 만났을 때 무슨 알고리즘을 쓸 지 판단이 어려운데요. 고민할 필요 없이 정확히 판단할 수 있도록 정리해 보았습니다. 판단 척도 항목 판단 척도 사용 알고리즘 가중치 +(방향), +(양방향), -(방향) 가능 -(양방향) 불가능 → -사이클 발생 플로이드 워셜, 벨만포드 +(방향), +(양방향) 가능 -(방향), -(양방향) 불가능 다익스트라 입력 최대 범위 V정점 200개 이하 (너무 작은 범위인 경우 무조건 플로이드 의심) 플로이드 워셜 (V+E)*log(V) 계산해서 2천만 이하 다익스트라 (V+E) 계산해서 2천만 이하 벨만포드 필요한 정보 한 노드에서 다른 모든 노드로의 최단 경로 비용 다익스트라, 플로이드 워셜, 벨만 포드 모든 노드에서 다른 모든 노드로의..

파이썬(python) 알고리즘 - 최단 경로 (플로이드 워셜)

플로이드 워셜 개요 항목 내용 언제 쓰는가? 양방향이면서 음/양 가중치 그래프에서 최단 경로 찾기 모든 노드에서 다른 모든 노드 까지의 최단 경로의 길이 계산 ex) A→B로 가는 경로가 있는지 확인 ex) A→??지점을 거쳐서 B,C로 각각 갈때 최소비용 노드 개수가 500개 이하 그래프 유형 양방향, 가중치 (음의 사이클 x) 가중치 양(o), 음(o) 시간 복잡도 O(V^3), (V

CSS - 텍스트 스타일

color 속성 : 글자색 지정 color: 색상 색상은 6자리의 16진수, rgb, rgba, hsl, hsla, 색상이름(black,green,orange...) 기입 가능 VS code에서 아주 친절하게 색깔을 보여준다. 자동완성에서 6자리의 16진수까지 보여준다. 색상 표현법 6자리의 16진수 표기법 : #RRGGBB ※ 만약 RR, GG, BB가 각각 같은 숫자면 #RGB 로 축약가능 hsl, hsla (hue(색상), saturation(채도), lightness(명도)) 표기법 : hsl(0, 100% 50%) - 색상 : 무지개색을 시계방향으로 동그란원을 만들었을때의 각도 (red : 0도, cyan: 180도) - 채도(%) : 회색이 0%, 원래색은 100% - 명도(%) : 어두움 0..

CSS 폰트 적용 방법

font-family 속성 : 글꼴지정 font-family: 글꼴이름; font-family: 글꼴이름, 글꼴이름; font-family: "맑은 고딕", 돋음, 굴림; ※ 글꼴이 없을 경우 대비하여 여러 개 등록하는 것임. CSS3가 웹 폰트를 표준으로 채택하면서 사용자에게 없는 글꼴도 웹 문서와 함께 다운로드하여 보여줄 수 있게 되었다. 자신의 글꼴을 적용하기 위해서는 ttf,EOT,WOFF,WOFF2포맷을 직접 업로드해야한다. ※ TTF은 용량커서 Woff를 먼저지정해야 함 @font-face { font-family: 글꼴이름; src: 글꼴파일, 글꼴파일; } @font-face { font-family: 'HelloFont'; src: local('HelloFont'), url('font/h..

CSS - Cacading Style Sheet, Selector(선택자)

CSS란 CSS는 Cacading Style Sheet 이다. Cascading은 스타일 시트가 적용되는 우선순위가 위에서 아래로 떨어지는 폭포형태로 적용된다는 의미이다. 문서에 여러 개의 스타일을 적용할 때 충돌하지 않도록 하기위한 2가지 방법이 있다. 스타일 우선순위 : 사용자/제작자/브라우저 스타일 순서로 우선순위를 가지고 적용됨 스타일 상속 : 태그의 포함 관계에 따라 부모요소를 자식요소로 전달함 스타일 우선순위 Style Sheet는 아래의 3가지 종류가 존재한다. 사용자 스타일 제작자 스타일 브라우저 기본 스타일 웹 페이지에 아무런 스타일 적용하지 않았을 때 3. 브라우저 기본 스타일이 기본으로 적용해 둔 스타일이 적용되고 제작자가 따로 스타일을 적용했다면 2. 제작자 스타일이 적용되어 보여진..

CSS - html 파일에 css 적용시키는 방법

html 파일에 css 적용시키는 방법 인라인 방식 : HTML 파일의 각 태그안의 내부 스타일 시트 : HTML 파일 안에 태그로 작성 /* test.html.css */ /* css/style.css */ #First { color: red; background-color: yellow; } 외부 스타일 시트 : 태그 안의 내용을 CSS 파일로 분리하고 태그로 연결 절대주소 또는 상대주소 넣어주면 됨. (가장 좋은 방법) /* test.html.css */ /* css/style.css */ #First { color: red; background-color: yellow; } CSS Import : 태그 안의 내용을 CSS 파일로 분리하고 파일을 import 절대주소 또는 상대주소 넣어주면 됨. /..

HTML - input 태그 (사용자 입력, 텍스트 필드, 버튼)

태그 (사용자 태그는 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용한다. type 속성이 굉장히 많다. 종류 설명 text 한 줄짜리 입력 텍스트 박스를 넣는다. password 패스워드 입력 필드를 넣는다. serach 검색 입력 필드를 넣는다. 이 필드에 입력시 오른쪽에 x버튼 추가되어 손쉽게 입력내용 지울 수 있게 된다. url URL 주소 입력 필드를 넣는다. email 이메일 주소 입력 필드를 넣는다. tel 전화번호 입력 필드를 넣는다. checkbox 선택지가 2개 이상 있는 체크 박스를 넣는다. radio 선택지가 1개만 있는 라디오 버튼을 넣는다. number 숫자 조절가능한 스핀 박스를 넣는다. range 숫자 조절가능한 슬라이드 막대를 넣는다. date 사용자 지역 기준으로 날짜..