텍스트 유형 (1)

728x90

⭐️ 텍스트 유형 01 ⭐️

01. 레이아웃 구상하기

레이아웃을 구상할 때는, 스케치하면서 세부 내용의 정보까지 구체적으로 계획합니다.

02. 상자(div) 만들기 : <body>

         <section id="textType 01" class="text__wrap nexon section">
    <h2>텍스트 유형 01</h2>
    <p>음악 플레이어 아이콘 설명서</p>
    <div class="text__inner container">
        <article class="text">
            <figure class="text__header">
                <img src="img/text_bg01_icon01.png" alt="라이브러리 아이콘">
            </figure>
            <div class="text__box">
                <h3 class="tit">라이브러리</h3>
                <p class="desc">
                    아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 메뉴로 이동/ 설정을 완료하십시오. 아이콘을 길게 누르면 설명 상자가 나옵니다.
                </p>
                <a href="#">더보기</a>
            </div>
        </article>
        <article class="text">
            <figure class="text__header">
                <img src="img/text_bg01_icon02.png" alt="앨범 아이콘">
            </figure>
            <div class="text__box">
                <h3 class="tit">앨범</h3>
                <p class="desc">
                    아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 메뉴로 이동/ 설정을 완료하십시오. 아이콘을 길게 누르면 설명 상자가 나옵니다.
                </p>
                <a href="#">더보기</a>
            </div>
        </article>
        <article class="text">
            <figure class="text__header">
                <img src="img/text_bg01_icon03.png" alt="아티스트 아이콘">
            </figure>
            <div class="text__box">
                <h3 class="tit">아티스트</h3>
                <p class="desc">
                    아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 메뉴로 이동/ 설정을 완료하십시오. 아이콘을 길게 누르면 설명 상자가 나옵니다.
                </p>
                <a href="#">더보기</a>
            </div>
        </article>
        <article class="text">
            <figure class="text__header">
                <img src="img/text_bg01_icon04.png" alt="반복 듣기 아이콘">
            </figure>
            <div class="text__box">
                <h3 class="tit">반복 듣기</h3>
                <p class="desc">
                    아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 메뉴로 이동/ 설정을 완료하십시오. 아이콘을 길게 누르면 설명 상자가 나옵니다.
                </p>
                <a href="#">더보기</a>
            </div>
        </article>
        <article class="text">
            <figure class="text__header">
                <img src="img/text_bg01_icon05.png" alt="섞어 듣기 아이콘">
            </figure>
            <div class="text__box">
                <h3 class="tit">섞어 듣기</h3>
                <p class="desc">
                    아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 메뉴로 이동/ 설정을 완료하십시오. 아이콘을 길게 누르면 설명 상자가 나옵니다.
                </p>
                <a href="#">더보기</a>
            </div>
        </article>
        <article class="text">
            <figure class="text__header">
                <img src="img/text_bg01_icon06.png" alt="옵션 선택 아이콘">
            </figure>
            <div class="text__box">
                <h3 class="tit">옵션 선택</h3>
                <p class="desc">
                    아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 메뉴로 이동/ 설정을 완료하십시오. 아이콘을 길게 누르면 설명 상자가 나옵니다.
                </p>
                <a href="#">더보기</a>
            </div>
        </article>
    </div>
</section>

