[Text Design] 선, 그물 선, 밑줄로 제목 꾸미기

✨제목 &텍스트 디자인✨

 

 

 

 

📌 1.  가로 선이 두 개 있는 제목 디자인

2개의 선으로 간단하게 제목을 꾸며봐요. position: absolute 대신 flex를 이용해서 코드를 구현해 볼게요. 

 

☑️ HTML 코드

<h2 class="heading">멋진 웹디자인을 위한 아이디어</h2>

☑️ CSS 코드

.heading {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
}
.heading::before,
.heading::after {
    content: '';
    width: 70px;
    height: 3px;
    background-color: #ffb28e;
}
.heading::before {
    margin-right: 30px;
}
.heading::after {
    margin-left: 30px;
}

 

---

 

 

 

 

📌 2. 영문 텍스트와 밑줄로 제목 꾸미기

단순한 디자인으로 여백이 넉넉한 레이아웃에 적합한 제목 디자인입니다. 이탤릭체나 필기체 등 영문 폰트 스타일을 바꿔서 다양한 느낌으로 활용해 볼 수 있습니다. 

 

☑️ HTML 코드

<h2 class="heading" data-en="Design">웹디자인을 위한 아이디어</h2>

☑️ CSS 코드

.heading {
position: relative;
padding-bottom: 30px;
font-size: 36px;
text-align: center;
background-image: linear-gradient( /* 선을 선형 그레이디언트로 나타내기*/
    90deg, /* 그라데이션의 방향 : 왼쪽 -> 오른쪽 */
    rgba(0 0 0/ 0) 0%, rgba(0 0 0 / 0) 35%, /* 선 왼쪽 투명 부분 지정 */
    #e5c046 35%, #e5c046 65%, /* 선 */
    rgba(0 0 0 / 0) 65%, rgba(0 0 0 / 0) 100% /* 선 오른쪽 투명 부분 지정 */
);
background-size: 100% 2px; /* 선과 투명 부분을 합친 크기 지정 */
background-repeat: no-repeat; 
background-position: center bottom;
}
.heading::before { /* 영문 텍스트 표현 */
content: attr(data-en); /* 데이터 속성 로딩 */
display: block;
margin-bottom: 20px;
color: #e5c046;
font-size: 28px;
font-style: sans-serif;        
}

 

---

 

 

 

 

📌 3. 그물 모양 밑줄로 제목 꾸미기

재미있는 느낌을 주는 그물 밑줄 디자인입니다. 따로 가상요소를 만들어주지 않고 background 속성으로 표현해 봤습니다.

 

☑️ HTML 코드

<h2 class="heading">웹디자인을 위한 아이디어</h2>

☑️ CSS 코드

.heading {
    position: absolute;
    padding: 0 2em 20px;
    font-size: 36px;
    background-image: 
        repeating-linear-gradient(
            45deg,
            #cfc296 0px, #cfc296 1px,
            rgba(0 0 0 / 0) 0%, rgba(0 0 0 / 0) 50%
        ),
        repeating-linear-gradient(
            -45deg,
            #cfc296 0px, #cfc296 1px,
            rgba(0 0 0 / 0) 0%, rgba(0 0 0 / 0) 50%
        );
        background-size: 8px 8px;
        background-repeat: repeat-x;
        background-position: center bottom;
}

 

 

어떠셨나요? 많은 도움이 되셨나요? 궁금하신 점은 댓글에 남겨주시고 좋아요 눌러주세요.