[html/css] 이미지텍스트 타입 웹페이지 만들기

이미지텍스트 타입 웹페이지 만들기

이미지와 텍스트가 함께 들어간 웹페이지를 만들어 보았습니다.

 

완성화면

소스링크

https://github.com/aimeekwon/web2023/blob/main/site/imgtextType/imgtextType01.html

GitHub - aimeekwon/web2023: 수업시간 예제

 

작업순서

1. FIGMA로 레이아웃 만들기(컨텐츠 미리 준비해놓기)

2. VSCODE에서 코딩하기

 

 

1) FIGMA로 레이아웃 만들기

레이아웃 디자인을 할 때는 여백, 줄간격, 폰트크기, 이미지크기 등을 명확하고 일관성 있게 지정합니다.

 

 

2) VSCODE에서 코딩하기

 

CSS : 먼저 기본세팅css와 공통css를 가져옵니다.

/* reset */
* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: #000;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
}
img {
    vertical-align: top;
    width: 100%;
}
.blind {
    position:absolute;
    clip:rect(0 0 0 0);
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden;
}
.mt0 {margin-top: 0!important;}
.mt10 {margin-top: 10px!important;}
.mt20 {margin-top: 20px!important;}
.mt30 {margin-top: 30px!important;}
.mt40 {margin-top: 40px!important;}
.mt50 {margin-top: 50px!important;}
.mt60 {margin-top: 60px!important;}
.mt70 {margin-top: 70px!important;}
.mb10{margin-bottom: 10px!important;}
.mb20{margin-bottom: 20px!important;}
.mb30{margin-bottom: 30px!important;}
.mb40{margin-bottom: 40px!important;}
.mb50{margin-bottom: 50px!important;}
.mb60{margin-bottom: 60px!important;}
.mb70{margin-bottom: 70px!important;}

/* common */
.container {
    width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
    /* background-color: rgba(0,0,0,0.1); */
}
.nexon {
    font-family: 'NexonLv1Gothic';
    font-weight: 400;
}
.section {
    padding: 120px 0;
}
.section.center {
    text-align: center;
}
.section__small {
    font-size: 14px;
    border-radius: 50px;
    background-color: #0c3934;
    color: #fff;
    padding: 1px 23px;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: inline-block;
}
.section h2 {
    font-size: 50px;
    /* font-weight: 400; */
    margin-bottom: 30px;
    line-height: 1;
}

.section p {
    font-size: 22px;
    color: #666;
    margin-bottom: 70px;
    font-weight: 300;
}
    
.section_desc {
    font-size: 22px;
    color: #666;
    margin-bottom: 70px;
    font-weight: 300;
    line-height: 1.5;
}

 

HTML 

- body에서 구조를 작성합니다.

- 컨테이너 안에 컨텐츠를 작성하여 전체 웹페이지와 여백을 일관성 있게 작업해 줍니다.

- article이라는 시멘틱태그로 텍스트와 이미지 부분을 3분할 합니다.

- 텍스트타입 첫번째 부분에만 따로 class명을 주어 분별 적용할 준비를 합니다.

- 텍스트타입을 아이콘 / 제목 / 부제목 / 내용 부분으로 선택자를 따로 사용하여 작성하여 줍니다.

 

- 이미지타입은 figure태그와 img태그를 사용하여 작성합니다.

<section class="imgtext__wrap section center nexon">
    <div class="container">
        <div class="imgtext__inner">
            <article class="imgtext__text">
                <span class="notice">NOTICE</span>
                <h2>플랜테리어<br>: 식물과 인테리어</h2>
                <p class="desc">플랜테리어란 식물 ‘플랜트’와 실내장식 ‘인테리어’의 
                    합성어입니다. </p>
                <p>
                    소품으로 식물이나 화분을 접목해 포인트를 주는 인테
                    리어를 의미한다. 도시에서 자연친화적인 삶을 추구하
                    는 것이 하나의 유행인 요즘, 플랜테리어 문화가 트렌
                    드로 자리잡고 있다. 희귀식물이나 이색적인 화분을 활
                    용하면 자신의 감성 라이프에 최적화된 공간을 연출할 수 있다.
                    식물은 인테리어 소품으로 미적인 만족감을 주기도 하
                    지만 공기정화 역할도 한다. 인체에 해로운 오염 물질이
                    있는 밀폐된 공간에 식물을 넣어두면 실내 공기오염 물질
                    들이 제거된다. 특히 아레카야자, 관음죽, 대나무야자, 
                    인도고무나무, 레몬라임, 여인초 등은 공기
                </p>
            </article>
            <article class="imgtext__img">
                <figure>
                    <img src="../asset/img/imgtextType01_01.jpg" alt="플랜테리어 이미지">
                </figure>
            </article>
            <article class="imgtext__img">
                <figure>
                    <img src="../asset/img/imgtextType01_02.jpg" alt="플랜테리어 이미지">
                </figure>
            </article>
        </div>
    </div>
</section>

 

figure태그

사진, 도표, 오디오, 비디오 등을 담는 컨테이너 역할. 책, 잡지, 이미지, 차트 등이 나올 때 이를 설명하는 문구와 소개됨 요소에서 한번만 사용 될수 있음

CSS 

/* imgtext */
.imgtext__wrap {
    background-color: #fff;    
}
.imgtext__inner {
    display: flex;
    justify-content: space-between;
}
.imgtext__inner article {
    width: 32.3333%;
    /* height: 500px; */
    /* background-color: #f8f8f8; */
    overflow: hidden;
}

.imgtext__text h2 {
    text-align: left;
    line-height: 1.2!important;
    margin-bottom: 25px;
}
.imgtext__text {
    text-align: left;
    line-height: 1.5;
}
.imgtext__text > p {
    font-size: 16px;
}
.imgtext__text .desc {
    margin-bottom: 25px;
}
.notice {
    background-color: #0C3934;
    width: 100px;
    height: 16px;
    text-align: center;
    border-radius: 10px 10px 10px 10px;
    display: inline-block;
    color: #fff;
    line-height: 16px;
    padding: 1px;
    margin-bottom: 20px;
}