250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
Today
Total
관리 메뉴

개린이 개발노트

국비지원 JAVA(자바) 프로그래밍 본문

국비지원(국비교육) 웹 개발자 과정

국비지원 JAVA(자바) 프로그래밍

개린이9999 2022. 12. 21. 09:08
728x90

반응협 웹( 미디어 쿼리) 

너비에 맞춰서 지정 가능 어디픽셀까지 어떻게 보이게 할지 결정가능

안 보이게 하는 것(사라지게 하는 것)

diplay:none;

visibility:hidden;

둘의 차이점? 

visibility는 사라지기는 하지만 그 영역 그 구역은 차지하고있는 상태 

diplay 차지하고 있는 영역 전부 삭제

 

반응형 웹 브레이크포인트

[CSS] 반응형 웹 디바이스별 해상도 반응형 분기점 리스트 (tistory.com)

 

[CSS] 반응형 웹 디바이스별 해상도 반응형 분기점 리스트

오늘은 반응형 웹 디자인을 제작하기 위한 미디어 쿼리 해상도 분기점 리스트를 공유하려고 합니다. 반응형 웹의 자세한 제작 방법이 궁금하시다면 아래의 포스트를 참고하세요. 반응형 웹(Respo

eunyoe.tistory.com

만들어보기!

<!DOCTYPE html>
<html lang="en">
<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>반응형 웹</title>
  <link rel="stylesheet" href="mqstyle.css">
</head>
<body>
  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>
div {
  height: 500px;
  background-color: pink;
}

@media (max-width: 700px) {
  div {
    background-color: skyblue;
  }
}

.container {
  padding-top: 100px;
  height: 100vh;
  background-color: pink;
  display: flex;
  justify-content: space-around;
}

.container > div {
  background-color: skyblue;
  height: 200px;
  width: 20%;
  margin: 5px;
  border: 1px solid black;
}

@media(max-width: 425px) {
  .container {
    flex-direction: column;
  }

  .container > div {
    width: 90%;
  }
}

@media(min-width: 426px) and (max-width: 768px) {
  .container {
    flex-wrap: wrap;
  }

  .container > div {
    width: 40%;
  }
}

완성!

~768px 일때 

에서 ↓로 만들기 

만들어보기!

그리드 grid 

초록색: grid-container

빨간색:grid-item

갈색부분: grid-gap(gutter)

하늘색: grid-line 

보라색:grid number

728x90

'국비지원(국비교육) 웹 개발자 과정' 카테고리의 다른 글

국비지원 JAVA(자바) 프로그래밍(자바스크립트)  (0) 2022.12.23
국비지원 JAVA(자바) 프로그래밍 (자바스크립트)  (2) 2022.12.22
국비지원 JAVA(자바) 프로그래밍 (css CSS 인라인, 시맨틱 태그)  (0) 2022.12.20
국비지원 JAVA(자바) 프로그래밍 (카카오톡 프로필사진만들기)  (0) 2022.12.19
국비지원 JAVA(자바) 프로그래밍 (박스사이징)  (0) 2022.12.16
'국비지원(국비교육) 웹 개발자 과정' Related Articles more