02. style(css) 설정하기 : <style>

         /* fonts */
    @import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
 
    .gmarket {
        font-family: 'GmarketSans';  /* 폰트 지정 */
        font-weight: 300;    /* 폰트 두께 설정 */
    }
 
    /* reset */
    * {
        margin: 0;     /* 기본 브라우저의 빈 공간 없애기 */
        padding: 0;
    }
    body {
        background-color: #FDF3EF;
    }
    a {
        text-decoration: none;    /* 링크 글자의 기본 파랑색 없애고 검정으로 바꿈 */
        color: #000;
    }
    img {
        width: 100%;    /* 이미지 비율 */
    }
    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;   /* 기본 글자 두께가 두껍기 때문에 보통 굵기로 바꿈 */
    }
 
    /* common */  /* 공통이라는 것은 다른 작업에서도 사용할 것임을 알리는 것 */
    .container {
        width: 1160px;    /* 내용이 들어있는 컨테이너 박스의 너비 설정 */
        padding: 0 20px;
        margin: 0 auto;    /* 가운데 정렬 */
        min-width: 1160;
    }
    .section {
        padding: 120px 0;
    }
    .section > h2 {        /*   >  바로 밑에 있는 자식을 선택 */
        font-size: 50px;
        line-height: 1;   /* 줄간격 설정 */
        text-align: center;   /* 글자 중앙 정렬 */
        margin-bottom: 20px;
    }
    .section > p {
        font-size: 20px;
        font-weight: 500;
        color: #666;
        text-align: center;
        margin-bottom: 70px;
    }
 
    /* textType 03 */
    .text__inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .text__box {
        background-color: #fff;
        width: 32%;
        padding: 30px;
        box-sizing: border-box;
        border-radius: 10px;
    }
    .text__box:hover {
        background-color: #fff8cd;
    }
    .text__box .desc {
        font-size: 18px;
        color: #555;
        line-height: 1.2;
        padding-bottom: 20px;
        border-bottom: 1px dashed #d9d9d9;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 9;   /* clamp 줄바꿈 9줄 이상 되면 ... 으로 바뀜 - 검색해서 사용 */
        -webkit-box-orient: vertical;
    }
    .text__info {
        margin-top: 20px;
        display: flex;
        padding-bottom: 20px;
        box-sizing: border-box;
        margin-bottom: 20px;
        border-bottom: 1px dashed #d9d9d9;
    
    }
    .text__info img{
        width: 60px;
        padding: 0 10px 0 0;
    }
    .text__info .user {
        display: inline;
    }
    .text__info .user h3 {
        font-size: 22px;
        padding: 0 0 0 5px;
    }
    .text__info .user h3 > span {
        font-size: 14px;
        color: #666;
    }
    .text__info .user h4 {
        font-size: 22px;
    }
    .text__box .more {
        width: 120px;
        height: 26px;
        background-color: #FF753D;
        border-radius: 50px;
        text-align: center;
        line-height: 26px;
    }
    .text__box .more a {
        font-size: 14px;
        font-weight: 500;
        color: #fff;
    }

03. 결과보기

☛원본 사이트
새로운 창으로 열기

☛ 원본 소스 보기

728x90

'CSS > Layout_Site' 카테고리의 다른 글

텍스트 유형 (3) (2)	2022.09.01
텍스트 유형 (2) (2)	2022.09.01
이미지 유형 (3) (2)	2022.08.22
이미지 유형 (2) (2)	2022.08.18
이미지 유형 (1) (4)	2022.08.17

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

깜냥깜냥🐾코딩 혜윰

텍스트 유형 (1)

⭐️ 텍스트 유형 01 ⭐️

01. 레이아웃 구상하기

02. 상자(div) 만들기 : <body>

02. style(css) 설정하기 : <style>

03. 결과보기

