2021 [인터랙티브 미디어개론] 팀프로젝트 '보글보글 방울소동' 깨알 홍보
반응형 웹
반응형 웹과 적응형 웹
반응형 웹
Responsive Web 이라고도 하며, 동일한 페이지를 디바이스에 따라 레이아웃을 다르게 보여주는 웹이다.
적응형 웹
Adaptive Web 이라고도 하며, 사용자의 환경(모바일/PC)에 따라 다른 페이지를 보여주는 웹이다.
나는 반응형 웹이 Interactive Web의 다른 말인줄 알았는데, 차이점을 찾아보니
Interactive, Responsive and Reactive – What’s the difference?
Interactive vs. Responsive vs. Reactive Web
Interactive Web
사이트 내 사용자의 액션에 반응하는 요소들이 있는 웹
Responsive Web
다양한 스크린, 화면 사이즈에 따른 레이아웃을 적용하는 웹
Reactive Web
새로고침 없이 서버로부터 자동으로 체크하고 데이터를 업데이트하는 웹
이라고 한다.
Viewport
이러한 반응형 웹 디자인을 위해 Viewport 란 것이 있다.
이를 위해 html에는 head 부분에 다음 코드를 추가해주면 좋다.
<meta name="viewport" content="width=device-width, initial-scale=1" />media Query
서로 다른 미디어 타입에 따라 별도의 css를 지정하는 방법이다.
사용 방법
@media 미디어유형 and (크기 규칙)
- 미디어 유형: All/print/screen
- 크기 규칙: min/max
- 예시: 가로가 1024px 이하가 되면 배경색을 lime으로 바꾸고 싶을 때
@media screen and (max-width : 1024 px) {
body{
background-color: lime;
}
}BreakPoint
프로젝트마다 다른 Breakpoint를 정하고 그것을 기준으로 레이아웃 다르게 설정
가로/세로 모드
orientation 사용
@media screen and (orientattion: landscape) {
/* 가로 */
body {
background-color: bisque;
}
}
@media screen and (orientation: portrait) {
/* 세로 */
body {
background-color: tomato;
}
}CSS 단위
px
기본 폰트 크기: 16px
%
상위 요소의 상대적인 크기
.pct-parent {
width: 500px;
height: 500px;
background-color: plum;
}
.pct-child {
width: 50%;
height: 50%;
background-color: aquamarine;
}em
- font-size: 속성값에 비례해서 결정되는 상대 단위
- 상위 요소 크기에 비례
- em 단위는 중첩! 굳이 필요한 상황이 아니라면 자주 사용하지는 않음
- 3em을 사용하더라도 상황에 따라 그 크기가 다르기 때문
.em {
font-size: 2em;
} // 글자가 3개라면 앞 요소의 2배씩 늘어남rem
- root em 약자
- 최상위 요소(html) 크기에 비례
- 3rem 이면 다 같은 크기!(중첩 영향 받지 않음)
.rem {
/* 뒤 여러개가 앞 글자의 2배만 늘어남 */
font-size: 2rem;
} // VW, VH
- viewport width / height
- 1vw: viewport width 1%
- 1vh: viewport height 1%
[퀴즈] 현재 웹 브라우저 사이즈(1200px, 900px일 때)
5vw, 5vh 값은?
1vw == 12 px => 5vw = 60px
1vh == 9 px => 5vh = 45px .vw {
height: 20vw;
width: 20vw;
background-color: coral;
}
.vh {
margin-top: 10px;
height: 20vh;
width: 20vh;
background-color: skyblue;
}커스텀
CSS 변수
전역변수
:root {
/* 전역변수 */
--color-success: rgb(49, 156, 49);
--color-error: rgb(237, 58, 58);
--color-white: rgb(250, 250, 250);
}
.btn.success {
background-color: var(--color-success);
}지역변수
.btn {
/* 지역변수 */
--size: 8px;
padding: var(--size);
width: calc(var(--size) * 25);
}BootStrap
웹 사이트를 쉽게 만들 수 있게 도와주는 공개 HTML,
CSS, JS 프레임워크
BootStrap
Icon 역시 사용 가능
i태그로 적용하는 방법
<i class="bi bi-balloon-heart" style="color: hotpink"></i>svg태그로 적용하는 방법
svg: 크기 조정이 가능한 벡터 그래픽. w,h 조정 가능, fill 색상 변경 가능
- svg 태그에 w,h 속성 각 1em 설정 시 부모 요소 크기에 맞게 변경
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="lime" class="bi bi-boxes" viewBox="0 0 16 16" > <path d="M7.752.066a.5.5 0 0 1 .496 0l3.75 2.143a.5.5 0 0 1 .252.434v3.995l3.498 2A.5.5 0 0 1 16 9.07v4.286a.5.5 0 0 1-.252.434l-3.75 2.143a.5.5 0 0 1-.496 0l-3.502-2-3.502 2.001a.5.5 0 0 1-.496 0l-3.75-2.143A.5.5 0 0 1 0 13.357V9.071a.5.5 0 0 1 .252-.434L3.75 6.638V2.643a.5.5 0 0 1 .252-.434L7.752.066ZM4.25 7.504 1.508 9.071l2.742 1.567 2.742-1.567L4.25 7.504ZM7.5 9.933l-2.75 1.571v3.134l2.75-1.571V9.933Zm1 3.134 2.75 1.571v-3.134L8.5 9.933v3.134Zm.508-3.996 2.742 1.567 2.742-1.567-2.742-1.567-2.742 1.567Zm2.242-2.433V3.504L8.5 5.076V8.21l2.75-1.572ZM7.5 8.21V5.076L4.75 3.504v3.134L7.5 8.21ZM5.258 2.643 8 4.21l2.742-1.567L8 1.076 5.258 2.643ZM15 9.933l-2.75 1.571v3.134L15 13.067V9.933ZM3.75 14.638v-3.134L1 9.933v3.134l2.75 1.571Z" /> </svg>
Icon 사용 예시
<i class="bi bi-heart hrtIcon"></i>
<!-- <i class="bi bi-heart-fill"></i> -->
<script>
const hrtIcon = document.querySelector(".hrtIcon");
hrtIcon.addEventListener("click", () => {
// hrtIcon.classList.remove("bi-heart");
// hrtIcon.classList.add("bi-heart-fill");
// 늘 둘 중에 하나로 변경
hrtIcon.classList.toggle("bi-heart"); //있으면 제거, 없으면 추가
hrtIcon.classList.toggle("bi-heart-fill"); //없으면 추가, 있으면 제거
});
</script>Bootstrap 외 스타일
BootStrap 사용하며 개발자 커스텀 클래스 역시 사용 가능
html 요소에 개발자 클래스명을 주고, css 파일에서 다음과 같이 정의
.progress-bar-height {
height: 5px;
}
.card_container {
display: flex;
flex-wrap: wrap;
}
w3school 을 통한 BootStrap 공부
아래 링크에 이전 공부 내역 및 캡쳐를 자세히 올려두었습니다.
