본문 바로가기

5월 17일 수업 - flex 실습, js 예제

2023. 5. 17. 21:46

*Flex를 쓸 때 활용할 수 있는 속성

1)calc
2)flex-direction
3)display : flex
4)flex-glow
5)rem/em
6)aline-item
7)justify-contents
8)@media

*Flex 실습 예제

 

1)calc 함수 활용

 

*html

<body>
  <div class="container">
    <header>Header</header>
      <section>
        <nav>Nav</nav>
        <article>Article</article>
        <aside>Aside</aside>
      </section>
      <footer>Footer</footer>
  </div>
</body>

*css

* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
}
.container {
  display: flex;
  flex-direction: column;
}
header {
  width: 100vw;
  height: 10rem;
  background-color: pink;
}
section {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 320px);
}
nav {
  flex: 1;
  background-color: darkorange;
}
article {
  flex: 1;
  background-color: chocolate;
}
aside {
  flex: 1;
  background-color: blueviolet;
}
footer {
  background-color: burlywood;
  height: 10rem;
}

*결과창

*calc 함수 : 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수. 단위가 다른 두 값도 계산해주어서 매우 편리하다.

*위의 예제에서는 section과 footer의 height값의 합 때문에 화면에 스크롤바가 생기는 현상을 해결하기 위해 사용했다. section은 nav, ariticle, aside 태그를 감싼 부모 요소다.

 

2) @media를 이용한 반응형 flex 웹사이트

 

*html

<body>
    <div class="container">
    <div class="content1">
      <p>Content1</p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum delectus molestias, fugit quia, unde fuga, ratione nemo ducimus quam exercitationem non expedita est iusto recusandae aut sapiente quidem quasi quo!
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum delectus molestias, fugit quia, unde fuga, ratione nemo ducimus quam exercitationem non expedita est iusto recusandae aut sapiente quidem quasi quo!
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum delectus molestias, fugit quia, unde fuga, ratione nemo ducimus quam exercitationem non expedita est iusto recusandae aut sapiente quidem quasi quo!
    </div>
    <section>
      <div class="sub1">
        <p>Sub1</p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      </div>
      <div class="sub2">
        <p>Sub2</p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
    </section>
    </div>
</body>

*CSS

*  {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.container {
  width: 1200px;
  display: flex;
  flex-direction: row;
}
p {
  font-weight: bold;
}
.content1 {
  flex:1;
  background-color: yellow;
  padding: 1.25rem;
 
}
section {
  flex:1;
  display: flex;
  flex-direction: column;
}
.sub1 {
 background-color: aqua;
 padding: 1.25rem;
 flex: 1;
}
.sub2 {
  background-color: pink;
  padding: 1.25rem;
  flex: 1;
}
@media all and (max-width:768px) {
  .container {
    flex-direction: column;
  }
}

*결과창

전체화면
작은화면

 

*@media 

-문법 형태 @media all and (max-width:oopx)

1) all : 모든 스크린 형태

2) 괄호 앞에 띄어쓰기를 해야 적용이 됨 (주의!!)

3) max-width : 설정한 최대 width값 안에서 설정한 요소 적용

4) min-width :  최소 ~부터 설정한 요소 적용(최소 이만큼은 작아져야 설정이 된다!)

 

3) @media & order

 

*Html

<body>
  <div class="container">
    <header>Header</header>
    <section>
      <div class="aside1">Aside #1</div>
      <div class="p">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta quis laborum ipsam maiores explicabo. Magni quos rem debitis placeat deleniti aperiam id itaque ullam, dolore recusandae, provident nemo qui ut.
      Mollitia voluptas qui, iste totam consequatur ipsum maiores, eius corrupti consectetur corporis nisi eum quaerat omnis, quibusdam facere? Vel, a? Repellat a voluptatum accusantium sint. Veniam veritatis ut molestias laudantium!
        </p>
      </div>
      <div class="aside2">Aside #2</div>
    </section>
    <footer>Footer</footer>
  </div>
</body>

*CSS

