본문 바로가기
개발

[CSS] 7:3 비율 텍스트 레이아웃

by 마스터누누 2017. 5. 5.
728x90
반응형

7:3 비율 텍스트 레이아웃



기본적으로 7:3 비율로 이루어진 기본적인 텍스트 레이아웃을

만들어보자




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
    <section id="about">
        <div class="container">
            <div class="title">
                <h2>About me</h2>
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo officia quod, maxime modi eaque rerum atque blanditiis
                animi expedita velit quibusdam repudiandae architecto iusto natus soluta sequi ab similique, fugit ut minus.
                Optio saepe dolorum numquam repellendus commodi ducimus dicta deleniti. Ex dolore nam architecto sed repellat
                facere natus iusto reprehenderit necessitatibus aut consectetur exercitationem, culpa, vitae eaque dicta
                repudiandae, eos at voluptatum libero blanditiis quisquam doloribus minus! Numquam quibusdam assumenda impedit
                iste mollitia veritatis repudiandae officiis amet, perspiciatis. Ipsa sapiente, consequatur iusto aperiam
                vel cumque perferendis optio natus, laudantium dolor commodi odio delectus quidem.</p>
            </div>
            
        </div>
    </section>
</body>
cs


먼저 기본적인 HTML 코드이다.

section을 가장 큰 틀로 잡고 내부에는 ipsum으로 내용을 채워 넣었다.




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
29
30
31
32
33
34
35
36
37
38
        *{
            box-sizing: none;
        }
        #about{
            padding: 50px 20px;
            border-bottom: 1px solid black;
        }
        .container{
            color:black;    
            overflow: hidden;
        }
        .title{
            width: 30%;
            float: left;
            
        }
        .title h2{
            text-align:center;
            font-size: 2.2rem;
            font-family: 'Source Sans Pro', sans-serif;
        }
        .title h2:after{
            display: block;
            width: 15%;
            content: '';
            border-bottom: 1px solid #3498db;
            margin: 15px auto;
        }
        .content{
            width: 70%;
            float:right;
            
        }
        .content p{
            line-height: 1.4rem;
            font-family: 'Source Sans Pro', sans-serif;
            color:gray;
        }
cs


우선 reset.css로 기본 설정되었던 것들을 모두 제거해준다.

그리고나서 가장 큰 틀인 about section에 padding을 부여해준다.

padding이 들어가면 텍스트들이 가장자리에 달라 붙지않고 가운데로 보기좋게 모이기때문에

좀 더 가독성이 좋아진다.


다음으로는 내부 2개의 div 태그인 title과 content에 float 속성을 넣어주는데

이때 상위 태그에 overflow : hidden을 넣어줘야 부피값을 무시하지 않는다.


title 안에 h2와 content안에 p태그는 text-align등의 속성을 적절히 부여해서 디자인 해준다.

앞서 만들어본 반투명 이미지 밑에 붙이면 상당히 예쁜 디자인이 나오게 된다. 


반응형
저작자표시

'개발' 카테고리의 다른 글

[AWS] 아마존 웹서비스와 클라우드  (0) 2017.05.10
[Javascript] Jasmine을 이용한 테스트 코드 작성  (0) 2017.05.08
[CSS] 백그라운드 이미지 위에 글씨 배치 - 응용  (1) 2017.05.01
[CSS] 백그라운드 이미지 위에 글씨 배치  (3) 2017.05.01
[NodeJS] 템플릿을 더욱 템플릿 답게 - ejs  (0) 2017.04.23

관련글

댓글

티스토리툴바