'CSS > Layout_Site' 카테고리의 다른 글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<section id="textType 01" class="text__wrap nexon section">
	<h2>텍스트 유형 01</h2>
	<p>음악 플레이어 아이콘 설명서</p>
	<div class="text__inner container">
	<article class="text">
	<figure class="text__header">
	<img src="img/text_bg01_icon01.png" alt="라이브러리 아이콘">
	</figure>
	<div class="text__box">
	<h3 class="tit">라이브러리</h3>
	<p class="desc">
	아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 메뉴로 이동/ 설정을 완료하십시오. 아이콘을 길게 누르면 설명 상자가 나옵니다.
	</p>
	<a href="#">더보기</a>
	</div>
	</article>
	<article class="text">
	<figure class="text__header">
	<img src="img/text_bg01_icon02.png" alt="앨범 아이콘">
	</figure>
	<div class="text__box">
	<h3 class="tit">앨범</h3>
	<p class="desc">
	아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 메뉴로 이동/ 설정을 완료하십시오. 아이콘을 길게 누르면 설명 상자가 나옵니다.
	</p>
	<a href="#">더보기</a>
	</div>
	</article>
	<article class="text">
	<figure class="text__header">
	<img src="img/text_bg01_icon03.png" alt="아티스트 아이콘">
	</figure>
	<div class="text__box">
	<h3 class="tit">아티스트</h3>
	<p class="desc">
	아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 메뉴로 이동/ 설정을 완료하십시오. 아이콘을 길게 누르면 설명 상자가 나옵니다.
	</p>
	<a href="#">더보기</a>
	</div>
	</article>
	<article class="text">
	<figure class="text__header">
	<img src="img/text_bg01_icon04.png" alt="반복 듣기 아이콘">
	</figure>
	<div class="text__box">
	<h3 class="tit">반복 듣기</h3>
	<p class="desc">
	아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 메뉴로 이동/ 설정을 완료하십시오. 아이콘을 길게 누르면 설명 상자가 나옵니다.
	</p>
	<a href="#">더보기</a>
	</div>
	</article>
	<article class="text">
	<figure class="text__header">
	<img src="img/text_bg01_icon05.png" alt="섞어 듣기 아이콘">
	</figure>
	<div class="text__box">
	<h3 class="tit">섞어 듣기</h3>
	<p class="desc">
	아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 메뉴로 이동/ 설정을 완료하십시오. 아이콘을 길게 누르면 설명 상자가 나옵니다.
	</p>
	<a href="#">더보기</a>
	</div>
	</article>
	<article class="text">
	<figure class="text__header">
	<img src="img/text_bg01_icon06.png" alt="옵션 선택 아이콘">
	</figure>
	<div class="text__box">
	<h3 class="tit">옵션 선택</h3>
	<p class="desc">
	아이콘을 누르면 화면이 바뀝니다. 바뀐 화면에서 원하는 메뉴로 이동/ 설정을 완료하십시오. 아이콘을 길게 누르면 설명 상자가 나옵니다.
	</p>
	<a href="#">더보기</a>
	</div>
	</article>
	</div>
	</section>

	/* fonts */
	@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');

	.gmarket {
	font-family: 'GmarketSans'; /* 폰트 지정 */
	font-weight: 300; /* 폰트 두께 설정 */
	}

	/* reset */
	* {
	margin: 0; /* 기본 브라우저의 빈 공간 없애기 */
	padding: 0;
	}
	body {
	background-color: #FDF3EF;
	}
	a {
	text-decoration: none; /* 링크 글자의 기본 파랑색 없애고 검정으로 바꿈 */
	color: #000;
	}
	img {
	width: 100%; /* 이미지 비율 */
	}
	h1, h2, h3, h4, h5, h6 {
	font-weight: normal; /* 기본 글자 두께가 두껍기 때문에 보통 굵기로 바꿈 */
	}

	/* common / / 공통이라는 것은 다른 작업에서도 사용할 것임을 알리는 것 */
	.container {
	width: 1160px; /* 내용이 들어있는 컨테이너 박스의 너비 설정 */
	padding: 0 20px;
	margin: 0 auto; /* 가운데 정렬 */
	min-width: 1160;
	}
	.section {
	padding: 120px 0;
	}
	.section > h2 { /* > 바로 밑에 있는 자식을 선택 */
	font-size: 50px;
	line-height: 1; /* 줄간격 설정 */
	text-align: center; /* 글자 중앙 정렬 */
	margin-bottom: 20px;
	}
	.section > p {
	font-size: 20px;
	font-weight: 500;
	color: #666;
	text-align: center;
	margin-bottom: 70px;
	}

	/* textType 03 */
	.text__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	}
	.text__box {
	background-color: #fff;
	width: 32%;
	padding: 30px;
	box-sizing: border-box;
	border-radius: 10px;
	}
	.text__box:hover {
	background-color: #fff8cd;
	}
	.text__box .desc {
	font-size: 18px;
	color: #555;
	line-height: 1.2;
	padding-bottom: 20px;
	border-bottom: 1px dashed #d9d9d9;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 9; /* clamp 줄바꿈 9줄 이상 되면 ... 으로 바뀜 - 검색해서 사용 */
	-webkit-box-orient: vertical;
	}
	.text__info {
	margin-top: 20px;
	display: flex;
	padding-bottom: 20px;
	box-sizing: border-box;
	margin-bottom: 20px;
	border-bottom: 1px dashed #d9d9d9;

	}
	.text__info img{
	width: 60px;
	padding: 0 10px 0 0;
	}
	.text__info .user {
	display: inline;
	}
	.text__info .user h3 {
	font-size: 22px;
	padding: 0 0 0 5px;
	}
	.text__info .user h3 > span {
	font-size: 14px;
	color: #666;
	}
	.text__info .user h4 {
	font-size: 22px;
	}
	.text__box .more {
	width: 120px;
	height: 26px;
	background-color: #FF753D;
	border-radius: 50px;
	text-align: center;
	line-height: 26px;
	}
	.text__box .more a {
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	}

텍스트 유형 (1)

⭐️ 텍스트 유형 01 ⭐️

01. 레이아웃 구상하기

02. 상자(div) 만들기 : <body>

02. style(css) 설정하기 : <style>

03. 결과보기

'CSS > Layout_Site' 카테고리의 다른 글

관련글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역