* {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.container {
  display: flex;
  flex-direction: column;
  border: 3px solid black;
  width: 1200px;
  height: 50rem;
}
header {
  flex:1;
  background-color: tomato;
  text-align: center;
  line-height: 5rem;
  height: 5rem;
}
section{
  flex:8;
  display: flex;
  flex-direction: row;
  height: 14rem;
}
.aside1 {
  background-color: yellow;
  text-align: center;
  flex: 2;
}
.p {
  background-color: gray;
  flex: 7;
  text-align: center;
  padding: 0 2rem;
}
.aside2 {
  background-color: green;
  flex: 2;
  text-align: center;
}
footer {
  flex:1;
  background-color: aqua;
  text-align: center;
  line-height: 5rem;
  height: 5rem;
}

@media all and (max-width:768px) {
  section {
    flex-direction: column;
  }
  .aside1 {
    order: 2;
  }
  .p {
    order: 1;
  }
  .aside2 {
    order:3;
  }
}

*결과창

전체화면

 

작은 화면

*order : 아이템의 순서를 정하는 속성. flex와 함게 쓰인다.

 

4) flex-basis

 

*html

<body>
  <div class="container">
    <header><p>Header</p></header>
    <div class="banner"><p>Banner</p></div>
    <section>
      <nav>
        <p>Navigation</p><br />
        <h4>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nesciunt rerum dicta quia? Eos quos incidunt soluta quam quae facere suscipit
        </h4>
      </nav>
      <main>
        <p>Main</p><br />
        <h4>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nesciunt rerum dicta quia? Eos quos incidunt soluta quam quae facere suscipit provident placeat amet, reiciendis dolorum odio ipsam repellat voluptate?
          Iusto sed rerum sapiente aperiam similique deleniti ut consequuntur tempora. Adipisci perspiciatis dolorum nisi beatae molestiae mollitia voluptas nobis veritatis, quaerat voluptates ipsa ipsam incidunt aliquam non magnam cumque ad?
          Dolores minima, corporis adipisci nesciunt laudantium numquam eveniet sed dolorum officiis quos deleniti ut, autem rem eaque ducimus nam commodi, earum consequuntur! Aspernatur laudantium modi dicta recusandae autem aut ad.
        </h4>
      </main>  
    </section>
  </div>
</body>

*CSS

* {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}
p {
  font-weight: bold;
}
h4 {
  font-weight: lighter;
}
header {
  background-color: yellow;
  padding: 1.5rem;
}
.banner {
  background-color: green;
  padding: 1.5rem;
}
section {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
}
nav {
  flex-basis:18.725rem;
  background-color: pink;
  padding: 1.5rem;
}
main {
  flex: 1;
  background-color: aqua;
  padding: 1.5rem;
}

@media all and (max-width:768px) {
  section {
    flex-direction: column;
  }
}

*결과창

화면을 줄일 때 : Main 영역이 줄어들어도 Navi 영역에는 변화가 없음.
화면을 줄였을 때

*flex-basis : flex 아이템의 기본 사이즈를 지정하는 속성.

*위의 경우, nav 태그의 기본 사이즈를 지정해주었기 때문에 화면 크기를 줄여도 줄어들지 않는다. flex-basis의 기본값은 auto이므로, 설정값을 넣지 않는 이상 해당 아이템의 크기는 화면비에 따라 변화한다.

 

*JS 실습예제

1)차량 10부제 문제 - 오늘은 운행 가능한 날인가요?

let today = String(prompt("오늘은 몇 일인가요?", "ex)17"));
let carNum= String(prompt("당신의 차 번호를 알려주세요."));

function solution(e) {
  let take = carNum.charAt(3)
  if(e !== "") {
    if(e % 10 == take) {
      alert(`오늘은 차량운행 불가날입니다.`);
    } else {
      alert(`안전운전하세요!`)
    }
  }
}

solution(today);

 

'코딩 공부 > html' 카테고리의 다른 글

5월 10일 수업 - HTML, CSS 핵심 내용 요약 + JS 핵심 내용 요약(1)  (1) 2023.05.10
댓글

티스토리툴바