이미지 텍스트 유형 (1)

728x90

⭐️ 이미지 텍스트 유형 01 ⭐️

01. 레이아웃 구상하기

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

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

     <section id="imgTextType" class="imgText__wrap nexon section gray">
    <h2 class="blind">유용한 사이트 살펴보기</h2>
    <div class="imgText__inner container">
        <div class="imgText__txt">
            <span>이미지 텍스트 유형 01</span>
            <h3>유용한 사이트 살펴보기</h3>
            <p>웹 디자이너, 웹 퍼블리셔, 프론트 앤드 개발자를 위한 유용한 사이트 입니다.</p>
            <ul>
                <li><a href="/">튜토리얼 사이트</a></li>
                <li><a href="/">래퍼런스 사이트</a></li>
                <li><a href="/">웹 폰트 사이트</a></li>
                <li><a href="/">CSS 사이트</a></li>
                <li><a href="/">WebGL 사이트</a></li>
                <li><a href="/">Youtube 사이트</a></li>
            </ul>
        </div>
        <div class="imgText__img img1">
            <a href="/">레퍼런스 사이트</a>
        </div>
        <div class="imgText__img img2">
            <a href="/" class="blue">튜토리얼 사이트</a>
        </div>
    </div>
</section>

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

     /* fonts */
    @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
 
    .nexon {
        font-family: 'NexonLv1Gothic';  /* 폰트 지정 */
        font-weight: 400;    /* 폰트 두께 설정 */
    }
 
    /* reset */
    * {
        margin: 0;     /* 기본 브라우저의 빈 공간 없애기 */
        padding: 0;
    }
    a {
        text-decoration: none;    /* 링크 글자의 기본 파랑색 없애고 검정으로 바꿈 */
        color: #000;
    }
    img {
        width: 100%;    /* 이미지 비율 */
    }
    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;   /* 기본 글자 두께가 두껍기 때문에 보통 굵기로 바꿈 */
    }
    li {
        list-style: none;   /* 목록 앞에 기본으로 생기는 점 없애기 */
    }
    /* blind */
    .blind {            /* 안 보이게 숨기기 */
        position: absolute;
        clip: rect(0 0 0 0);
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
    }
 
    /* 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: 300;
        color: #666;
        text-align: center;
        margin-bottom: 70px;
    }
    .gray {
        background-color: #f5f5f5;
    }
 
    /* imgTextType */
    .imgText__inner {
        display: flex;
        justify-content: space-between;
    }
    .imgText__inner > div {
        width: 32%;
        height: 500px;
    }
    .imgText__txt span {
        font-size: 16px;
        color: #666;
        text-decoration: underline;
        text-underline-position: under;     /* 기본 밑줄보다 글자에 가까이 붙어있도록 */
        margin-bottom: 20px;
        display: block;     /* span의 기본 성질인 행을 열의 형태로 바꿔줌 */
    }
    .imgText__txt h3 {
        font-size: 50px;
        font-weight: 300;
        word-break: keep-all;   /* 어절 단위(띄어쓰기 단위)로 줄바꿈이 되도록 함 */
        line-height: 1.4;
        margin-bottom: 20px;
    }
    .imgText__txt p {
        font-size: 18px;
        font-weight: 300;
        line-height: 1.5;
        color: #666;
        margin-bottom: 10px;
    }
    .imgText__txt ul {
        font-size: 18px;
        font-weight: 300;
        line-height: 1.6;
    }
    .imgText__txt ul li {
        position: relative;
        padding-left: 20px;
    }
    .imgText__txt li {
        color: #666;
    }
    .imgText__txt li::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        position: absolute;
        left: 5px;
        top: 9px;
        background: #666;
    }
    .imgText__img {
        border-radius: 10px;
        position: relative;
    }
    .imgText__img a {
        position: absolute;
        left: 30px;
        bottom: 30px;
        background-color: #7c2b39;
        color: #fff;
        font-size: 18px;
        padding: 10px 30px;
        border-radius: 30px;
        display: inline-block;
    }
    .imgText__img a.blue {
        background-color: #2B387C;
    }
    .imgText__img.img1 {
        background: url(img/imgText_bg01.jpg) no-repeat center;     /* 기본적으로 설정되어 있는 반복 채움을 없애주고 가운데 정렬 */
    }
    .imgText__img.img2 {
        background: url(img/imgText_bg02.jpg) no-repeat center;
    }

03. 결과보기

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

☛ 원본 소스 보기

728x90

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

