08 Apr 2022
|
css
화면 크기에 가변적인 폰트 사이즈
화면 크기에 따라 폰트의 크기를 변경하고 싶을 때가 있습니다. 폰트 크기를 px로 설정하면 화면 크기와 무관하게 크기가 고정됩니다. (단, 최신 브라우저들은 px 단위에서도 화면 크기에 따라 폰트 크기가 조절됩니다.)
화면 크게에 따라 반응성으로 폰트 크기를 조절하기 위해 em 단위를 사용합니다.
em 단위는 대문자 M을 1em으로 표현한 것으로 16px이 1em 입니다.
em의 단점, rem의 등장
em은 화면 크기에 따라 폰트의 크기가 반응성을 가지며 변하지만, 부모 컨테이너의 글자 크기를 상속받는다는 단점이 있습니다. 복잡한 레이아웃에서는 사용하기 불편할 수 있습니다.
그래서 나온 것이 rem 입니다. 웹 문서의 최상위인 <html>, </html>를 기준으로 하기 때문에 상속 문제가 발생하지 않아 유용하게 사용할 수 있습니다.
vw, vh, vmin, vmax 단위
rem은 화면 크기에 따라 폰트의 크기가 변하기는 하지만 특정 단위를 기준으로 폰트 크기가 변할 뿐, 화면 비율에 따라 역동적으로 변하지는 않습니다. CSS3에서 추가된 vw, vh, vmin, vmax 등을 이용하면 화면 비율에 따라 역동적으로 변하는 폰트 크기를 얻을 수 있습니다.
p {
font-size: 5vw;
}
위와 같이 폰트 크기를 5vw로 한 경우 웹브라우저 너비의 5%를 의미합니다. 여기서 v는 viewport를 의미합니다.
vmin은 너비와 높이 중 짧은 쪽을 기준으로 합니다.
07 Apr 2022
|
git
git rebase
git rebase는 말 그대로 base를 다시 정한다는 말입니다.
주로 특정 브랜치에서 commit 된 내용을 전부 master에 반영할 때 사용합니다.
git rebase 순서
만약 master 브랜치가 있고, 여기에 작업을 한 hotfix 브랜치가 있다고 하면,
- git checkout hotfix :
hotfix 브랜치로 이동
- git rebase master : 현재
master를 hotfix 브랜치의 앞 쪽에 base 설정함
의 순서로 진행하면 됩니다. 현재 작업 중인 브랜치의 base를 master로 설정함으로써, 현재 master에 이어서 작업 중인 hotfix 브랜치의 commit들을 연결할 수 있습니다.
07 Apr 2022
|
css
id=”wrap”
대부분의 웹사이트 소스를 보면 항상 wrap 또는 wrapper 아이디의 <div> 태그들이 존재합니다.
<template>
<div id="wrap">
<div class="container">Hello</div>
...
</div>
</template>
<style>
#wrap {
width: 90%;
height: 480px;
margin: 0 auto;
border: 2px solid black;
background: wheat;
}
</style>
특별한 의미가 있는 것은 아니고, 특별한 아이디로 웹 문서 전체를 감싸면 웹 문서의 내용이나 배경, 가운데 정렬 등 전반적인 속성을 쉽게 변경할 수 있기 때문입니다.
07 Apr 2022
|
css
편의상 Vue로 개발한 예제입니다.
App.vue
화면에 보이는 상자는 화면 크기의 90%만큼 동적으로 변하는 반응성 상자입니다.
<template>
<div id="head">SnowDeer's Example</div>
<div>Hello. SnowDeer</div>
</template>
<script>
export default {
name: "App",
};
</script>
<style>
#head {
width: 90%;
height: 500px;
margin: 0 auto;
background: yellowgreen;
border: 4px solid black;
text-align: center;
}
@media all and (min-width: 500px) {
body {
background: teal;
}
}
@media all and (min-width: 800px) {
body {
background: orange;
}
}
</style>
실행 화면
웹 브라우저가 500px 이상이면 배경이 teal 색상으로 변경됩니다.
웹 브라우저가 800px 이상이면 배경이 orange 색상으로 변경됩니다.
Media Query 문법은 다음과 같습니다.
@media [only 또는 not] [미디어 유형] [and 또는 ,] (조건문) {실행문}
