[TIL] CSS Flex, Grid / Java Exception
CSS
Flex Box Layout
1차원으로 레이아웃 설계하는 스타일 속성
가로나 세로 중 한 방향으로만 레이아웃을 설계
<style>
.flex-container{
width: 300px;
height: 300px;
background-color: blueviolet;
border: 1px solid black;
}
.flex-item{
color: black;
background-color: cadetblue;
}
.flex-item:nth-child(2n){
background-color:gold;
}
</style>
<div class="flex-container">
<div class="flex-item">item_1</div>
<div class="flex-item">item_2</div>
<div class="flex-item">item_3</div>
<div class="flex-item">item_4</div>
</div>display 속성
해당 속성이 지정된 요소는 그리드 컨테이너가 되고, 자식 요소는 그리드 아이템이 된다.
display : flex;: 적용된 요소의 다음 요소가 항상 줄 바꿈된다.display: inline-flex;: 다음 요소가 주변에 배치된다.
.flex-item{
display: flex;
}
.flex-item{
display: inline-flex;
}flex-wrap 속성
플렉스 아이템이 플렉스 컨테이너 영역을 벗어날 때 어떻게 처리할지 결정
| 속성값 | 설명 |
|---|---|
| nowrap | 아이템이 컨테이너를 벗어나도 무시 |
| wrap | 벗어나면 줄바꿈 |
.flex-container{
flex-wrap: nowrap;
display: flex;
}
.flex-container{
flex-wrap: wrap;
display: flex;
}justify-content : 정렬
flex item을 주축 방향으로 정렬
| 속성값 | 설명 |
|---|---|
| flex-start | 주축 방향의 시작을 기준으로 정렬 |
| flex-end | 끝을 기준 |
| center | 주축 중앙 정렬 |
| space-between | 아이템 사이의 간격이 동일하게 |
| space-around | 아이템의 둘레가 균일하도록 |
| space-evenly | 아이템 사이와 양끝의 간격이 균일하도록 |
.flex-container{
flex-wrap: wrap;
display: flex;
justify-content: flex-start;
}
<!-- wrap 때문에 줄바꿈이 된 것 -->
.flex-container{
flex-wrap: wrap;
display: flex;
justify-content: center;
}
.flex-container{
flex-wrap: wrap;
display: flex;
justify-content: space-between;
}Grid Layout
2차원 방식으로 레이아웃 설계할 수 있는 스타일 속성
가로, 세로를 사용하여 레이아웃 설계
<style>
.grid-container{
color:aliceblue;
background-color: bisque;
}
.grid-item{
background-color: cadetblue;
}
.grid-item:nth-child(2n){
background-color:darkgray;
}
</style>
<div class="grid-container">
<div class="grid-item">item_1</div>
<div class="grid-item">item_2</div>
<div class="grid-item">item_3</div>
<div class="grid-item">item_4</div>
</div>display 속성
display: grid; : 해당 요소는 그리드 컨테이너, 자식 요소는 그리드 아이템이 된다.
grid-template-rows, columns
행과 열의 크기를 설정한다.
grid-template-rows: 1행값 2행값;
grid-template-columns: 1열값 2열값;repeat()
grid-template-rows: repeat(횟수, 행 값);행 혹은 열의 크기가 같을 경우에 반복하여 지정할 수 있다.
minmax(min, max)
grid-template-rows: repeat(횟수, minmax(최솟값, 최댓값));gap 속성
행과 열이 이루어져 만나는 그리드 셀 사이의 간격
row-gap: 행 사이의 간격 크기;
column-gap: 열 사이의 간격 크기;
grid-gap: 크기;align-items
그리드 아이템을 각 그리드 셀의 세로 방향으로 정렬
.grid-container{
display: grid;
grid-template-columns: repeat(2, minmax(100px, 200px));
grid-template-rows: 100px 100px;
align-items: center;
}justify-items
그리드 아이템을 각 그리드 셀의 가로 방향으로 정렬
.grid-container{
display: grid;
grid-template-columns: repeat(2, minmax(70px, 100px));
grid-template-rows: 100px 100px;
justify-items: center;
}grid-template-areas
그리드 레이아웃의 행과 열을 이름으로 지정한다.
.grid-container{
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
#header{
grid-area: header;
}
#sidebar{
grid-area: sidebar;
}
#content{
grid-area: content;
}
#footer{
grid-area: footer;
}
<div class="grid-container">
<div id="header">header</div>
<div id="sidebar">sidebar</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>grid-column, grid-row
grid-row: startIdx/endIdx;
grid-row-start: startIdx; grid-row-end: endIdx;
그리드 넘버를 이용해 그리드 아이템의 열, 행의 시작, 끝 위치를 지정한다.
.grid-container{
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
}
.grid-item:nth-child(1){
grid-column-start: 1;
grid-column-end: 3;
}
.grid-item:nth-child(2){
grid-column-start: 3;
grid-column-end: 4;
}
.grid-item:nth-child(3){
grid-row: 2/4;
}
.grid-item:nth-child(4){
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
}
<div class="grid-container">
<div class="grid-item">item_1</div>
<div class="grid-item">item_2</div>
<div class="grid-item">item_3</div>
<div class="grid-item">item_4</div>
</div>@media ()
화면 크기에 따라 조절하기
/* 화면 크기가 500px이하인 경우 */
<style>
@media (max-width: 500px) {
...
}
</style>Java
예외처리
오류 종류
| 오류 종류 | 해결방법 |
|---|---|
| Syntax Error | Compiler |
| Logic Error | Debugging Tool |
| Runtime Error | 예외처리 |
예외
예외와 에러가 발생하면 프로그램은 곧바로 종료되지만, 예외 처리를 통해 계속 실행 상태를 유지할 수 있다.
자바는 예외가 발생하면 예외 클래스로부터 객체를 생성한다. 이 객체는 예외 처리 시 사용된다.
자바의 모든 에러와 예외처리는 Throwable을 상속받아 만들어지고, 추가적으로 예외 클래스는 java.lang.Exception 클래스를 상속받는다.
일반 예외
컴파일러가 예외 처리 코드 여부를 검사하는 예외
실행 예외
컴파일러가 예외 처리 코드 여부를 검사하지 않는 예외
try {
예외 발생 가능 코드
} catch (예외클래스 e) {
예외 처리
} catch (예외클래스2 e){
예외 처리
} catch (예외클래스3 | 예외클래스4 e){
예외 처리
} finally {
항상 실행;
}예외 발생과 상관없이 finally 블록은 항상 실행된다. 생략 가능하다.
다중 catch를 사용하여 다양한 종류의 예외를 처리 가능하다.
해당 타입의 예외가 발생하면 catch 블록 하나가 선택되어 실행된다.
두 개 이상의 예외를 하나의 catch 블럭으로 동일하게 예외 처리를 하고 싶을 때는 예외를 |으로 연결한다.
예외 떠넘기기 throws
리턴타입 메서드이름 (매개변수, ...) throws 예외클래스1, 예외클래스2 {}메서드를 호출한 곳으로 예외를 떠넘길 수 있다.
void mthd() throws Exception 혹은 throws Throwable 으로 모든 예외를 떠넘길 수 있다.
main()에서 throws를 하면 JVM이 최종적으로 예외 처리를 한다. JVM은 예외의 내용을 콘솔에 출력하는 것으로 예외 처리를 한다.
사용자 정의 예외
- 일반 예외 : 컴파일러가 예외 처리 코드 여부 검사
- Exception의 자식 클래스로 선언
extends Exception
- 실행 예외 : 컴파일러가 예외 처리 코드 여부 검사 X
- RuntimeException의 자식 클래스로 선언
extends RuntimeException
public class 사용자정의Exception extends Exception 혹은 RuntimeException{
public 사용자정의Exception(){} // 기본 생성자
public 사용자정의Exception(String msg){ // 예외메세지를 입력받는 생성자
super(msg);
}
}super(예외메세지) : 예외 객체의 공통 메서드인 getMessage()의 리턴값으로 사용하기 위함.
예외 발생시키기 throw
public void withdraw(int money) throws InsufficientException {
if(balance < money){
throw new InsufficientException("잔고 부족"+(money-balance)+" 부족함.");
}
balance -= money;
}throw 예외객체 생성 으로 예외 객체를 제공한다.
자주 사용하는 예외 클래스
| 예외 클래스 | 설명 |
|---|---|
| NullPointerException | 참조변수가 null일 때, 필드나 메서드에 접근한 경우 |
| ArrayOutOfBounds | 배열의 인덱스가 초과되었을 경우 |
| NumberFormatException | 숫자 타입이 아닐 경우 발생한다. |
| ClassNotFoundException |
Refs