★ 문제 1 : 글 상자에 마우스를 올리면 내용을 아래로 스크롤하시오. HTML 코드 transition Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi veniam, expedita illum hic nulla quas repellendus, fuga in, perferendis possimus cupiditate ducimus optio nihil vel ratione quod atque porro error? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi veniam, expedita illum hic nulla qu..
★ 전환, Transition 객체의 속성(상태)값이 변화되는 과정을 시간 순서대로 보여주는 속성 수치형 속성에만 적용 가능(숫자, 색상) 사용방법 transition-property : width; transition-duration: 1s; 한줄로 타이핑 가능 transition : .5s all; ■ HTML 코드 상자 ■ CSS 코드 ■ 실행 결과 ■ 다양한 ex1) #box { border : 10px solid black; width : 200px; height: 200px; background-color: gold; margin : 100px; transition-property : all; transition-duration: 10s; } #box:hover { width : 400px; ..
★ Display flex box, flexialbe box 레이아웃 구성 > 내부 요소의 배치 float / position / margin 기본 상태(display : flex) 메인축 방향 : 가로(아이템이 나열되는 방향) 수직축 방향 : 세로 아이템 크기 : 너비(요소 크기만큼) 아이템 크기 : 높이(부모 크기만큼) 아이템 크기 : 메인축(요소 크기만큼) 아이템 크기 : 수직축(부모 크기만큼) display : flex; 실행 결과 기존 방법 1 : float를 사용 하였을 경우 #box::after { content:''; display : block; clear:left; } #box .item { float : left; } 기존 방법 2 : display : inline을 사용하였을 경우 ..
★ OutLine 바깥쪽 테두리를 만드는 역할 테두리 : border 사용 테두리 표현 O, 주변에 영역 침범 X : Outline 사용 사용법 #box2 { /* border : 10px solid cornflowerblue; */ outline : 10px solid cornflowerblue; } border와 비슷하지만 차이가 있음 size에 영향을 안미치고, 테두리가 생김으로 인해서 다른애들을 밀어내는 현상이 없음 실행 결과 ■ Text 상자를 이용한 OutLine HTML 코드 CSS 코드 : border를 주었을 경우 input[type=text] { display: block; /* 한줄 배치 */ margin-bottom: 5px; outline : none; } input[type=te..
★ 변형, Transform 위치, 크기, 회전, 왜곡 등 1. transform : translate() : 위치 변형(이동) 2. transform : scale() : 크기, 배율 변형(확대|축소) 3. transform : rotate() : 회전 변형 4. transform : skew() : 왜곡 변형(비틀기) 5. transform : matrix() : 1~4번 포함. 사용자 정의형 > 행렬 6. transform-origin : 변형 > 기준점(원점) 지정 ■ 사용 ex) ex1) transform : translate(x, y) x축, y축으로 이동 #box1 { background-color: tomato; transform : translate(50px, 0px); } 실행 결과 e..
★ Column 다단 구조 p { column-count : 3; } 컬럼과 컬럼 사이의 간격 column-gap : 20px; 컬럼 테두리 column-rule : 1px solid gray; 실행 결과 ■ Card Layout HTML 코드 Card Layout Lorem ipsum dolor sit amet. Nam in atque praesentium tempore? Asperiores perferendis voluptates nostrum impedit! Est tempore quaerat id adipisci. Obcaecati corrupti earum ad vitae? Eaque eum fugiat dignissimos labore. Consequuntur dicta nulla unde t..
★ 모서리 둥글기 border-radius : px, % 단축의 길이 1/2 = 최댓값 사용 방법 border-radius : 10px; 실행 결과 사용 방법 2 최대 값 : 50% border-radius: 10%; 실행 결과 2 사용 방법 3 border-top-left-radius: 30px; border-bottom-right-radius: 30px; border-top-right-radius: 100px; border-bottom-left-radius: 100px; 실행 결과 3 이미지에 radius 주기 실행 결과 ★ 아이콘 window + . 버튼 클릭시 아이콘들이 나옴 대중적으로 많이 쓰는 사이트 https://fontawesome.com/start 구글에서 제공하는 사이트 https://..
★ 문제 어떤 자연수 p와 q가 있을 때, 만일 p를 q로 나누었을 때 나머지가 0이면 q는 p의 약수이다. 6을 예로 들면 6 ÷ 1 = 6 … 0 6 ÷ 2 = 3 … 0 6 ÷ 3 = 2 … 0 6 ÷ 4 = 1 … 2 6 ÷ 5 = 1 … 1 6 ÷ 6 = 1 … 0 그래서 6의 약수는 1, 2, 3, 6, 총 네 개이다. 두 개의 자연수 N과 K가 주어졌을 때, N의 약수들 중 K번째로 작은 수를 출력하는 프로그램을 작성하시오. ★ 소스코드 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.StringTokenizer; public class Main..
