웹 공부일지

1 단계 : 체육복 코딩테스트 연습 > 탐욕법(Greedy) > 체육복 점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게만 체육복을 빌려줄 수 있습니다. 예를 들어, 4번 학생은 3번 학생이나 5번 학생에게만 체육복을 빌려줄 수 있습니다. 체육복이 없으면 수업을 들을 수 없기 때문에 체육복을 적절히 빌려 최대한 많은 학생이 체육수업을 들어야 합니다. 전체 학생의 수 n, 체육복을 도난당한 학생들의 번호가 담긴 배열 lost, 여벌의 체육복을 가져온 학생들의 번호가 담긴 배열 reserve가 매개변수로 주어질 때, 체육수업을 들을 수 있..

정규 표현식(Regular Expression) 정규표현식은 특정 패턴의 문자열을 찾기 위한 표현 방식입니다. 정규 표현식을 활용하게 되면 텍스트 안에서 전화번호나 email 형식의 텍스트를 쉽게 찾거나 변형할 수 있습니다. 다음과 같이 사용합니다. 밑의 3가지 방법은 동일한 정규표현식을 만듭니다. 1. let pattern = /pattern/flag 2. let pattern = new RegExp(/pattern/, flag) // 리터럴 표기법 (정규식이 일정하게 유지되는 경우, 반복문에서 사용) 3. let pattern = new RegExp(/'pattern'/, flag) // constructor (정규식을 다른곳에서 가져오거나 바뀔 때 사용) flag 알아보기 정규 표현식 객체 플래그를..

미디어쿼리 (media query) 미디어 쿼리란 반응형 웹 디자인의 핵심 부분입니다. 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 가장 간단한 미디어 쿼리 구문은 다음과 같습니다. @media media-type and (media-feature-rule) { /* CSS rules go here */ } @media 작성 방법과 속성들 미디어 타입에 대해서 알아보겠습니다. and 전 후에 띄워 씁니다. Media Type 설명 all 모든 미디어 장치에 ..

HTML 구조 관련 요소 구조 태그들은 다음과 같습니다. 코드로 설명드리겠습니다. 반응형웹 MENU01 MENU02 MENU03 MENU04 MENU05 콘텐츠 그룹01 콘텐츠 그룹02 주요기사 광고 경기도 부천시 오정구 삼정동 032)674-5685 icoxpub@naver.com COPYRIGHT c right reserved. 결과 정리 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 1. HTML 문서의 헤더 형역을 의미하는 태그로 제목이나 내비게이션, 검색 등의 내용 들을 포함할 수 있습니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 태그는 포함할 수 없습니다. 1. HTML 문서에서 맥락이 같은 요소들을 주제별로 그룹화 해주는 태그이며 섹션 주제에 대한 제목요소(..

CSS 기본 문법과 사용 방법 CSS(Cascading Style Sheet)는 문서의 콘텐츠와 레이아웃, 글꼴 및 시각적 요소들로 표현되는 문서의 외관(디자인)을 분리하기 위한 목적으로 만들어졌습니다. CSS를 정의하는 방법으로는 4가지가 있습니다. 4가지 방법을 같이 알아보죠~ 참고로 CSS에서 주석은 /* 내용 */로 표기합니다. CSS 레벨 CSS 명세는 World Wide Web Consortium에서 관리합니다. CSS는 세 개의 주 레벨이 정의되어 있고 이 레벨들은 버전이나 세대라고 볼 수 있고, 현재 CSS1, CSS2 및 CSS3가 정의되어 있습니다. 내부 스타일 시트 외부 스타일 시트 @import 인라인 스타일 1 정리 방법 적용 방식 설명 내부 스타일 시트 HTML문서 안에 styl..

1 단계 : 모의고사 코딩테스트 연습 > 완전탐색 > 모의고사 문제 설명 수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다. 1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ... 2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ... 3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ... 1번 문제부터 마지막 문제까지의 정답이 순서대로 들은 배열 answers가 주어졌을 때, 가장 많은 문제를 맞힌 사람이 누구..

1 단계 : 폰켓몬 코딩테스트 연습 > 해시 > 폰켓몬 문제 설명 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다. 첫 번째(3번), 두 번째(1번) 폰켓몬을 ..

1 단계 : K번째 수 코딩테스트 연습 > 정렬 > K번째 수 문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요..

벡터 방식과 비트맵 방식의 차이는 무엇일까요? 이미지를 표현하는 방식에 대표적으로 비트맵 방식과 벡터 방식이 있습니다. 그렇다면 두 표현방법의 차이는 무엇일까요? 비트맵 방식 비트맵 방식을 설명하기 전에 먼저 픽셀이라는 개념을 알아야 합니다. 픽셀이란 Picture(그림) + Element(원소)의 합성어로서 화소라고도 하는 화면을 구성하는 가장 기본이 되는 단위입니다. 이 점 하나에 해당 색의 정보(빨간색, 녹색, 파란색, 투명도 등)가 담겨져 있으며, 이는 곧 그림의 용량과 직결됩니다. 그렇다면 비트맵 방식이라는 건 무엇일까요? 비트맵 방식 : 비트맵 방식은 '비트의 지도(Map of bits)'라는 뜻으로, 각 픽셀에 저장된 비트 정보가 집합된 것입니다. 비트맵은 벡터와 다르게 픽셀의 점 하나하나가..

1 단계 : 완주하지 못한 선수 코딩테스트 연습 > 해시 > 완주하지 못한 선수 문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요.제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다.입출력 예..