Udemy section 8 (22일) - em, rem, % 차이 (반응형디자인)

 

사용자가 사용하는 장치는 컴퓨터일수도있고, 패드기기 일수도있고 모바일폰등등 다양할수 있는데,

우리는 사용자가 웹사이트를 들어올때 어떤장치를 사용하는지 알수가 없고...

개발자로서, 사용자가 어떤 장치를 사용하던 예쁘게 보여줘야하는게 목적이고, 이 개념이 바로 반응형 디자인이다.

 

 

1. 먼저 윈도우의 경우 ctrl 버튼을 누른상태로 -.+ 를 적용해서 화면비율이 100%인지 부터 먼저 확인을 한다.

 

 

2. 브라우저 ... 을 클릭해서 setting-appearance에서 글꼴 등을 수정하여 볼수가있는데  

    px값을 사용하는게 사실 잘못이라고 까지는 아니지만,, 사용자의 옵션을 빼앗기때문에 적응형 디자인에 적용하기 맞지 않다. 이게 바로  px를 사용하는 가장 커다란 단점이라고 할수 있습니다.

 

3. CSS에서 사용하는 unit 값은 총 아래와 같다!

 

 

 ➡️ '%'는 항상 부모요소의 크기에 상대적

      ex) 1 em = 100%와 같은 의미를 가진다  (폰트인경우에만)

           0.1em = 10%

 

 ➡️ em, rem은 항상 실제로 적용되는 폰트 사이즈에 상대적 

 

 ➡️  rem은 = 폰트사이즈는 항상 최상위 요소에 항상 영향받음 

       ㄴ %나 em을 사용할때 생길수있는 문제가 x

       ㄴ html 요소에 적용된 설정이나 혹은 웹브라우저의 설정을 따른다고 생각해주면 됨!

 

 

    🔑 TIP)

    margin이나 padding의 경우 %나 rem으로! 사용하는걸 추천!

    border-radius 같은 요소는 왠만하면 px로 사용하기 !

 

 

 

 

여기까지 rem과 % 정리한 코드 --------

 

body {

    font-family: 'Open sans', sans-serif;

    margin: 0;

    background-color: rgb(44, 41, 38);

}

a {

    text-decoration: none;

}

#main-header {

    height: 5rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: rgb(29, 26, 24);

    padding: 0 5%;

}

#logo {

    font-size: 1.5rem;

    font-weight: bold;

    color: rgb(238, 164, 80);

    text-transform: uppercase;

}

#main-header ul {

    list-style: none;

    display: flex;

    margin: 0;

    padding: 0;

}

#main-header li {

    margin: 0 1rem;

}

#main-header nav a {

    color: rgb(185, 131, 31);

    font-size: 1.25rem;

}

#main-header nav a:hover {

    color: rgb(228, 163, 44);

}

main h1 {

    text-align: center;

    color: rgb(red, green, blue);

    font-size: 3rem;

}

#latest-products {

    width: 80%;

    margin: 2rem auto;

}

#latest-products ul {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

    list-style: none;

    margin: 0;

    padding: 0;

}

.food-item img {

    height: 15rem;

    width: 100%;

    object-fit: cover;

}

.food-item {

    background-color: rgb(228, 206, 182);

    border-radius: 6px;

    overflow : hidden;

}

.food-item-content {

    padding:  1rem;

    text-align: center;

}

.btn {

    background-color: rgb(228, 157, 44);

    color: white;

    border-radius: 4px;

    padding: 0.5rem 1.5rem;

}

.btn:hover {

    background-color: rgb(221, 134, 34);

}