대학생 쩡딱구리

코뮤니티 모각코 웹 기초 4일차: 크기를 적용하는 여러 가지 방법 본문

STUDIES/WEB

코뮤니티 모각코 웹 기초 4일차: 크기를 적용하는 여러 가지 방법

쩡딱구리 2021. 2. 14. 00:41

꽤 어려웠던 패딩과 마진 적용하는 방법! 글로 적으면서 다시 한 번 복습하려고 한다!

1. 패딩과 마진

패딩과 마진

 패딩(padding)과 마진(margin)은 CSS에서 여백을 나타내는 중요한 속성이다. 패딩은 박스 테두리와 안쪽 내용 사이의 여백, 마진은 박스 테두리 바깥의 여백을 의미한다. 클릭이 가능하도록 버튼 기능을 이용할 경우 마진이 아닌, 패딩까지를 클릭의 범위로 인식한다! 예를 들어 아래와 같이 여백을 설정했을 때, 내용과 박스 테두리 사이의 여백이 20px, 박스 테두리 바깥의 여백이 10px일 것이다.

margin: 10px; 
padding: 20px;

 

패딩과 마진을 활용해 아래 네비게이션 바를 만들 때, 아래의 두 가지 방법이 가능하다.

만들고자 하는 네비게이션 바

 

패딩을 활용할 때
<!DOCTYPE html>

<html lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div style="background-color: #eeeeee">
        <div style="display: inline-block; padding: 20px">📝 글쓰기</div>
        <div style="display: inline-block; padding: 20px">📎 파일 첨부</div>
        <div style="display: inline-block; padding: 20px">📂 임시저장</div>
    </div>
</body>
</html>

 

마진을 활용할 때
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div style="background-color: #eeeeee">
        <div style="display: inline-block; margin: 20px"> 📝 글쓰기</div>
        <div style="display: inline-block; margin: 20px"> 📎 파일 첨부</div>
        <div style="display: inline-block; margin: 20px"> 📂 임시저장</div>
    </div>
</body>
</html>

 

2. 다양한 단위

 웹사이트에서 길이와 크기를 나타내는 속성은 상당히 많다! 그 중 중요하게 사용되는 px, em, rem, %만 다뤄본다.

 

픽셀(px)

영상, 이미지 화질에서 다루는 그 픽셀을 의미한다. 변하지 않는 절대적인 값이다!

 

em, rem

상대적인 값으로, em은 상위(부모) 요소의 글자 크기를 1em으로 두고 계산하며, rem은 최상위(html 태그) 요소의 글자 크기를 1rem으로 두고 계산한다. 자세한 차이는 그림과 같다. 보통 부모 요소의 영향을 많이 받아 헷갈릴 가능성이 높은 em보다 rem을 더 많이 사용한다고 하는데, 정답은 없다고 한다!

em과 rem의 차이

%

 %단위의 의미처럼 전체 크기 중 비율로 설정하며 폰트 크기보다는 길이나 넓이에 주로 사용된다고 한다. 여기서 퍼센트에서 비율도 상위 요소 기준이라고 한다! 

 

3. (심화) 반응형 웹이란?

 반응형 웹이란 하나의 웹 사이트가 PC, 모바일, 태블릿 등 다양한 사이즈의 화면으로 자동으로 크기가 변하게 만들어진 웹을 의미한다. 반응형 웹을 만들기 위해서는 모든 기기의 화면의 사이즈에 맞춰 디자인이 변경될 모든 경우의 수를 고려해야 한다. 또 반응형 웹사이트의 경우 주소가 바뀌지 않고 디자인이 조금씩 변경된다는 것도 특징이다. 예를 들어 네이버는 PC에선 'www.naver.com/'이 주소인데, 모바일에서는 'm.naver.com/'으로 주소가 다르다. 즉 네이버는 반응형 웹이 아닌 것이다. 반응형 웹에서는 화면 크기가 달라지면 모든 기본 글자 크기가 달라져야 하기 때문에 px보단 em, rem이 주로 사용된다.

 

4. 미션

✅ 지금까지 공부한 내용 복습하기

 - 조건 1. 구글 폰트, 눈누폰트 사이트에서 각각 하나 이상의 폰트 적용하기

 - 조건 2. 반드시 padding, margin, 다양한 단위 사용해보기

 

 4일차 코드는 내가 만든 것이 아니라 구글 페이지를 클론코딩하면서 내가 변형하며 복습했기 때문에 코드 대신 실행 결과와 매니저님의 리뷰를 삽입한다.

구글 메인 오마주
매니저님의 리뷰!

4. 소감

 패딩과 마진은 꽤 어려웠다. 처음 접하는 내용이기도 하고 차이점을 이해하고 적용하는 데 시간이 오래 걸려 클론코딩을 하면서 복습했다. 꼭 내 사이트를 만들 때는 잘 적용해봐야지...! 지금까지의 기초 공부를 마무리하고 앞으로는 실제로! 웹 사이트를 만들어볼 것 같다. 5일차(후기는 자고 일어나서 올라올 예정)에 잠깐 손만 봤는데도 웹사이트가 생긴 것 같아 정말 기대된다🥰

'STUDIES > WEB' 카테고리의 다른 글

코뮤니티 모각코 웹 기초 5일차: 기본 레이아웃 만들기  (0) 2021.02.16
코뮤니티 모각코 웹 기초 3일차: CSS, 폰트 적용하기  (0) 2021.02.11
코뮤니티 모각코 웹 기초 2일차: HTML, CSS 본격적으로 시작하기  (0) 2021.02.05
코뮤니티 모각코 웹 기초 1일차: 웹 개발 시작하기  (0) 2021.02.04
코뮤니티 모각코 웹 기초 합격과 시작  (0) 2021.02.04
'STUDIES/WEB' Related Articles more