728x90
반응형
Image Type
현재의 웹페이지에서 가장 흔하게 볼 수 있는 유형 중 하나를 꼽는다면 바로 이미지 타입입니다.
그렇다면 이 이미지 타입에서의 장점은 무엇이 있을까요?
크게 세 가지를 꼽자면 아래와 같습니다.
- 시각적인효과
이미지 유형 페이지는 다양한 이미지 유형에 대한 상세한 설명을 제공하여, 사용자들이 이미지 유형에 대한 이해도를 향상시킬 수 있습니다.
- 이미지 강조 및 강화
브랜드 개별의 이미지와 색을 통해 강조하고 기억에 남길 수 있습니다.
- 인지도와 기억력
텍스트보다 기억하기 쉽기 때문에 인지도를 향상시키고 사용자들에게 직관적이고 빠른 정보를 전달할 수 있습니다.
그래서 오늘은 위와 같은 이미지 유형 페이지를 만들어보려고 합니다.
레이아웃 및 디자인 정하기
저는 스몰토크를 할 수 있는 가볍고, 짧고, 재미있는 내용들로 구성된 페이지를 구상했습니다.
가장 간단한 이미지 유형입니다. 레이아웃과 디자인은 피그마로 작업해주었습니다!
image Type 부분
이미지 타입에 들어 갈 내용과 스타일 작성입니다.
스타일부분
.image__inner {
display: flex;
justify-content: space-between;
}
.image__inner .image {
width: 570px;
height: 370px;
background-color: #5e5e5e;
position: relative;
}
.image__body {
position: absolute;
left: 0;
bottom: 0;
color: #fff;
text-align: left;
padding: 30px;
}
.image__body .title {
font-size: 32px;
line-height: 1;
margin-bottom: 15px;
}
.image__body .desc {
margin-bottom: 15px;
line-height: 1.5;;
padding-right: 20%;
}
.image__body .btn {
color: fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 30px;
display: inline-block;
}내용 부분
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">"
</head>
<body>
<section class="image__wrap section center nexon">
<div class="container">
<h2 class="section__h2">1분 지식</h2>
<p class="section__desc">스몰토크를 위한 얇고도 넓은 지식</p>
<div class="image__inner">
<article class="image">
<figure clss="image__header">
<img src="../asset/image/imageType01_01.jpg" alt="얇고 넓은 지식">
</figure>
<div class="image__body">
<h3 class="title">얇고 넓은 지식</h3>
<p class="desc">이 지식에는 여러 분야의 다양한 지식들이 포함됩니다.
철학, 역사, 예술, 과학, 경제학의 얇은 맛을 알려드립니다.</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
<article class="image">
<figure clss="image__header">
<img src="../asset/image/imageType01_02.png" alt="스몰토크">
</figure>
<div class="image__body">
<h3 class="title">스몰토크</h3>
<p class="desc">낯선 사람들과 나누는
사소한 이야기에는 얇고 넓은 지식 만한 것이 없죠!</p>
<a href="#" class="btn">자세히보기</a>
</div>
</article>
</div>
</div>
</section>
</body>
</html>| CSS display 속성 | ||
| display : block | 블록 레벨 요소로 표시합니다. 이 속성을 사용하면 요소는 새로운 줄에서 시작하며, 가로폭 전체를 차지합니다. | |
| display : inline | 인라인 요소로 표시합니다. 이 속성을 사용하면 요소는 줄의 중간에 표시되며, 필요한 만큼만 가로폭을 차지합니다. | |
| display : inline-block | 소를 인라인 블록 요소로 표시합니다. 이 속성을 사용하면 요소는 줄의 중간에 표시되며, 가로폭과 높이를 지정할 수 있습니다. | |
| display : none | 요소를 표시하지 않습니다. 이 속성을 사용하면 요소가 사라지며, 페이지 레이아웃에서 공간도 차지하지 않습니다. | |
| display : flex | 요소를 플렉스 컨테이너로 표시합니다. 이 속성을 사용하면 요소가 플렉스 아이템이 되며, 플렉스 레이아웃을 사용할 수 있습니다. | |
| display : grid | 요소를 그리드 컨테이너로 표시합니다. 이 속성을 사용하면 요소가 그리드 아이템이 되며, 그리드 레이아웃을 사용할 수 있습니다. | |