플렉스 컨테이너의 배치 관련 속성플렉스 컨테이너의 주축에서 또는 교차축에서 요소를 어떻게 정렬할 것인지 지정하는 속성이다.속성값설명justify-content주축의 정렬 방법align-items교차축의 정렬 방법align-content교차축에 여러 줄로 표시할 때 사용하는 정렬 방법flex-direction의 속성값flex-direction 속성은 플렉스 컨테이너의 주축과 방향을 지정하는 속성이다.속성값설명row주축을 가로로 지정하고 왼쪽에서 오른쪽으로 정렬. 기본값row-reverse주축을 가로로 지정하고 오른쪽에서 왼쪽으로 정렬column주축을 세로로 지정하고 위쪽에서 아래쪽으로 정렬column-reverse주축을 세로로 지정하고 아래쪽에서 위쪽으로 정렬 플레스 항목의 줄을 바꾸는 flex-wrap ..

👨‍💻 미디어 커리란?반응형 웹 디자인에서 가장 기본적인 개념으로 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법이다.아래 예시 사진 처럼, 미디어 커리는 다양한 기기와 화면 크기에 대응하여 웹 사이트를 더 효과적으로 표현할 수 있게 한다.미디어 커리는 사이에 사용하며 기본적으로 미디어 유형을 지정하고 필요한 경우에는 and 연산자로 조건을 적용한다.1. 웹 페이지의 최대 가로 너비(max-width)가 980px 이하인 경우@media screen and (max-width:980px) {    #page { width: 94%;}    #main {width: 65%;}    #sidebar {width: 30%;}}2. 웹 페이지의 최대 가로 너비(max-width)가 70..

👨‍💻 float:left 속성으로 아무리 가운데 정렬을 하려고 노력해봤지만, 카드 요소들의 가로 정렬을 위해 float:left 속성을 사용했다. 가로 정렬은 성공(?) 했지만 가운데 정렬을 하지 못했다.text-align: center; / margin:0 auto; 를 사용해도 도저히 안되는 가운데 정렬 원인은 바로 float:left 속성 때문이었다. .travel-card { float: left;} 카드 요소 class 선택자("travel-card") 로 묶어 float: left; 사용 시 결과 화면이다.요소들이 브라우저의 왼쪽부터 가로 정렬로 나열된다.하지만 내가 원하는 것은 가운데 정렬을 같이 하는 것이었다. 👨‍💻 display: inline-block; 을 사용한 가운데..

👨‍💻특정 부분에 스타일을 적용하는 class / id 선택자 특정 요소에 스타일을 적용하는 타입 선택자 특정 태그를 사용하면 모든 요소에 스타일을 적용할 수 있다.같은 태그라도 일부는 다른 스타일을 사용할 때 class 선택자와 id 선택자를 사용한다.1. 태그 모든 요소에 스타일 적용 HTML CSS JavaScriptp { color: red;} 2. 태그 요소에 class(.) / id(#) 선택자 특정 부분 스타일 적용 HTML CSS JavaScript p { color: red;}/* class 선택자 */.css { text-decoration: underline; color:blue;}/* id 선택자 */#js { te..

👨‍💻 자바를 공부하는 중, 처음으로 접한 입력방식 Scanner 클래스이다. 책에 내용에 따라 아래와 같이 실습을 하던중 정수가 아닌 값을 입력했을때 정수가 아닌 경우 판별하는 간단한프로그램을 만들고 싶었다. Scanner 클래스를 사용할 시 util 패키지를 import 를 통해 호출해주어야 한다. 정수 입력값에 대해서만 입력내용 출력하기import java.util.Scanner;public class scanner { public static void main(String[] args) { Scanner sc = new Scanner(System.in); System.out.println("정수를 입력해주세요.>"); String input = sc.nextLine(); int num ..