![]()
조건부 그룹 at-규칙 공통 구문을 공유하고 그 각각은 중첩 문(규칙 집합(ruleset) 또는 중첩 @-규칙 중 하나)을 포함 모두 일반 semantic 의미를 전달 모두 언제라도 참 또는 거짓 중 하나로 평가하는 어떤 유형의 조건을 링크 -> 조건을 참으로 평가하면, 그룹 내 모든 문이 적용 됌 @규칙(at-rule) 식별자가 뒤따르는 at 기호('@' )로 시작하는 CSS문 세미콜론(';' ) 또는 다음 CSS 블록 중 먼저 오는 쪽까지 모든 것을 포함 @import 다른 스타일 시트에서 스타일 규칙을 가져올 수 있는 규칙 스타일 시트에 사용되는 문자 인코딩을 지정하는 @charset 규칙을 제외하고 모든 다른 규칙보다 앞서 명시 추가하는 CSS 파일의 개수가 늘어날수록 웹 서버의 부하도 같이 커지..
![]()
form 요소 CSS를 이용하면 사용자의 입력을 받는 input 요소에도 다양한 스타일을 설정 가능 [input 요소] 크기 설정 width 속성 [input 요소] 테두리 설정 border 속성 border-radius 속성 [input 요소] 배경색 적용 background-color 속성 color 속성 [(포커스를 가지고 있는) input 요소] 스타일 적용 :focus 선택자를 이용하여 해당 input 요소가 포커스를 가지고 있을 때의 스타일을 별도로 설정 [input 요소] 아이콘 / 이미지 삽입 background-image 속성 : 아이콘(icon)이나 이미지를 삽입 background-position 속성 : 아이콘이나 이미지가 나타날 위치를 설정 [textarea 요소] 크기 조절 re..
![]()
툴팁(tooltip) 효과 해당 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과 ex) visiblility 속성을 이용하여 툴팁 효과를 구현 CSS의 상대적 위치를 나타내는 top, right, bottom, left 속성을 이용하여 툴팁의 상대 위치를 설정 가능 ex) 툴팁이 해당 요소의 아래 쪽이 아닌 왼쪽에 나타나도록 구현 ex) 툴팁 말풍선 모양 https://www.tcpschool.com/css/css_advanced_tooltip
![]()
드롭다운(dropdown) 효과 해당 요소에 마우스를 올려서 다른 요소나 텍스트가 나타나게 하는 효과 display 속성을 이용하여 드롭다운 효과를 구현 사용자가 마우스를 올리면 나타날 요소의 display 속성값을 none으로 설정 처음에는 보이지 않지만 특정 요소에 마우스를 올리면 해당 요소의 display 속성값이 블록-으로 변경 되어 보이게 됌 드롭다운(Dropdown) 메뉴 메뉴에 마우스를 올리면 하위 메뉴가 나타나게 하는 메뉴 해당 요소의 display 속성을 이용하여 드롭다운 메뉴를 구현 드롭다운 메뉴 Dropdown HTML CSS JAVA C++ 드롭다운 네비게이션 제작 https://dev-scratch.tistory.com/103 [CSS - Hover, Display] 드롭다운 네비..
![]()
내비게이션 바 웹 사이트의 메뉴 링크를 사용한 리스트 메뉴 가장 기본적 방법 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번) 폰켓몬을 ..
