IT 개발 지식

Grid란? CSS의 레이아웃 시스템이며 2차원 레이아웃으로 아이템들을 배치한다. 사용방법으로는 Flex박스와 비슷하게 사용된다. Item 1 Item 2 Item 3 /* Grid 열 만들기 */ grid-template-columns: 300px 300px 300px; .grid { /* Grid rows */ display: grid; grid-template-rows: 1fr 2fr 3fr; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); } .item:first-child { grid-column: 1/4; grid-row: 1/3; }

1. 영문 소문자 하나를 입력받고 그 문자보다 알파벳 순위가 낮은 모든 문자를 출력하는 프로그램을 작성하라. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 package com.example; import java.util.Scanner; public class study { public static void main(String[] args) { Scanner scanner = new Scanner(System.in); System.out.print("영문 소문자 하나를 입력하시오. "); String a = scanner.next(); char b = a.charAt(0); for(int i = 'a'; i

Flexbox : 레이아웃 Display 속성을 사용함 Float보다 호율적으로 사용이 가능함 가로 세로로 아이템들을 정렬함 아이템들의 순서나 비율등을 쉽게 적용함 ⭐️Flex는 main-axis(주축)과 cross-axis(교차축)으로 구성된다 ※ flex를 적용하기 위해 부모요소의 CSS에서 시작한다. .container { display: flex; } ※ 단, 자식요소에게 전부 적용하기 싫다면 싫다면 >(꺽새)를 입력하게 된다면 container 안에 있는 div태그 하나만 선택하게 된다. 만약 >(꺽새를) 입력하지 않고 사용한다면 container안에 div태그가 몇개있던 전부 적용이 된다. .container > div { padding: 10px; text-align: center; font..

Position 속성 fixed relative absolute static 기본 ※ absolute 속성을 쓰기 위해서는 부모의 Position이 static 여서는 안된다. 화면의 정가운데 박스의 내용도 가운데에 넣기 박스의 꼭짓점 기준으로 가운데정렬이 되어 margin을 박스 절반만큼 줄여주거나 가로정렬, 세로정렬을 해준다. 정중앙으로 # Form CSS 실습 Sign Up It's free and only takes a minute First Name Last Name Email Password Confirm Password Sign Up By clicking the Sign Up button, you agree to our Terms & Conditions and Privacy Policy Al..

content : 내용물 padding : content(내용물)와 border의 간격 border : 경계선 margin : 여백 블럭 vs 인라인 차이점은? 블럭 인라인 한줄에 하나씩 쌓인다. 한줄에 여러 요소가 나온다. 가로와 세로 길이를 가진다. 가로 세로 길이 X, 내용물의 크기 만큼 차지한다. 화면 배치를 위해 주로 사용된다. 텍스트를 꾸밀 때, 주로 사용이 된다. font-family 속성 웹문서에서 사용할 글꼴을 지정 텍스트를 사용하는 요소들에 사용됨 지정한 글꼴이 없을 경우 2~3가지 글꼴을 지정할 수 있음 둘 이상의 글꼴을 지정할때에는 ,로 구분함 body { font-family:"맑은 고딕",돋움,굴림; /* 글꼴 */ } 1. Font Style, 폰트 글꼴 p.normal { f..

스타일(style) : HTML 문서에서 자주 사용하는 글꼴 및 색상, 정렬 각 요소의 배치 방법 등 문서의 겉모습을 표현 하는 내용이다. 스타일 시트(style sheet) : 스타일을 관리하기 쉽게 하나로 모은것이다. CSS를 사용하는 이유는? 많은 웹페이지를 동시에 관리가 가능하다 (많은 일을 절약 가능) 웹 사이트의 스타일을 일관성 있게 유지할 수 있다. (유지 보수가 쉽다) 다양한 기기에 맞추어 반응하는 문서를 만들수 있다. HTML에 CSS 적용방법은? 인라인 스타일 방법 (lnine Style Sheet) => 권장하지는 않는다. 내부 스타일 시트 (lnternal Style Sheet) 외부 스타일 시트 (Linking Style Sheet) 인라인 스타일 방법 h1 { font-size:..

사용자가 웹 사이트로 정보를 보낼 수 있는 요소는 모두 form form은 사용자가 웹브라우저에 입력한 정보를 서버로 넘겨주는 역할을 한다. 사용 방법은 폼 요소 태그의 사용방법은 Value Description hidden 사용자에게 보이지 않고 폼 입력값에 추가되어 서버로 전달 text 텍스트 상자 search 검색 상자 tel 전화번호 입력 필드 url url 주소 필드 email 메일주소 입력필드 password 비밀번호 입력필드 date 사용자 지역을 기준으로 날짜(년,월,일) 입력 time 사용자 지역을 기준으로 시간 입력 number 숫자를 조절할 수 있는 화살표 입력 color 색상표 입력 checkbox 여러개 선택할 수 있는 체크박스 radio 여러 항목중 1개만 선택가능한 라디오 버튼..

첫번째 목록List를 만들기 위해서는 기본적으로 또는 을 사용하고 목록 아이템들을 태그로 사용한다. Ordered List : 순서가 있는 목록 Unordered List : 순서 없는 목록 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 목록 리스트 순서있는 리스트 커피 우유 초코우유 바나나우유 녹차 순서없는 리스트 커피 우유 녹차 Colored by Color Scripter cs 여기서 순서없는 리스트(ul)을 style 속성으로 모양을 바꿀수도 있다. 속성 style = "list-style-type:속성값" 두번째 Table를 만들기위해서는 : 표만들기 : 행(row) : ..

1. 두 정수를 입력을 받아 합을 구하여 출력하는 프로그램을 작성하라. 단, 키보드 입력은 Scanner 클래스를 이용하라. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 package java0407; import java.util.Scanner; public class Ex1 { public static void main(String[] args) { Scanner scanner = new Scanner(System.in); int a, b; System.out.print("두 정수를 입력하시오. "); a = scanner.nextInt(); b = scanner.nextInt(); System.out.println("두 정수의 합은: " + (a + b) +..

오늘은 이클립스에서 자주 사용하는 단축키를 알아보고 그 중에서도 가장 많이 사용이 되는걸 직접 실습을 해볼게요! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 ctrl + f11 : 콘솔창에 클래스 실행 ctrl + +- : text font 크기 조절 ctrl + 좌클릭(또는 f3) : 클래스, 메소드, 멤버 상세 검색 또는 선언된 변수로 이동 alt + ← 또는 → : 이전 또는 이후 위치로 이동 ctrl + space : 입력 보조장치, 자동 완성 기능 ex) syso 입력 후 ctrl + space ctrl + sh..