슬라이드 유형 (1) (2)	2022.09.06
헤더 유형 (1) (2)	2022.09.02
텍스트 유형 (3) (2)	2022.09.01
텍스트 유형 (2) (2)	2022.09.01
텍스트 유형 (1) (2)	2022.09.01

내 블로그 - 관리자 홈 전환	`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="imgTextType" class="imgText__wrap nexon section gray">
	<h2 class="blind">유용한 사이트 살펴보기</h2>
	<div class="imgText__inner container">
	<div class="imgText__txt">
	<span>이미지 텍스트 유형 01</span>
	<h3>유용한 사이트 살펴보기</h3>
	<p>웹 디자이너, 웹 퍼블리셔, 프론트 앤드 개발자를 위한 유용한 사이트 입니다.</p>
	<ul>
	<li><a href="/">튜토리얼 사이트</a></li>
	<li><a href="/">래퍼런스 사이트</a></li>
	<li><a href="/">웹 폰트 사이트</a></li>
	<li><a href="/">CSS 사이트</a></li>
	<li><a href="/">WebGL 사이트</a></li>
	<li><a href="/">Youtube 사이트</a></li>
	</ul>
	</div>
	<div class="imgText__img img1">
	<a href="/">레퍼런스 사이트</a>
	</div>
	<div class="imgText__img img2">
	<a href="/" class="blue">튜토리얼 사이트</a>
	</div>
	</div>
	</section>

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

	.nexon {
	font-family: 'NexonLv1Gothic'; /* 폰트 지정 */
	font-weight: 400; /* 폰트 두께 설정 */
	}

	/* reset */
	* {
	margin: 0; /* 기본 브라우저의 빈 공간 없애기 */
	padding: 0;
	}
	a {
	text-decoration: none; /* 링크 글자의 기본 파랑색 없애고 검정으로 바꿈 */
	color: #000;
	}
	img {
	width: 100%; /* 이미지 비율 */
	}
	h1, h2, h3, h4, h5, h6 {
	font-weight: normal; /* 기본 글자 두께가 두껍기 때문에 보통 굵기로 바꿈 */
	}
	li {
	list-style: none; /* 목록 앞에 기본으로 생기는 점 없애기 */
	}
	/* blind */
	.blind { /* 안 보이게 숨기기 */
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	}

	/* 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: 300;
	color: #666;
	text-align: center;
	margin-bottom: 70px;
	}
	.gray {
	background-color: #f5f5f5;
	}

	/* imgTextType */
	.imgText__inner {
	display: flex;
	justify-content: space-between;
	}
	.imgText__inner > div {
	width: 32%;
	height: 500px;
	}
	.imgText__txt span {
	font-size: 16px;
	color: #666;
	text-decoration: underline;
	text-underline-position: under; /* 기본 밑줄보다 글자에 가까이 붙어있도록 */
	margin-bottom: 20px;
	display: block; /* span의 기본 성질인 행을 열의 형태로 바꿔줌 */
	}
	.imgText__txt h3 {
	font-size: 50px;
	font-weight: 300;
	word-break: keep-all; /* 어절 단위(띄어쓰기 단위)로 줄바꿈이 되도록 함 */
	line-height: 1.4;
	margin-bottom: 20px;
	}
	.imgText__txt p {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	color: #666;
	margin-bottom: 10px;
	}
	.imgText__txt ul {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.6;
	}
	.imgText__txt ul li {
	position: relative;
	padding-left: 20px;
	}
	.imgText__txt li {
	color: #666;
	}
	.imgText__txt li::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	position: absolute;
	left: 5px;
	top: 9px;
	background: #666;
	}
	.imgText__img {
	border-radius: 10px;
	position: relative;
	}
	.imgText__img a {
	position: absolute;
	left: 30px;
	bottom: 30px;
	background-color: #7c2b39;
	color: #fff;
	font-size: 18px;
	padding: 10px 30px;
	border-radius: 30px;
	display: inline-block;
	}
	.imgText__img a.blue {
	background-color: #2B387C;
	}
	.imgText__img.img1 {
	background: url(img/imgText_bg01.jpg) no-repeat center; /* 기본적으로 설정되어 있는 반복 채움을 없애주고 가운데 정렬 */
	}
	.imgText__img.img2 {
	background: url(img/imgText_bg02.jpg) no-repeat center;
	}

이미지 텍스트 유형 (1)

⭐️ 이미지 텍스트 유형 01 ⭐️

01. 레이아웃 구상하기

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

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

03. 결과보기

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

관련글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역