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등의 속성을 적절히 부여해서 디자인 해준다.

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


저작자 표시
신고

백그라운드 이미지 위에 글씨 배치






앞선 포스팅에서 백그라운드 이미지 위에 글씨를 배치해보았다.

이번에는 좀 더 나아가서 어떻게 border를 넣고, 깔끔하게 보이게 하는지를 알아보겠다.




1
2
3
4
5
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
.img .content{
    font-family: 'Archivo Black', sans-serif;
}
cs


가장 먼저 기본이 되는 폰트를 수정해주도록 하자

구글 폰트에서 마음에 드는 폰트를 골라 넣어주면 되는데,

나는 위와 같은 폰트를 골랐다.





1
2
3
4
.img .content{
    padding: 30px;
    border: 5px solid white;
}
cs


다음으로 외부에 있는 테두리를 넣어준다.

padding이 없으면 테두리와 텍스트가 너무 달라 붙기 때문에

적당한 간격으로 padding을 넣어준다.

마찬가지로 테두리도 원하는 색상과 굵기로 생성해주도록 하자.




1
2
3
4
5
6
7
.img .content h2:after{
      display: block;
      content:'';
      width: 40%;
      margin: 10px auto;
      border: 2px solid white;
}
cs


마지막으로 하단에 줄을 넣기 위한 코드이다.

h2 뒤에 after 가상 클래스를 선택해서 해당 클래스에 대한 속성을 부여해준다.

먼저 h2뒤에 바로 붙는 클래스이므로 display:block으로 아래 줄로 내려주도록한다.

다음으로 content를 공백으로 설정해서 가상 클래스가 구체화 되도록한다.

그리고 줄의 너비는 임의로 부여하며, 

margin을 이용해서 가운데 정렬을 하고 상하단의 간격을 설정하도록한다.

마지막으로, 줄의 너비와 색상을 선택하면 된다.



예제코드


저작자 표시
신고
  1. 깡돌 2017.08.08 00:11 신고

    님 너무 감사해요 ㅠㅠ

    복받으실꺼에요!!!!!!!!!

백그라운드 이미지 위에 글씨 배치





요새 웹 디자인은 싱글 페이지에 길게 스크롤 되어 정돈된 이미지를 보여주는것이 많다.

이 때 가장 첫번째 보여지는 이미지는 하얀색 글씨에 톤 다운된 이미지를 쓰곤 한다.

이를 구현하기 위해 어떤 식으로 CSS를 넣는지 알아보자


디자인적인 부분은 제외하고 기본적인 부분만 구현하도록 하겠다.

(물론 나는 전문적인 웹 디자이너나 퍼블리셔가 아니므로 꼼수나 잘못된 코드가 있을 수 있다.)




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
    <link rel="stylesheet" type="text/css" href="reset.css">
</head>
<body>
    <div class="img">
        <div class="content">
            <h1>Hello!</h1>
            <h2>My name is nunu</h2>
        </div>
        <div class="img-cover"></div>
    </div>
</body>
</html>
 
cs


우선 기본적인 HTML 코드이다.

태그마다 기본적으로 설정되어 있는 스타일을 제거하기위해 reset.css를 적용해준다

reset.css 코드는 구글에서 검색하면 제일 상단에 나오는 페이지의 코드를 사용해주면 된다.


먼저 이미지가 들어갈 div img 태그와 글씨가 들어갈 content, 

이미지에 검은 반투명 배경을 덮어줄 img-cover을 생성한다.




1
2
3
4
5
6
.img{
    position: relative;
    background-image: url(./img/img1.jpg);
    height: 100vh;
    background-size: cover;
}
cs


배경 이미지를 세팅해주고 화면을 가득 채우기 위해서 높이는 100vh로 설정한다.

vh는 view height의 약자이며, 100vh가 현재창의 100% 높이가 된다.

배경 화면이 창을 채우게 해야하므로 background-size는 cover로 설정한다.




1
2
3
4
5
6
7
.img-cover{
   position: absolute;
   height: 100%;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.4);
   z-index:1;
}
cs


앞서 삽입한 이미지가 너무 밝으면 흰색 텍스트가 잘 보이지 않게 된다.

따라서 짙은 반투명 배경색으로 현재 적용된 배경 이미지를 덮어주어야한다.

배경 이미지가 relative 이므로 img-cover는 이에 맞추어 absolute 로 설정한다.


또한 배경 이미지 태그 사이즈와 동일한 사이즈를 가져야 하므로

height와  width를 부모의 사이즈인 100%로 맞춰준다.


배경색은 검은 색에서 투명도를 0.4정도로 맞춰준다. 

투명도를 낮춰서 조금 더 어둡게 해도 상관없다.


마지막으로, 배경 이미지 보다 앞으로 나와있어야 

이미지를 덮을수 있으므로 z-index를 설정해준다.




1
2
3
4
5
6
7
8
9
10
.img .content{
     position: absolute;
     top:50%;
     left:50%;
     transform: translate(-50%, -50%);
     font-size:5rem;
     color: white;
     z-index: 2;
     text-align: center;
}
cs


안에 들어가는 텍스트도 absolute를 설정하고 이미지 태그를 기준으로 움직이게 한다.

top과 left값을 50%로 주면서 가운데로 이동하게 하는데, 이때 컨텐츠의 값만큼 더 이동하므로

더 이동한 값은 transform으로 보정을 해준다.

translate의 인자는 순서대로 X,Y,Z  축이 된다.


이후에 font-size, color, text-align 등의 텍스트 설정을 해준다.

마지막으로 img-cover위에 있어야하므로 z-index를 img-cover보다 높게 잡아준다.

그렇지 않으면 반투명 검은색에 흰 텍스트의 경우 텍스트가 가려져서 회색으로 보일수 있다.



예제코드

저작자 표시
신고

+ Recent posts

티스토리 툴바