여백 계산법

Notice

Recent Posts

Recent Comments

Link

깃허브

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

Tags more

Archives

Today

Total

관리 메뉴

EverGiver

여백 계산법 본문

Front-End (웹)/CSS

여백 계산법

친절한개발초보자 2021. 7. 28. 21:52

728x90

여백 계산법

웹사이트 상에서 똑같은 간격과 똑같은 크기를 가지고 있는 부분을 만들어줄 때 사용하는 계산법

계산법
- (총 가로길이 - 여백 개수 * 임의의 여백 사이즈) / 한 줄의 내용물의 개수
ex) (1500 - 3*20) / 4
※ 여백 개수 = 한 줄의 내용물의 개수 - 1
※ 임의의 여백 사이즈 = 보통 10~30px 사이를 많이 주고 20px을 가장 많이 넣어준다.
여백 계산법을 완료했을 때 들어가야 하는 필수 css 속성들
1. 계산해서 나온 값을 width에 넣어줄 것
2. 여백
- margin-left 입력 (margin-right도 상관없다)
3. 가로배치
- float:left;
4. 첫 번째 태그에 들어가 있는 여백 빼주기
- ?:nth-child(1){margin-left:0px}

★ 선택자:nth-child(?n+1)
: 자동으로 일정한 순번에 있는 대상을 골라주는 자동선택자
(? 에는 숫자가 들어간다)
▶ 여백 계산법 사용 시 내용물이 한 줄인 경우에는 여백을 뺴줄때 선택자:nth-child(1){margin-left}해주면 되지만 한 줄이 아니라 여러 줄인 경우에는 한 줄에 들어가는 (내용물의 개수 x n + 1)을 해준다.

cf) 계산을 했는데 소수점이 나온다. 그러면 값을 바꿔주어야 한다!!!

(임의의 여백 사이즈 값을 바꿔주면 된다. 소수점이 안 나올 때까지!!!) → 우선은 5 단위로 계산!!

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>여백계산법 #1</title>
    <style>
        *{margin:0;padding:0}
        ul{width:1500px;height:300px;
            background-color:#123456;
            margin:0 auto;}
        
        li{list-style:none;}
        
        li{width:360px;height:300px;
            background-color:#987654;
            margin-left:20px;
            float:left;}
        
        li:nth-child(1){margin-left:0px;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>여백계산법#2</title>
    <style>
        *{margin:0;padding:0;}
        li{list-style:none;}
        
        ul{width:1200px;height:400px;
            background-color:#123456;
            margin:0 auto;}
        
        li{width:175px;height:400px;
            background-color:#987654;
            margin-left:30px;
            float:left;}
        
        li:nth-child(1){margin-left:0px;}
    </style>
</head>    
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    
        <li></li>    
        <li></li>    
        <li></li>    
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>여백계산법 #3</title>
    <style>
        *{margin:0;padding:0;}
        li{list-style:none;}
        .clearfix:after{content:"";display:block;clear:both;}
        
        ul{width:1300px;margin:0 auto;
            background-color:#123456;}
        
        li{width:310px;height:310px;
            background-color:#987654;
            margin-left:20px;
            float:left;
            margin-top:20px;}
        li:nth-child(4n+1){margin-left:0px;}

    </style>
</head>
<body>
    <ul class="clearfix">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

728x90