![]()
내비게이션 바 웹 사이트의 메뉴 링크를 사용한 리스트 메뉴 가장 기본적 방법 HTML에서 링크는 태그로 표현 Home HTML CSS 자바스크립트 수직 내비게이션 바 링크를 사용한 리스트 메뉴에 display 속성값을 block으로 설정 메뉴의 어느 곳을 클릭하더라도 바로 연결된 페이지로 넘어가게 설정 + 클래스 내비게이션 바에서 현재 메뉴의 위치도 표현 가능 :not 선택자를 이용하여 현재 메뉴를 나타내는 current 클래스와 그 외의 메뉴의 배경색을 구분 + border 속성 내비게이션 바에 경계선을 표현 가능 수평 내비게이션 바 display 속성의 inline 속성값을 이용한 방법 링크를 사용한 리스트 메뉴에서 요소의 display 속성값을 inline으로 설정 블록 요소였던 요소가 인라인 요소..
![]()
레이아웃 다중 칼럼(multi-column) 레이아웃 다중 칼럼 속성 columns 모든 columns 속성을 이용한 스타일을 한 줄에 설정 가능 column-count 해당 요소를 몇 개의 칼럼(column)으로 나눌지를 설정 column-gap 칼럼(column) 사이의 간격을 설정 column-width 칼럼의 너비를 설정 웹 브라우저는 설정한 너비의 칼럼을 만든 후, 나머지 영역을 동일하게 나누어 칼럼 사이의 간격으로 자동 설정 column-span 해당 요소가 몇 개의 칼럼을 병합하여 표현할지를 설정 column-fill 칼럼을 어떻게 채울지 설정 column-rule 모든 columns-rule 속성을 이용한 스타일을 한 줄에 설정 column-rule-style 칼럼 사이에 들어갈 라인의 스..
![]()
디스플레이 웹 페이지의 레이아웃(layout)을 결정 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정 HTML의 모든 요소는 각각의 기본 display 속성값을 가지고 있으며 그 값을 변경함으로써 웹 페이지를 개발자가 원하는 모양으로 변경 가능 블록 항상 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지 , , , , , 요소 인라인 새로운 라인(line)에서 시작하지 않으며, 해당 HTML 요소의 내용만큼 차지 , , 요소 인라인 - 블록 해당 요소 자체는 인라인(inline) 요소처럼 동작하지만 해당 요소 내부에서는 블록(block) 요소처럼 동작 인라인 요소처럼 한 줄로 늘어서면서 블록 요소처럼 너비와 높이를 설정 가능 따라서 웹 사이트의 메뉴나 내비게이션 바를 만..
![]()
두 수의 나눗셈 문제 설명 정수 num1과 num2가 매개변수로 주어질 때, num1을 num2로 나눈 값에 1,000을 곱한 후 정수 부분을 return 하도록 soltuion 함수를 완성해주세요. 제한사항 0
![]()
박스 모델(box model) 모든 HTML 요소는 박스(box) 모양으로 구성 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분 [CSS] height / width : 내용(content) 부분만 [HTML] height / width : 패딩(padding), 테두리(border), 마진(margin)의 크기는 포함되지 않음 전체 너비 / 높이 계산 HTML 요소의 전체 너비 : width + left padding + right padding + left border + right border + left margin + right margin HTML 요소의 전체 높이 : height + top padding +..
![]()
아이스 아메리카노 문제 설명 머쓱이는 추운 날에도 아이스 아메리카노만 마십니다. 아이스 아메리카노는 한잔에 5,500원입니다. 머쓱이가 가지고 있는 돈 money가 매개변수로 주어질 때, 머쓱이가 최대로 마실 수 있는 아메리카노의 잔 수와 남는 돈을 순서대로 담은 배열을 return 하도록 solution 함수를 완성해보세요. 제한사항 0 money라는 정수형 매개변수를 받고 정수형 배열을 반환 public int[] solution(int money) { // 크기가 2인 정수형 배열 answer를 생성 // -> 두 개의 정수를 저장할 공간을 가짐 int[] answer = new int[2]; answer[0] = money / 5500; // 아이스 아메리카노를 최대로 구매할 수 있는 잔 수를 저..
![]()
직사각형 별찍기 문제 설명 이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다. 별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요. 제한사항 n과 m은 각각 1000 이하인 자연수입니다. 입출력 예시 코드 import java.util.Scanner; class Solution { public static void main(String[] args) { Scanner sc = new Scanner(System.in); int a = sc.nextInt(); int b = sc.nextInt(); System.out.println(a + b); } } 풀이 // Scanner 클래스를 가져옴. 사용자 입력을 처리하는 데 사용됩니다. import java...
![]()
폰켓몬 문제 설명 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다. 첫 번째(3번), 두 번째(1번) 폰켓몬을 선택 첫 번째(3번), 세 번째(2번) 폰켓몬을 ..
![]()
전국 대회 선발 고사 문제 설명 0번부터 n - 1번까지 n명의 학생 중 3명을 선발하는 전국 대회 선발 고사를 보았습니다. 등수가 높은 3명을 선발해야 하지만, 개인 사정으로 전국 대회에 참여하지 못하는 학생들이 있어 참여가 가능한 학생 중 등수가 높은 3명을 선발하기로 했습니다. 각 학생들의 선발 고사 등수를 담은 정수 배열 rank와 전국 대회 참여 가능 여부가 담긴 boolean 배열 attendance가 매개변수로 주어집니다. 전국 대회에 선발된 학생 번호들을 등수가 높은 순서대로 각각 a, b, c번이라고 할 때 10000 × a + 100 × b + c를 return 하는 solution 함수를 작성해 주세요. 목표 선발된 학생들의 번호 (a, b, c)를 사용하여 계산된 특정 수식의 결과를..
![]()
언어의 종류 절차지향 프로그래밍 반복문 작성 후 함수 또는 메소드를 사용해서 해야할 일들을 정의 범위가 더 넓어질경우 반복문, 함수 또는 메서드로만 코드를 간편하게 정의하는데 한계가 있음 프로세스가 함수 단위 순서대로 진행된다. 객체지향 프로그래밍 각각의 대상에게 클래스로 정의한 아이템과 동작들을 할당하여 데이터와 기능을 클래스로 캡슐화 객체지향이란? 프로그래밍을 더 쉽게 할 수 있도록 만들어진 프로그래밍 방식, 패러다임 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법 객체지향의 구성 객체지향 프로그래밍(OOP) 에서는 모든게 객체로 구성. 먼저 서로 관계가 있는 속성과 기능들을 묶어 클래스로 정의하고, ..
![]()
크기 단위 백분율 단위(%) : 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기 배수 단위(em) : 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기 픽셀 단위(px) : 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기 크기 조절 height / width HTML 요소의 높이와 너비 기본 설정값은 auto -> 웹 브라우저가 각 HTML 요소에 맞게 자동으로 높이와 너비를 설정 설정된 너비 이하로 브라우저의 크기가 줄어들 때 해당 요소에 스크롤 바를 생성 태그등 inline 요소는 적용 되지 않음 #box{ width: 100px; height: 60px } max-width HTML 요소가 가질 수 있는 최대 너비 기본 설정값은 none 해당 HTML 요..
![]()
CSS 텍스트 color 텍스트의 색상을 설정 웹 페이지에서 텍스트의 기본 색상은 검정색 태그에 명시된 color 속성값은 웹 페이지 내의 모든 텍스트 요소에 적용 만약 각 요소별로 따로 명시된 color 속성값이 있다면, 해당 속성값이 태그에 명시된 속성값보다 우선 적용 direction 텍스트가 써지는 방향을 설정 웹 페이지에서 텍스트는 기본적으로 왼쪽에서 오른쪽 방향 left-to-right(ltr)일 때는 기본 설정처럼 텍스트가 왼쪽에서 오른쪽 방향 right-to-left(rtl)일 때는 텍스트가 반대 방향인 오른쪽에서 왼쪽 방향 letter-spacing 텍스트 내에서 글자 사이의 간격을 설정 word-spacing 텍스트 내에서 단어 사이의 간격을 설정 문자 간의 간격이 아닌 단어 간의 간격..
