1) 해당 조건에 대한 실행할 실행문이 하나라면 {}를 생략해도 좋지만, 그 이외에는 다 {}를 넣어야 한다.
public static void main(String[] args) {
int score = 91;
if (score >=90) {
System.out.println("You are Level A.");
System.out.println("Congratulations!");
}
if (score <80)
System.out.println("You are Level B."); System.out.println("Keep up the good work");
System.out.println("Try a little harder!");
}
이렇게 if문 바로 아래 줄에, 같은 줄에 실행문을 두 개 이상 적는다고 해도, {}가 없으면 if문은 맨 앞의 실행문만 if문에 적용시킨다.
2) IF문으로 성적이 나오는 프로세스를 비슷하게 따라 해 보았다.
import java.util.Scanner;
public class chapter_4 {
public static void main(String[] args) {
Scanner scanner = new Scanner(System.in);
System.out.println("What's your midterm score?");
int midterm = scanner.nextInt();
System.out.println("What's your assignment score?");
int assignment = scanner.nextInt();
System.out.println("What's your team project score?");
int team_project = scanner.nextInt();
System.out.println("What's your final exam score?");
int final_exam = scanner.nextInt();
double score = midterm*0.3 + assignment + team_project*0.3 + final_exam*0.3;
System.out.println("Your entire score is " + score);
if (score >=90) {
String grade = "A";
System.out.println("Your grade is " + grade);
}else if (score >=80){
String grade = "B";
System.out.println("Your grade is " + grade);
}else if (score >=70) {
String grade = "C";
System.out.println("Your grade is " + grade);
}else if (score >=60) {
String grade = "D";
System.out.println("Your grade is " + grade);
}else {
String grade = "F";
System.out.println("Your grade is " + grade);
}
scanner.close();
}
}
* 갑자기 생각나서 써봄
: printf()에서 여러 개의 형식과 여러 출력을 한꺼번에 지정할 때는 버전 오류가 난다!
Java se 11 이전 버전에서는 잘 작동하는지 궁금했지만 Oracle 회원가입을 해서 깔아야 한다니 참으로 귀찮은 일이 아닐 수 없다.
그래서 printf 함수는 사용을 안 하기로 했다. 어차피 백준에서는 Java se 11에 맞게 코드가 잘 작동된다고 한다.
3) 아쉽지만 printf 대신 println으로 로또번호 출력기를 만들어 봄
public static void main(String[] args) {
int num1 = (int) (Math.random()*45 +1);
int num2 = (int) (Math.random()*45 +1);
int num3 = (int) (Math.random()*45 +1);
int num4 = (int) (Math.random()*45 +1);
int num5 = (int) (Math.random()*45 +1);
int num6 = (int) (Math.random()*45 +1);
System.out.println(num1);
System.out.println(num2);
System.out.println(num3);
System.out.println(num4);
System.out.println(num5);
System.out.println(num6);
}
}
: Math.random() <- 대문자 필수!
얘는 double 타입의 0부터 1 사이에 있는 난수를 발생시키는데, *45를 하고 1을 더해준 다음 강제로 int 타입으로 변환시킨다. 그러면 1부터 45사이에 값을 갖는 로또 번호 랜덤 생성기가 된다.
4) 치밀하게 설계하면 주사위 게임도 가능한 듯.
public static void main(String[] args) {
int dice = (int)(Math.random()*6 +1);
if(dice == 1) {
System.out.println("1칸 전진하시오.");
}else if(dice == 2) {
System.out.println("무인도입니다. 한 턴 쉬어가세요.");
}else if(dice == 3) {
System.out.println("상대편의 말을 잡았습니다. 한번 더 굴리세요.");
}else if(dice == 4) {
System.out.println("통행료로 100,000원을 제출하세요.");
}else if(dice == 5) {
System.out.println("해당 영토의 건물을 살 수 있습니다. 구매하시겠습니까?");
}else{
System.out.println("결승점에 도착했습니다. 게임이 끝납니다.");
}
}
1-2. Switch문
똑같은 주사위 게임을 Switch문을 이용해서 만들 수 있다.
public static void main(String[] args) {
int dice = (int)(Math.random()*6 +1);
switch(dice) {
case 1:
System.out.println("1칸 전진하시오.");
break;
case 2:
System.out.println("무인도입니다. 한 턴 쉬어가세요.");
break;
case 3:
System.out.println("상대편의 말을 잡았습니다. 한 턴 더 굴리세요.");
break;
case 4:
System.out.println("통행료로 100,000원을 제출하세요.");
break;
case 5:
System.out.println("해당 영토의 건물을 살 수 있습니다. 구매하시겠습니까?");
break;
default:
System.out.println("결승점에 도착했습니다. 게임이 끝납니다.");
break;
}
}
오히려 Switch문은 숫자 형태의 값을 갖는 변수를 사용하므로, 코드가 더 간단하게 작성될 수 있다.
+ 복잡하게 실행하면 진짜 주사위 게임도 가능할 듯.
+ 미연시 게임?처럼 대답에 따라서 스토리가 달라지는 게임도 가능할 듯.
Switch문의 대상인 변수의 값에 따라 출력되는 결과를 다르게 하고 싶다면,
반드시 각 case마다 break; 문을 작성해야 한다!!
그렇지 않으면 이렇게 된다. ↓
public static void main(String[] args) {
int dice = 2;
switch(dice) {
case 1:
System.out.println("1칸 전진하시오.");
case 2:
System.out.println("무인도입니다. 한 턴 쉬어가세요.");
case 3:
System.out.println("상대편의 말을 잡았습니다. 한 턴 더 굴리세요.");
case 4:
System.out.println("통행료로 100,000원을 제출하세요.");
case 5:
System.out.println("해당 영토의 건물을 살 수 있습니다. 구매하시겠습니까?");
default:
System.out.println("결승점에 도착했습니다. 게임이 끝납니다.");
}
}
: switch문의 변수인 dice는 2이다. 그런데 switch문의 case 사이마다 변수가 없어서, 각 case가 구분되지 않고 위에서부터 아래로 차례대로 코드가 실행되어서 이처럼 여러 경우에 해당하는 결과들이 다 같이 나오고 있다.
1) switch문의 변수 : char 타입의 입력 받기
import java.util.Scanner;
Scanner scanner = new Scanner(System.in);
char alphabet = alphabet.next().charAt(0);
+ char타입은 nextInt 등의 기능이 없다. 그래서 next() 다음에 charAt()을 입력한다.
+ 그런데 charAt(0) 에서 0의 의미가 무엇인지는 잘 모르겠다.
import java.util.Scanner;
public class chapter_4 {
public static void main(String[] args) {
System.out.println("What's your code?");
Scanner scanner = new Scanner(System.in);
char alphabet = scanner.next().charAt(0);
switch(alphabet) {
case 'a':
System.out.println("1칸 전진하시오.");
break;
case 'b':
System.out.println("무인도입니다. 한 턴 쉬어가세요.");
break;
case 'c':
System.out.println("상대편의 말을 잡았습니다. 한 턴 더 굴리세요.");
break;
case 'd':
System.out.println("통행료로 100,000원을 제출하세요.");
break;
case 'e':
System.out.println("해당 영토의 건물을 살 수 있습니다. 구매하시겠습니까?");
break;
default:
System.out.println("결승점에 도착했습니다. 게임이 끝납니다.");
}
}
}
2) Switch문의 변수 : String 타입의 입력 받기
import java.util.Scanner;
Scanner scanner = new Scanner(System.in);
String str = scanner.nextLine();
+ 그런데 nextLine 코드를 사용할 때, 공백을 인식/인식하지 못해서 생기는 불편함에 대해서는 나중에 알아보자.
import java.util.Scanner;
public class chapter_4 {
public static void main(String[] args) {
System.out.println("What's your code?");
Scanner scanner = new Scanner(System.in);
String code = scanner.nextLine();
switch(code) {
case "Apple":
System.out.println("1칸 전진하시오.");
break;
case "Banana":
System.out.println("무인도입니다. 한 턴 쉬어가세요.");
break;
case "Carrot":
System.out.println("상대편의 말을 잡았습니다. 한 턴 더 굴리세요.");
break;
case "Daisy":
System.out.println("통행료로 100,000원을 제출하세요.");
break;
case "Egg":
System.out.println("해당 영토의 건물을 살 수 있습니다. 구매하시겠습니까?");
break;
default:
System.out.println("결승점에 도착했습니다. 게임이 끝납니다.");
}
}
}
공백을 잘 인식하는지를 보기 위해서, String 변수의 각 case값을 2어절 이상의 단어로 설정했다.
import java.util.Scanner;
public class chapter_4 {
public static void main(String[] args) {
System.out.println("What's your code?");
Scanner scanner = new Scanner(System.in);
String code = scanner.nextLine();
switch(code) {
case "Apple Juice":
System.out.println("1칸 전진하시오.");
break;
case "Banana Smoothie":
System.out.println("무인도입니다. 한 턴 쉬어가세요.");
break;
case "Carrot Cake":
System.out.println("상대편의 말을 잡았습니다. 한 턴 더 굴리세요.");
break;
case "Daisy Tea":
System.out.println("통행료로 100,000원을 제출하세요.");
break;
case "Egg Tart":
System.out.println("해당 영토의 건물을 살 수 있습니다. 구매하시겠습니까?");
break;
default:
System.out.println("결승점에 도착했습니다. 게임이 끝납니다.");
}
}
}
공백은 잘 인식하는 것 같다. 그리고 String 타입의 경우 정확한 string을 입력해야 한다! 대소문자도 구분한다!
ex) 'Egg Tart'를 대소문자 구분, 정확히 입력해야지만 해당 결과가 나온다
-> egg tart (X) , Egg Tart (O)
+ Scanner에는 여러 method가 있다.
ex) int 타입 변수 입력 시에는 nextInt 를 쓰는 것처럼!
=> String 타입 변수 입력시에는 .next 또는 .nextLine 를 사용하는데, 둘 사이에 차이가 있다.
1) scanner.next();
띄어쓰기 이후의 입력은 받아들이지 않는다.
각 입력의 구분 단위가 \n처럼 띄어쓰기인 것 같다.
import java.util.Scanner;
public class chapter_4 {
public static void main(String[] args) {
Scanner input = new Scanner(System.in);
String data = input.next();
System.out.println(data);
input.close();
}
}
중복을 제거하면서 코드를 효율적으로 수정할 수 있는 방법이 link 와 import 이다.
사용하는 방법
여러 개의 웹페이지의 디자인/스타일에서 겹치는 코드만 복사해서 새 페이지에 복사한다.
후에 이 디자인 서식을 사용한다면 이 새 페이지에서 끌어와서 사용할 것이다.
* 이때, 디자인서식이 들어있는 새 페이지의 확장자는 .css 이다!
/* 스타일 적용하는 파일 */
h1{
background-color : black ; color : limegreen ;
transition : all 1s ;
}
h1:hover{
background-color : white ; color : orangered ; text-align : right ;
}
1. 화면 크기를 위해서 mobile과 main frame의 width와 height을 대폭 늘려서 지정하였다.
2. 기존 양식은 날짜와 시간만 있고 '할 일' 영역은 없었는데, 여기에 '할 일' 영역을 추가하였다.
여기서 flex 형식이 많이 사용되어서 주의해야 했다. 가령 컨텐츠는 나라를 기준으로는 column으로 정렬되지만, 그 안에서의 날짜를 기준으로는 row로 정렬되고, 또 하루 날짜 안에서의 시간과 할 일은 column으로 정렬되지만, 그 안의 시간과 할 일은 row로 정렬되었다.
3. flex 형식을 지정할 때는 지정할 단위에서 '가장 바깥에 있는 element'에다 지정해야 하는데, 이를 찾는 것이 조금 까다로웠다.
=> CSS 구조가 복잡할 시 레이아웃 맵을 그려놓거나, 배경색으로 각 div 요소의 영역과 포함관계를 뚜렷이 구분하면서 작업하면 덜 헷갈릴 것이다.
아쉬웠던 점:
아직 JavaScript 등을 모르다 보니, 해당 글은 코드에 직접 작성한 것이다. 그래서 코드가 불필요하게 길어지고, 어디에 입력할지를 정확히 찾기 어려웠다. 스크립트 언어를 배워서 편하게 작성할 수 있다면 더 좋을 것 같다.
3. 혼합(blend)
: 이미지와 이미지를 혼합해서 새로운 이미지를 만들어내는 기법!
어떤 이미지를 혼합하느냐에 따라서, 두 가지 모드가 있다.
1. background-blend-mode : 배경 이미지끼리 혼합
여기서의 배경 이미지 두 개: background-color & background-image
위 이미지와 텍스트 컬러가 다르다. blend되지 않고 텍스트와 이미지가 개별적으로 존재하는 모습이다.
3) 방법을 알아냈다.
-> body 태그에 적용하면 되고 개별 class에 적용하면 안 되었던 이유는 포함관계 때문인 것 같다.
body태그가 class보다 큰/포괄적인 개념이므로, 포괄적인 body 태그에 이미지를 먼저 적용하고, 그 안의 div class에 텍스트를 적으면 가능했지만, level이 같고 동일한 class에 background-image와 텍스트 속성을 둘 다 적용해버리면 되지 않았던 것이다.
=> 바깥의 태그/element에 background-image 를 적용시키고, 더 안쪽의 element에 텍스트와 background 속성을 적용하면 문제없이 적용된다. 이렇게!
<style>
.blend1{
background-image : url('netflix.jpg') ; background-size : contain ;
}
.blend2{
font-size : 2rem ;
color : limegreen ;
font-weight : bold ;
mix-blend-mode : screen ;
}
</style>
</head>
<body>
<div class="blend1">
<div class="blend2">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, autem.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, officia tenetur alias corporis voluptatum molestias molestiae, autem fugiat asperiores architecto nobis! Vero perspiciatis quisquam atque, deleniti, nostrum obcaecati tenetur animi dolorem iusto officia, eos praesentium veniam, voluptatibus? Officiis, hic molestiae! Illo, nam, exercitationem. Numquam tempora tenetur odit ducimus alias, obcaecati voluptate soluta temporibus omnis quasi, nemo, reprehenderit minus at recusandae.</p>
</div>
</div>
</body>
</html>
4. 변형(transform)
element의 크기, 위치, 모양 등을 변경하는 속성!
여러 효과를 섞어서 사용할 수 있다.
transform : 효과이름 (세부사항)
rotate , scale , translate , transform , skew 등 여러 종류가 있다.
1) scale : element의 확대/축소
scale을 적용할 방향(x,y축)과, 숫자로 확대/축소 비율을 지정할 수 있다.
2) rotate : element의 회전
3) translate : element를 지정 방향으로 움직임
4) skew : element를 늘임/줄임으로 왜곡
5) origin : element의 origin(기준점)을 설정하고, 이를 기준으로 1)~4) 의 효과를 적용가능
6) matrix : element에 더 다양한 효과를 줄 수 있는 옵션이지만, matrix(행렬) 개념을 알고 있어야 함.
그런데 효과가 잘 적용되지 않는다.... 다른 문제가 있는 것 같은데 나중에 원인을 찾아봐야겠다.
+ transform 효과로 문 닫기 & matrix 속성으로 다양한 효과 적용해보기가 목표.
align-content : 본문 요소들이 많아서 multi columns/rows 상태일 때 적용된다.
align-items : 같은 row/column 안의 본문 요소들에게만 적용된다.
[2] 개별 element에 적용되는 속성
1) align-self
: align-items 의 개별 버전.
한 row/column의 item을 모두 한 방향으로 정렬했지만 일부 element만 다른 정렬 방식을 적용하고 싶을 때 사용.
align-items 에 쓰인 값들을 사용할 수 있다.
#ending{
display:flex ; align-self:flex-end ; color:forestgreen ;
}
<div id="ending">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus quasi impedit, rem consequuntur odio nulla recusandae officiis. Error voluptate aut maiores voluptates, iusto aspernatur, hic mollitia, dolorum, at sint repellendus!</div>
초록색 문단만 끝에서부터 시작함!
2) flex 축약형 버전
: border의 여러 속성들을 한 번에 나열하는 것처럼(ex. border: 1px solid gray), flex도 가능하다.
1. 형식
적용할 element{flex-shrinkflex-growflex-basis}
* flex-grow , flex-shrink 는 정수, flex-basis는 100%가 최대인 % 단위
ex) 검색엔진에서는 앞에 나오는 내용이 더 검색 순위에 중요하게 작용하는 경우가 많은데, 이를 대비해서 <main> 태그 안의 내용을 앞에다 입력하고 싶다. 그런데 디스플레이 상으로는 <nav>와 <aside> 사이에 보이게 하고 싶을 때.
* order 는 정수 단위로 가능. order 를 따로 제시하지 않는다면 가장 먼저 제시되는 element의 order는 0이다.
* order 값이 작을수록(음수도 가능) 먼저 배치된다.
<!DOCTYPE html>
<html>
<head>
<style>
.container{display:flex ; flex-direction:column ; text-align:center;}
.content{display:flex ; flex-direction:row}
nav{border-right : 5px solid gray ; padding:20px ; flex-basis:200px ;
order:0}
main{order:1}
header{ border-bottom : 5px solid gray ;}
aside{border-left : 5px solid gray ; padding:20px ; flex-basis:200px ;
order:2}
footer{border-top : 5px solid gray}
</style>
</head>
<body>
<div class="container">
<header><h1>KSY</h1></header>
<div class="content">
<main><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ab rerum delectus repellat nihil, facere quasi cupiditate natus, dolore itaque cumque magni assumenda molestiae perferendis excepturi soluta pariatur tenetur voluptatum fugiat porro fugit dolores, vel eveniet nobis! Hic eligendi temporibus, at aspernatur accusantium necessitatibus, corporis explicabo adipisci in tempora numquam consectetur beatae eos dolorem totam magnam voluptates cupiditate autem a nulla repudiandae enim. Obcaecati atque quae rerum dicta maxime adipisci accusamus, saepe pariatur, similique, nesciunt repellat! Perspiciatis dolor, quam sint eos optio fugiat tenetur modi magni cupiditate. Esse, repellendus, eaque impedit hic incidunt cum nisi omnis perferendis labore nostrum earum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fuga, magnam voluptatem possimus soluta qui aliquid recusandae sunt repudiandae, ipsa labore laboriosam dicta! Fugiat delectus quo aliquid distinctio at eligendi accusantium esse iure, quis qui inventore voluptates porro enim, saepe, eaque, praesentium! Ducimus recusandae ex aliquam quisquam numquam possimus fugit sit, nihil, culpa vitae optio laudantium voluptatem. Suscipit sint vitae architecto, amet eligendi, modi at vel, maxime veritatis sapiente sequi! Dolorem nesciunt ipsa tempore quibusdam similique dolorum odit voluptatem reiciendis porro! Iste voluptatibus iusto ab, architecto, ipsum totam. Sapiente aliquid odit eos hic, atque laboriosam nemo eius reprehenderit! Pariatur, assumenda.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aspernatur, incidunt iste, sapiente rerum eum fugiat maxime neque praesentium, adipisci non. Doloremque recusandae, numquam aperiam non soluta illum ab, a voluptate necessitatibus porro nobis voluptatibus animi molestias alias accusantium deserunt consequatur molestiae vitae? Quam maxime distinctio minima molestias sequi laborum itaque ipsa, dolores facilis iure sed hic impedit perspiciatis, quos. Hic reiciendis eligendi cumque sunt dolorem harum, quo? Nostrum impedit dolorem et cupiditate ratione quaerat corporis ad tempora cum facere! Optio, magni iure natus consectetur est facilis maxime atque, ratione nisi qui vero voluptatem reprehenderit voluptas, minus provident omnis accusamus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, natus tenetur voluptas minus tempore cupiditate. Totam architecto quaerat veniam consequuntur, praesentium assumenda, doloribus reiciendis qui ducimus, incidunt deleniti. Consectetur, molestias, dolorem! Enim obcaecati, necessitatibus ducimus quae a, praesentium harum nisi repellendus atque, doloremque quod ut ipsum, fugiat sit! Animi quos ratione id consequuntur ipsam unde et accusamus reprehenderit voluptatem velit, modi mollitia quasi ex, eum esse temporibus, cupiditate, quaerat rem facere eligendi pariatur iusto. Fugit error sed accusantium possimus totam id voluptate in cumque, quibusdam quidem? Laborum, consectetur nulla dolorum porro eos sed ab, sit illo molestias eaque alias distinctio!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur officiis nostrum nobis excepturi quibusdam itaque. Mollitia consectetur error suscipit ipsam obcaecati consequatur, dignissimos autem! Adipisci itaque harum dignissimos numquam corporis quod tenetur omnis aliquid reprehenderit perferendis iure ut temporibus eveniet perspiciatis beatae, iste quia eum distinctio doloremque voluptatem fuga ipsum dolores ab. Temporibus at, nostrum ipsa libero, adipisci rem nam in quod unde beatae explicabo neque quisquam dicta enim a cumque optio est eos voluptate molestiae? Quo quaerat, impedit, quia asperiores molestiae, aspernatur delectus recusandae dolorem adipisci iste natus nisi illum alias nobis accusantium voluptate animi excepturi officiis error in.</p>
</main>
<nav><ol><li>HTML</li><li>CSS</li> <li>JavaScript</li></ol></nav>
<aside><ul><li>A</li><li>B</li><li>C</li> <li>D</li></ul></aside></div>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut.</footer> </div>
</body>
</html>
body에서는 <nav> 태그보다 <main>태그의 내용이 앞에 제시되었지만, order 속성을 통해서 화면에는 nav 태그가 더 왼쪽에(먼저) 배치되었다.
여러 개의 media 조건이 있고, 그 조건의 범위가 중첩될 경우, CSS에서는 우선순위에 따라 처리한다.
CSS는 구체적이고 세부적인 조건일수록 높은 우선순위를 가지고,
또한 복잡성/세부적인 정도가 같다면(같은 level이라면) 아래에, 나중에 작성된 조건이 우선순위가 높다!
그래서 이 경우, 의도는 ~600 : red , 601~1200 : green 이었지만, 막상 결과는 ~1200 : green 으로 적용된다.
=> 더 우선순위를 높이고 싶은 조건이 있다면, 그 조건을 동일 level에서 가장 아래에 배치해야 한다!
3) media query 응용
: flex와 media query를 적용해서, 모바일 환경에서의 디스플레이를 따로 지정해 보기.
나의 경우, 너비 600px을 기준으로 media query를 적용하였다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>EXAMPLE</title>
<style>
.container{
display:flex ; flex-direction:column ; text-align:center;
}
.content{
display:flex ; flex-direction:row
}
nav{
border-right : 5px solid gray ; padding:20px ; flex-basis:200px ;
background-color : darkorange
}
header{
border-bottom : 5px solid gray ; background-color:lime
}
aside{
border-left : 5px solid gray ; padding:20px ; flex-basis:200px ;
background-color : deeppink
}
footer{
border-top : 5px solid gray
}
main{
background-color : lightskyblue
}
@media (max-width:600px) {
.container{
display:flex ; flex-direction:column ; text-align:center;
background-color : black
}
.content{
display:flex ; flex-direction:column
}
nav{
border-bottom : 5px solid gray ; padding:20px ; flex-basis:50px ;
border-right : 0px ; color : darkorange ; background-color : black
}
header{
border-bottom : 5px solid gray ; color:lime ; background-color : black
}
main{
border-bottom : 5px solid gray ; color:lightskyblue ; background-color : black
}
aside{
border-left : 0px ; flex-basis : 40px ; color : deeppink ; background-color : black
}
footer{color : white ; background-color : black}
}
</style>
</head>
<body>
<div class="container">
<header><h1>KSY</h1></header>
<div class="content">
<nav><ol><li>HTML</li>
<li>CSS</li>
<li>JavaScript</li></ol></nav>
<main><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ab rerum delectus repellat nihil, facere quasi cupiditate natus, dolore itaque cumque magni assumenda molestiae perferendis excepturi soluta pariatur tenetur voluptatum fugiat porro fugit dolores, vel eveniet nobis! Hic eligendi temporibus, at aspernatur accusantium necessitatibus, corporis explicabo adipisci in tempora numquam consectetur beatae eos dolorem totam magnam voluptates cupiditate autem a nulla repudiandae enim. Obcaecati atque quae rerum dicta maxime adipisci accusamus, saepe pariatur, similique, nesciunt repellat! Perspiciatis dolor, quam sint eos optio fugiat tenetur modi magni cupiditate. Esse, repellendus, eaque impedit hic incidunt cum nisi omnis perferendis labore nostrum earum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fuga, magnam voluptatem possimus soluta qui aliquid recusandae sunt repudiandae, ipsa labore laboriosam dicta! Fugiat delectus quo aliquid distinctio at eligendi accusantium esse iure, quis qui inventore voluptates porro enim, saepe, eaque, praesentium! Ducimus recusandae ex aliquam quisquam numquam possimus fugit sit, nihil, culpa vitae optio laudantium voluptatem. Suscipit sint vitae architecto, amet eligendi, modi at vel, maxime veritatis sapiente sequi! Dolorem nesciunt ipsa tempore quibusdam similique dolorum odit voluptatem reiciendis porro! Iste voluptatibus iusto ab, architecto, ipsum totam. Sapiente aliquid odit eos hic, atque laboriosam nemo eius reprehenderit! Pariatur, assumenda.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aspernatur, incidunt iste, sapiente rerum eum fugiat maxime neque praesentium, adipisci non. Doloremque recusandae, numquam aperiam non soluta illum ab, a voluptate necessitatibus porro nobis voluptatibus animi molestias alias accusantium deserunt consequatur molestiae vitae? Quam maxime distinctio minima molestias sequi laborum itaque ipsa, dolores facilis iure sed hic impedit perspiciatis, quos. Hic reiciendis eligendi cumque sunt dolorem harum, quo? Nostrum impedit dolorem et cupiditate ratione quaerat corporis ad tempora cum facere! Optio, magni iure natus consectetur est facilis maxime atque, ratione nisi qui vero voluptatem reprehenderit voluptas, minus provident omnis accusamus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, natus tenetur voluptas minus tempore cupiditate. Totam architecto quaerat veniam consequuntur, praesentium assumenda, doloribus reiciendis qui ducimus, incidunt deleniti. Consectetur, molestias, dolorem! Enim obcaecati, necessitatibus ducimus quae a, praesentium harum nisi repellendus atque, doloremque quod ut ipsum, fugiat sit! Animi quos ratione id consequuntur ipsam unde et accusamus reprehenderit voluptatem velit, modi mollitia quasi ex, eum esse temporibus, cupiditate, quaerat rem facere eligendi pariatur iusto. Fugit error sed accusantium possimus totam id voluptate in cumque, quibusdam quidem? Laborum, consectetur nulla dolorum porro eos sed ab, sit illo molestias eaque alias distinctio!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur officiis nostrum nobis excepturi quibusdam itaque. Mollitia consectetur error suscipit ipsam obcaecati consequatur, dignissimos autem! Adipisci itaque harum dignissimos numquam corporis quod tenetur omnis aliquid reprehenderit perferendis iure ut temporibus eveniet perspiciatis beatae, iste quia eum distinctio doloremque voluptatem fuga ipsum dolores ab. Temporibus at, nostrum ipsa libero, adipisci rem nam in quod unde beatae explicabo neque quisquam dicta enim a cumque optio est eos voluptate molestiae? Quo quaerat, impedit, quia asperiores molestiae, aspernatur delectus recusandae dolorem adipisci iste natus nisi illum alias nobis accusantium voluptate animi excepturi officiis error in.</p>
</main>
<aside><ul><li>A</li>
<li>B</li>
<li>C</li>
<li>D</li></ul></aside>
</div>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut.</footer>
</div>
</body>
</html>
1. 좁은 화면(600px 미만)
2. 넓은 화면
너비가 좁을 경우는 display : flex ; flex-direction : column 으로 지정함으로써 모든 컨텐츠를 수직으로 배열하였다.
3. multi column
: 신문처럼 여러 개의 단(column)으로 구성된 배치를 하고 싶을 때 사용하는 방법/레이아웃.
: box model 을 사용할 때 지정하는 속성 중 하나로, 기존 box model 사용 시의 불편함을 없애려고 만들었다.
기존의 문제점
holy grail layout 등을 만들면서 box model을 사용하여 padding, border, width 등을 지정할 때, html 태그의 width가 여러 float 속성을 적용한 요소들의 width의 합과 맞아떨어져야 보기좋은 레이아웃이 만들어지는데, 이때 각 요소들의 border과 margin 값을 고려하여(추가로 더해서) width 값을 예상해야 하는 불편함이 있었다.
ex) element1의 width는 300, border는 10, element2의 width는 400, border는 15, margin은 20일 경우
: 세로로 배치될 header, segment(메인 컨텐츠), footer 부분은 flex-direction : column으로 설정,
segment(메인 컨텐츠) 안에서 가로로 배치될 nav, main, aside 부분은 flex-direction : row 로 설정.
2) flex-shrink (* 그 전에 flex-basis 값을 지정해야 함)
: 창 크기가 부족할 때, 메인 컨텐츠는 계속 나타나게 하고 싶다면
=> nav와 aside만 flex-shrink : 1 로 설정.
<html>
<head>
<meta charset="utf-8">
<style>
.container{
display:flex ;
flex-direction:column ;
text-align:center ;
}
.content{
display:flex ;
}
header{border-bottom: 1px solid black ; padding-left:20px}
footer{border-top : 1px solid black ; padding:20px}
.content nav{border-right : 1px solid black}
.content aside{border-left : 1px solid black}
nav,aside{flex-basis : 400px ; flex-shrink:1}
</style>
</head>
<body>
<div class="container">
<header>
<h1>WELCOME</h1>
</header>
<div class="content"><nav><ul>
<li>Corporis</li> <li>fugit</li> <li>maxime</li> <li>ut</li> <li>veniam</li> <li>quo</li> <li>dolorum</li> <li>repellendus</li> <li>ab</li> <li>soluta</li> <li>voluptates</li> <li>velit</li></ul>
</nav>
<segment>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id cum autem pariatur debitis quae delectus eum temporibus animi quis ad, rerum doloremque non distinctio, minus enim, nihil. Dolores officiis, iusto commodi. Harum, accusamus quas pariatur autem odio sequi tempore obcaecati ab commodi, optio assumenda, unde et tenetur quisquam beatae doloribus. Porro hic odio molestias doloremque, vitae laborum voluptatibus quam deleniti placeat. Explicabo consequatur sit nemo animi reiciendis amet ratione quod possimus fuga eos ab, minima aspernatur voluptatum iure aperiam, dolorum, porro totam saepe. </p><p>Aut beatae, deleniti fugit commodi quis distinctio doloribus culpa est recusandae, illum magni itaque magnam a corrupti nam id, dolorum sapiente iste quidem non, velit error reiciendis. Laborum sint veniam sunt in impedit temporibus architecto deleniti dicta tempore, repudiandae dolor facilis aliquid ea distinctio. Assumenda magnam ratione laudantium eligendi molestias quo, natus voluptatum quos ullam rerum unde vel debitis consequuntur porro, ipsam repellat aliquid saepe maxime impedit asperiores fugiat cupiditate dolores beatae. Sequi quas a culpa magnam voluptates quibusdam, consequatur odit inventore fuga suscipit molestiae sed rem quaerat voluptatem velit, mollitia nemo, animi adipisci.</p> <p>Sapiente dignissimos enim reiciendis, iure? Doloribus nostrum officiis placeat temporibus mollitia assumenda quis tempore accusantium eius vitae laboriosam saepe deserunt nihil accusamus impedit, omnis nobis ab cupiditate iste repellendus facilis inventore! In quisquam maxime molestias itaque nam nobis eligendi, rem ullam autem alias quos deleniti, culpa quas dolores illum animi labore repellendus ab! </p>
</segment>
<aside>
Nisi mollitia praesentium id cumque est repellat hic, animi, qui natus assumenda nihil repudiandae asperiores neque laudantium soluta.
</aside></div>
<footer>
GOODBYE
</footer>
</div>
</body>
</html>
따로 width, border 등을 계산하지 않고도 선과 배치가 맞아떨어지는 layout을 구현할 수 있다.
<html>
<head>
<meta charset="utf-8">
<style>
#aa{display:block ; border : 10px solid forestgreen ;}
#bb{display:block ; border : 20px solid gold ;}
</style>
</head>
<body>
<h1>Hello User</h1>
Welcome to <a href="https://google.com" target="_blank">Search</a> Engine!
<p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p>
<p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>
2) margin : 주로 화면의 양 끝과 block element의 사이 간격을 의미
<html>
<head>
<meta charset="utf-8">
<style>
#aa{display:block ; border : 10px solid forestgreen ;
margin : 50px}
#bb{display:block ; border : 10px solid gold ;
margin : 100px}
</style>
</head>
<body>
<h1>Hello User</h1>
Welcome to <a href="https://google.com" target="_blank">Search</a> Engine!
<p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p>
<p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>
3) padding : border 테두리와 그 안의 텍스트의 간격을 의미
<html>
<head>
<meta charset="utf-8">
<style>
#aa{display:block ; border : 10px solid forestgreen ;
padding : 50px}
#bb{display:block ; border : 10px solid gold ;
padding : 100px}
</style>
</head>
<body>
<h1>Hello User</h1>
Welcome to <a href="https://google.com" target="_blank">Search</a> Engine!
<p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p>
<p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>
4) width : 테두리 상자(border)의 가로폭.
<html>
<head>
<meta charset="utf-8">
<style>
#aa{display:block ; border : 10px solid forestgreen ;
width : 500px}
#bb{display:block ; border : 10px solid gold ;
width : 1000px}
</style>
</head>
<body>
<h1>Hello User</h1>
Welcome to <a href="https://google.com" target="_blank">Search</a> Engine!
<p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p>
<p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>
5) height : 테두리 상자(border)의 세로폭. height를 고정했는데 텍스트의 양이 많으면 삐져나올 수 있다.
<html>
<head>
<meta charset="utf-8">
<style>
#aa{display:block ; border : 10px solid forestgreen ;
height : 50px}
#bb{display:block ; border : 10px solid gold ;
height : 100px}
</style>
</head>
<body>
<h1>Hello User</h1>
Welcome to <a href="https://google.com" target="_blank">Search</a> Engine!
<p id="aa">Υπάρχουν πολλές εκδοχές των αποσπασμάτων του Lorem Ipsum διαθέσιμες, αλλά η πλειοψηφία τους έχει δεχθεί κάποιας μορφής αλλοιώσεις, με ενσωματωμένους αστεεισμούς, ή τυχαίες λέξεις που <a href="https://google.co.kr">δεν</a> γίνονται καν πιστευτές.</p>
<p id="bb">Εάν πρόκειται να χρησιμοποιήσετε ένα κομμάτι του Lorem Ipsum, πρέπει να είστε βέβαιοι πως δεν βρίσκεται κάτι προσβλητικό κρυμμένο μέσα στο κείμενο. Όλες οι γεννήτριες Lorem Ipsum στο διαδίκτυο τείνουν να επαναλαμβάνουν <a href="https://google.co.kr">προκαθορισμένα</a> κομμάτια του Lorem Ipsum κατά απαίτηση, καθιστώνας την παρούσα γεννήτρια την πρώτη πραγματική γεννήτρια στο διαδίκτυο.</p>
</body>
</html>
2. inline display 와 border display에 따라서 적용되는 방식이 다르다
1) inline display의 경우, 4), 5)번인 width 와 height 속성이 적용되지 않는다.
2) margin의 기준이 '화면의 양 끝과 element의 사이' 가 아니라 '양 element의 간격'이다.
: 이번엔 기준값이 화면 좌상단이 아니라, #parent 가 적용된 Blended 부모 태그로 바뀌었다.
그런데 아까는 각 태그 요소들이 화면 폭을 다 채운 데에 비해, 지금은 position:absolute 인 Blended 요소를 포함한 하위 요소들은 화면 폭을 다 채우지 못한다.
#parent{position:relative}
parent id의 속성을 relative로 바꾸면, Zavachip의 위치는 그대로이나 나머지 요소들은 다시 화면 폭을 그대로 채운다.
=> position:relative 와 position:absolute 의 차이는 단순히 자식 태그의 위치 기준이 바로 위의 부모 태그인지, position:static 이 아니면서 그나마 가장 가까운 부모 태그인지 만의 차이가 아닌 것이다. 화면상의 정렬에도 둘의 차이가 있다!
<-> clear 속성은 다른 태그('그 element를 피하는 대상') 에 적용한다. (ex. p 태그)
주로 <style> 태그 안 img 태그에는 float 속성을 일반적으로 적용하고, float 속성을 적용하고 싶지 않은 일부 단락에 clear 속성을 적용하는 것으로 보인다.
clear에는 3가지 값을 지정할 수 있다 : left , right , both
left : float의 값이 left인 경우에만 float 속성을 무력화
right : float의 값이 right인 경우에만 float 속성을 무력화
both : float의 값에 상관없이 float 속성을 무력화 -> 셋 중에 가장 많이 쓰임
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<style>
img{width:200px ; float:right ; margin:15px}
</style>
</head>
<body>
<img src="C:\Users\USER\Desktop\WEB\image\start.jpg" alt="Start Now!" target="_blank">
<!-- float만 설정, clear 는 설정 안 함-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa, necessitatibus cum repudiandae, sit architecto voluptatum! Neque nulla possimus ex perspiciatis sunt, commodi, debitis saepe error nam reiciendis ut! Commodi nisi voluptatum tempora in perspiciatis, eum deserunt ratione? Doloremque autem aliquam eligendi deserunt iusto minima provident enim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa, necessitatibus cum repudiandae, sit architecto voluptatum! Neque nulla possimus ex perspiciatis sunt, commodi, debitis saepe error nam reiciendis ut! Commodi nisi voluptatum tempora in perspiciatis, eum deserunt ratione? Doloremque autem aliquam eligendi deserunt iusto minima provident enim.</p>
<img src="C:\Users\USER\Desktop\WEB\image\start.jpg" alt="Start Now!" target="_blank">
<!-- float와 clear 모두 설정되어서 float 설정이 무력화됨-->
<p style="clear:both">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa, necessitatibus cum repudiandae, sit architecto voluptatum! Neque nulla possimus ex perspiciatis sunt, commodi, debitis saepe error nam reiciendis ut! Commodi nisi voluptatum tempora in perspiciatis, eum deserunt ratione? Doloremque autem aliquam eligendi deserunt iusto minima provident enim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae culpa, necessitatibus cum repudiandae, sit architecto voluptatum! Neque nulla possimus ex perspiciatis sunt, commodi, debitis saepe error nam reiciendis ut! Commodi nisi voluptatum tempora in perspiciatis, eum deserunt ratione? Doloremque autem aliquam eligendi deserunt iusto minima provident enim.</p>
</body>
</html>
위 이미지는 float 설정이 적용되어서 텍스트와 같이 나타나고, 아래 이미지는 float 속성이 적용되었지만 clear 속성으로 무력화되어서 기존의 html처럼 같은 줄에 텍스트와 이미지가 나타나지 않고 있다.
2. holy grail layout
: '최적의 구현' 이라는 의미로, 웹사이트를 가장 잘 나타내는 구현 방식을 찾는 것은 매우 어렵다는 뜻에서 나온 말인 듯
보통 웹사이트는 이런 식의 구현을 많이 사용하는데, 이는 기존의 HTML 태그만을 사용해서는 불가능했고, CSS에 와서야 float, clear 등의 속성을 이용하면서 가능해졌다.
* 창의 사이즈에 따라서 레이아웃의 크기가 자동 조절되는 것도 바람직하지만, 아직은 구현할 수 없다.
* 이때 border의 두께 값이 전체 테두리에 포함되지 않는다. 이를 고려해야 한다.
(페이지 우클릭 -> 검사 에서 각 영역의 width, border width를 확인할 수 있지만 너무 번거롭다.
=> box-sizing 방법은 border width를 각 영역의 width를 더할 때 같이 포함시키는 방법을 알려준다.)
ex) 한 영역의 너비가 300px, border가 50px이면 총 너비는 350px이므로 주의해야 한다.
* flex : 창의 넓이 등 다양한 변화 상황에서 레이아웃을 좀 더 쉽게 짤 수 있도록 도와준다. [심화과정]
* margin:auto 로 설정하면 해당 element를 가운데 정렬시키는 것과 같은 효과를 낼 수 있다!
<실습>
<html>
<head>
<meta charset="utf-8">
<title>Holy Grail Layout</title>
<style>
h1{text-align:center ; background-color:black ; color:white}
.fix{width:700px ; border:1px solid black ; margin:auto}
header{border-bottom:1px solid black ; text-align:center}
nav{float:left ; border-right:1px solid black ; margin-right:0px ; width:150px ; padding:10px}
article{float:left ; border-left:1px solid black ; border-right:1px solid black ; width:350px ; margin-left:-1px ; margin-right: 0px ; padding:20px }
aside{float:left ; border-left:1px solid black ; width:100px ; padding:10px ; margin-left:0px}
footer{clear:both ; border-top:1px solid black ; padding:20px ; text-align:center}
</style>
</head>
<body>
<div class="fix">
<header><h1>Italian Food</h1><p>Qui eos a aut cum obcaecati sint sit, laborum. Autem, in neque.</p></header>
<nav><ul>
<li>Pasta</li>
<li>Pizza</li>
<li>Risotto</li>
<li>Salad</li>
<li>Steak</li>
</ul></nav>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid numquam iusto fugit quia ea ipsum sint earum alias tempore quibusdam, voluptatibus suscipit nisi, saepe et adipisci amet. Deleniti vitae nisi, ullam quod voluptatum doloremque facilis corrupti omnis, consequuntur blanditiis cupiditate itaque voluptatem minima odit quo soluta id sapiente! Voluptate dolore fuga autem sit omnis, consequatur quia pariatur qui non tenetur eum expedita provident a nisi repellat iste, sequi accusamus maiores molestias et labore ratione illo, minus perspiciatis. Architecto nemo itaque facilis nam excepturi reiciendis nostrum ducimus sunt rerum. Doloremque quidem veniam rem delectus, facere aliquam nam nemo quisquam? Laborum eos qui voluptatem, culpa amet officia in dicta, quibusdam numquam modi at repellendus fugiat est consequuntur porro illum dignissimos maiores deleniti? Deserunt assumenda dolorem provident fugiat, natus, modi facere itaque amet ipsum, omnis dolore, animi quis sed atque consectetur magni.</p><p> Accusantium ab numquam adipisci doloremque necessitatibus fugit minima, illum totam odit veniam ducimus voluptatem sunt tempora, culpa voluptates commodi vitae consequuntur ipsum dicta! Pariatur, voluptates, velit. Deserunt tenetur eum autem suscipit harum sequi reprehenderit totam officiis, quis corporis nam, exercitationem ut fugiat aperiam consequatur dicta eaque omnis qui quas, aut porro dolores a. Quos necessitatibus eius illum nesciunt et, fugit itaque est provident sunt eligendi non animi corporis officiis atque modi dolores nulla nemo, numquam excepturi, consectetur.</p><p> Asperiores, nihil excepturi. Nesciunt tenetur eaque voluptatem deleniti aperiam quisquam accusantium, maxime placeat voluptates velit expedita, cumque, obcaecati, quae repellendus. Et nulla, in cum nisi itaque ea, doloremque magnam deleniti dolore doloribus asperiores nobis ipsa aliquam corporis vero, rerum, hic accusamus.</p><p> Laborum provident cupiditate harum perferendis voluptate fuga laudantium animi et tenetur veniam, vitae maxime distinctio doloribus quisquam delectus unde tempora, sunt nam recusandae a saepe inventore. Minima, saepe. Culpa repellat qui totam similique earum aspernatur molestiae debitis atque aperiam vitae in excepturi expedita veniam adipisci, velit voluptatibus exercitationem asperiores nostrum quod distinctio. Alias, consectetur sed optio voluptatum recusandae, aliquid repellat deserunt consequuntur delectus vero, exercitationem facere quidem. Perspiciatis reprehenderit omnis sit ducimus voluptates, quasi recusandae a, eligendi, maiores labore ipsam natus laborum vero at dicta. Ipsa velit dolor quis asperiores illum obcaecati repudiandae dicta magni, adipisci fugit voluptate eaque, quos, assumenda aut. Nisi quas velit nihil voluptate culpa qui architecto, voluptatibus, esse minima corporis dicta pariatur eius. Amet corporis necessitatibus quia, inventore neque!</p><p> Voluptatem rem id architecto sed animi libero asperiores officia reprehenderit! Quae accusamus illo beatae et dignissimos dolore sed optio eligendi amet. Aliquam architecto ipsam facilis, exercitationem laboriosam dolor mollitia suscipit. Fugit quo, eum possimus. Corporis officiis, rerum facere sequi dolore sed iste, mollitia praesentium repellendus ratione est tenetur. Molestiae iure beatae, delectus quasi, ipsum at! Quasi eius minus ex, minima rem voluptates velit, non deleniti voluptas error, modi possimus qui iusto numquam vero, sed maiores! Nostrum, illo magnam iusto architecto id esse voluptatum repellat! Impedit fugiat quidem esse itaque. Hic inventore voluptatem id dolorem esse, voluptas perferendis, facilis autem voluptates nesciunt commodi ab dignissimos accusantium qui ex sequi tempora numquam, consequatur et nulla itaque non neque eius deserunt? Eveniet, necessitatibus.</p></article>
<aside> Nisi perferendis pariatur provident, blanditiis aliquam aspernatur expedita earum sit eos rerum voluptates vero, soluta laborum necessitatibus beatae non sequi nobis recusandae.</aside>
<footer>Molestias nisi vitae officia id, explicabo praesentium!</footer>
</div>
</body>
</html>
