ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 2023년 05월10일 수업 내용 정리(flex and java)
      국비 교육 내용 정리 2023. 5. 10. 09:02

      Start!

       

      (1)

      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
              section{
                  border: 5px solid #000;
                  width: 600px;
                  /* height: 100px; */
                  overflow: hidden; /*높이를 찾아줌!*/
              }
              section article{
                  width: 200px;
                  height: 100px;
                  background-color: gold;
                  border: 1px solid red;
                  float: left;
                  box-sizing: border-box;
              }
          </style>
      </head>
      <body>
          <section>
              <article>article</article>
          <article>article</article>
          <article>article</article>
          </section>
      </body>
      </html>

      (2)

      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
              section{
                  border: 5px solid #000;
                  text-align: center;
              }
              section article{
                  width: 200px;
                  height: 100px;
                  background-color: gold;
                  border: 1px solid red;
                  /* margin: auto; */
                  display: inline-block;  
                 
              }
          </style>
      </head>
      <body>
          <section>
              <article>article</article>
              <article>article</article>
              <article>article</article>
          </section>
      </body>
      </html>

      (3) layout

      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
              .parent{
                  width: 100%;
                  border: 5px solid red;
                  height: 100vh;
              }
              .top{
                  background: purple;
                  height: 20%;
              }
              .left{
                  background: skyblue;
                  width: 40%;
                  height: 60%;
                  float:left;
              }
              .right{
                  background-color: orange;
                  width: 60%;
                  height: 60%;
                  float: right;
              }
              .clear{
                  background-color: purple;
                  height: 20%;
                  clear: both;
              }
          </style>
      </head>
      <body>
          <div class="parent">
           <div class="top">float: none</div>
           <div class="right">float: right</div>
           <div class="left">float: left</div>
           <div class="clear">clear : both</div>
         </div>
      </body>
      </html>

      (4)

      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <title>Flex으로 수평/수직중앙 정렬하기</title>
           <style>
              body{
                  display: flex;
                  justify-content: center;
                  align-items: center;   /*높이가 없어서 적용 안된거임 ㅋㅋ.*/
                  height: 100vh;
              }
             
              .box{
                  width: 200px;
                  height: 200px;
                  background-color: yellowgreen;
                  text-align: center;
                  line-height: 200px;
                  font-size: 2em;
                  color: #fff;
                 
              }
           </style>
      </head>
      <body>
          <div class="box">자식 요소</div>
      </body>
      </html>

      (5) flex!

      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
              .parent{
                  border: 5px solid #000;
                  /* overflow: hidden; 부모에 높이가 없으니 적용시킴 */
                 display: flex;
                 justify-content: center;
                 
              }
         
              .child{
                  background-color:yellowgreen;
                  width: 200px;
                  height: 200px;
                  margin: 5px;
                  color: white;
                  text-align: center;
                  line-height: 200px;
                  /* float: left; */
              }
          </style>
      </head>
      <body>
          <div class="parent">
              <div class="child">자식요소</div>
              <div class="child">자식요소</div>
              <div class="child">자식요소</div>
          </div>
      </body>
      </html>

      (6)

      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
              .parent{
                  border: 5px solid #000;
                  /* overflow: hidden; */
                  display: flex;
                  justify-content: flex-end;
              }
              .child{
                  background-color: crimson;
                  width: 200px;
                  height: 200px;
                  color: white;
                  text-align: center;
                  line-height: 200px; /*줄높이 설정*/
                   /* margin:0 auto; */
                   /* float: left; */
                   /* float:right; */
              }
          </style>
      </head>
      <body>
       <div class="parent">
          <div class="child">자식요소</div>
       </div>




      </body>
      </html>

      (7)

      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
              .parent{
                  border: 5px solid #000;
                  width: 800px;
                  display: flex;
              }

              .child{
                  margin: 5px;
                  color: white;
                  text-align: center;
                  line-height: 100px;  /*line 이랑 height가 px값이 같아야 텍스트 중앙으로 정렬됨*/
                  height: 100px;
                  /* width: 33.3333333px; */
                  /* width: calc(800px/3); */
                  flex:1; /*같은크기로 정렬 가능*/
               
              }
              .child:nth-child(1){background-color:crimson;}
              .child:nth-child(2){
                  background-color:royalblue;
                  flex:2;
                  }
              .child:nth-child(3){background-color:greenyellow;
                  flex:4;
                  }

          </style>
      </head>
      <body>
          <div class="parent">
              <div class="child">자식요쇼</div>
              <div class="child">자식요쇼</div>
              <div class="child">자식요쇼</div>
          </div>

      </body>
      </html>

      (8) 미디어 쿼리! 

      미디어쿼리 

      @media (min-width: 1024px) {
         /* PC CSS*/
      }


      @media (min-width: 768px) and (max-width: 1024px) {}
         /*Tablet CSS*/

      @media (max-width: 787px) {}
         /*Mobile CSS*/

       

      (9)

      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
              .parent{
                  border: 5px solid #000;
                  display: flex;
              }
             
              .child{
                  height: 100px;
                  flex:1;
              }
              .child:nth-child(1){
                  background-color: crimson;
               
              }
              .child:nth-child(2){
                  background-color: royalblue;
                 
              }
              .child:nth-child(3){
                  background-color: yellowgreen;
               
              }
              .child:nth-child(4){
                  background-color: gray;}
                 
              @media (max-width:767px){
                  .parent{
                      flex-direction: column;
                  }
              .child:nth-child(1){order:3;}
              .child:nth-child(2){order:3;}
              .child:nth-child(3){order:3;}
              }
             
                 
          </style>
      </head>
      <body>
          <div class="parent">
              <div class="child">child1</div>
              <div class="child">child2</div>
              <div class="child">child3</div>
          </div>

         
      </body>
      </html>

      (9)

       

      <JAVA>

       

      (1) 비교연산자 

      package ch02.ex02;

      public class C01Rational {

      public static void main(String[] args) {
              // 비교/관계 연산자
      // 같다== , 다르다 !=, 
      // 크다/작다<>
              // 크거나/작거나 같다 >= <= 
      int a = 10; 
      int b = 5; 

      System.out.println( a == b);   //false
      System.out.println( a != b);   //true
      System.out.println( a > b);    //true
      System.out.println( a <= b);   //false

      }

      }

      (2) 출력 구조

      package ch02.ex03;

       

      public class C01Ternary {

       

      public static void main(String[] args) {

       

      int score = 0;

      String result = ""; // 초기화

       

      result = "hello"; // 재할당

       

      System.out.println(result);

      }

       

      }

      (3)  기본 연산 구조 

      package ch02.ex03;

       

      public class C01Ternary {

       

      public static void main(String[] args) {

       

      int score = 0;

      String result = ""; // 초기화

       

      result = (score >= 60) ? "합격" : "과락";

       

      System.out.println(result);

       

       

      }

       

      }

      (4)

      package ch03.ex01;

       

      public class C01if {

      public static void main(String[] args) {

       

      int num1 = 10; //int는 정수를 표현함!

      int num2 = 100;

       

      if(num1 < num2) { //조건식이 참일 때 블록 안의 실행문 실행

      System.out.println("참입니다.");

      }

       

      }

       

      }

      (5)  if/else 문

      package ch03.ex01;

       

      public class Ch02IfElse {

       

      public static void main(String[] args) {

       

      int visitCnt = 10;

       

      if(visitCnt < 1) { // 참 일때 실행

      System.out.println("첫방문");

      }else { // 거짓 일때 실행

      System.out.println("재방문");

      }

       

      }

       

      }

      (6) 배열  Java vs JavaScript는 다르다. java는 엄격 하지만 javaScript는 자유로운 편!

      package ch04;

       

      public class C01Array {

       

      public static void main(String[] args) {

      // 배열

      // 하나의(동일한) 데이터 타입으로 여러 개의 값을 저장하는 변수(저장공간)

      // 동일한 자료형의 여러 개의 값을 연이어 저장 할수 있는 공간의 집합체(화물열차)

      int num;

      num = 100;

       

      int a = 10;

      int b = 20;

      int c = 30;

      System.out.println(a);

      System.out.println(b);

      System.out.println(c);

       

      int[] d = new int[3]; // 방 3칸짜리 집/열차 [0][1][2]

      d[0] = 10;

      d[1] = 20;

      d[2] = 30; //[10,20,30]

       

      System.out.println(d[0]);

      System.out.println(d[1]);

      System.out.println(d[2]);

       

      }

       

      }

      (7) + 배열

      package ch04;

       

      public class C02Array {

       

      public static void main(String[] args) {

      // 배열 선언 방법

      int[] a;

      a = new int[3];

       

      int[] b = new int[3];

       

      int[] c = {10,20,30};

       

      String[] s = {"","aleyna","Arnie"];

       

      Boolean[] b2 = {true,false,true,false};

      }

       

      }

       

      }

       

       



       

      저작자표시

      '국비 교육 내용 정리' 카테고리의 다른 글

      2023년 05월12일 수업 내용 정리  (0) 2023.05.12
      2023년 05월11일 수업 내용 정리  (0) 2023.05.11
      2023년 05월09일 수업 내용 정리  (0) 2023.05.09
      2023년 05월08일 수업 내용 정리  (2) 2023.05.08
      2023년 05월04일 수업 내용 정리  (0) 2023.05.04

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바