고정 헤더 영역
상세 컨텐츠
본문
반응형
오늘은 48일차고,,벌써 월요일이면 50일인 것이 실화일 까 (??)
아주 중요한 반응형 웹에 대해서 배웠다.
물론 아주 기초적인거여서 아주 쉬웠다 ㅎㅅㅎ
우리 회사도 반응형웹이기 때문에 이런 구조로 움직인 다는 것을 파악할 수 있었다
근데 디자인을 잡을 때 반응형 웹을 여러상태로 잡아야 하는 거 같은데
난 그걸 몰라서 ,, 개판이 된 것 같다
반응형 웹
(기술자체는 전혀 어렵지 아나요)
@media라는 규칙을 main.css에서 조건을 만들어주는 것
반응형웹을 만드는 방법
1. index.html의 body에 div class=container을 만들어준다.
2. div class안에 "item"이라는 클래스를 하나 만들어준다.
3. main.css로 가서 .container의 해당하는 것과 container.item을 만들어준다.
4. container에서 width, height, background-color을 지정해준다.
5. 그리고 출력을 해본다.
6. main.css로 가서 @media를 작성한다.
7. @media(max-width:700px)를 작성한다.
8. {}중괄호를 열어 .container를 만들어준다.
=> 이는 뷰포트의 700px의 크기를 가지고 있는 것에 대해 지정하는 것이다.
9. @media의 .container .item부분에 height 지정해주기
10. .container item에서 transition:1s; 지정하기
=>자연스럽게 해당하는 요소가 늘어나고 줄어나는 것을 확이 가능
https://github.com/HeropCode/Github-responsive에 접속하여
example로 가서 예제 페이지로 간다.
그리고 개발자도구를 열면 반응형으로 변하는 것을 볼 수 있다.
media규칙을 이용해서 가로 규칙이 변하는 것을 확인 가능!
html
<!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">
<title>glad</title>
<link href="https://fonts.googleapis.com/css2?family=Dongle:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="container">
<div class="item">BYEBYE</div></div>
</body>
</html>
css
body{
font-family: 'Dongle', sans-serif;
font-size: 40px;
color: whitesmoke;
}
.container {
width: 200px;
height: 150px;
background-color: aquamarine;
}
.container .item {
width: 100px;
height: 100px;
background-color: brown;
transition: 1s;
}
@media (max-width: 700px) {
.container {
background-color: darkcyan;
}
.container .item {
height: 200px;
background-color: black;
}
}
ㅋㅋㅋㅋ오늘도 안되는거 땜에 한 20분 고민했다
그건 바로 html코드 안에 div를 따로따로 묶어놔서 그랬던 것
div class="container"안에 "item"을 넣었어야했는데 분리시켜놔서 뜨지 않았었따 푸핫..
css의 문제인줄 알고 css만 한참 본 사람,,~!
오늘 민트초코 먹어서 민트초코 색으로 조합
이것은 @media가 정상사이즈 일 때 출력되는 화면 이미지
이것은 @media가 700px일떄 이렇게 변화하게 된다.
생각보다 아주 쉬웠던 반응형 웹(?)
하지만 뭐,,복잡해 질 수도 있겠쥬..?ㅋㅋㅋ
요즘은 제플린에서 코드가 워낙 잘나와 이정도면 나도 프론트엔드 도전해볼만 하지 않을까 싶다
나중에 이직할 때 없으면 코딩이나 제대로 배워서 튀튀 해버릴까,,,,,,
이래놓고 회사에 썩은 고인물 되는건 아닌지 몰르겠다
내일은 다시 꼭 피그마를 드겠숴,,
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
반응형
'UXUI DESIGN > UXUI DESIGN - STUDY' 카테고리의 다른 글
| [UI/UX]패스트캠퍼스 챌린지 50일차 - 디자이너 포트폴리오 꿀팁 (0) | 2022.03.14 |
|---|---|
| [UI/UX]패스트캠퍼스 챌린지 49일차 - 코딩의 마무리,,피그마는 음,, (0) | 2022.03.13 |
| [UI/UX]패스트캠퍼스 챌린지 47일차 - img와 bg차이 / goole font 적용 (0) | 2022.03.11 |
| [UI/UX]패스트캠퍼스 챌린지 46일차 - 이미지 용량 관리, bem (0) | 2022.03.10 |
| [UI/UX]패스트캠퍼스 챌린지 45일차 - 웹 이미지 종류 (0) | 2022.03.09 |
