|목표 시안
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="텐코쇼핑" />
<meta name="description" content="온라인 강의 리스트" />
<meta name="keywords" content="Lecture" />
<meta name="author" content="Dev Kim" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<!-- 일반적인 fabicon 설정 -->
<!-- 1. rel 속성 : <link> 태그에서 사용되며, 현재 문서와 연결된 리소스 간의 관계를 정의합니다. -->
<!-- 2. xx.ico : 파비콘으로 주로 사용되는 이미지 파일 형식. -->
<link rel="icon" href="img/tencoding_fabicon.png" />
<!-- 아이폰용 fabicon 설정 -->
<link rel="apple-touch-icon" href="img/tencoding_fabicon.png" />
<!-- 인터넷 익스플러용 fabicon 설정-->
<!-- <link rel="short icon" type="image/x-icon" href="img/fun-coding.ico" /> -->
<!-- CSS Reset(1), style.css, 아이콘 폰트, 웹페이지 사용 폰트 -->
<link rel="stylesheet" href="css/nomalize.css" />
<link rel="stylesheet" href="css/styles.css" />
<!-- 폰트는 각 사용자 PC에 해당 폰트가 설치 되어 있어야 함 -->
<!-- 웹 폰트는 각 사용자의 PC에 폰트가 없어도 웹 브라우저에서 폰트를
다운로드 받아서 웹 페이지가 표시 됨 -->
<!-- 첫 번째와 두 번째 <link> 태그: rel="preconnect"는 브라우저가 fonts.googleapis.com와 fonts.gstatic.com
도메인에 미리 연결을 준비하도록 하여 폰트 로딩 속도를 최적화합니다. -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;0,700;0,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
rel="stylesheet"
/>
<!-- font awsome 이메일 인증 후 CND 링크 생성해서 -- 아이콘 검색, 클래스 명 확인 -> 사용 -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<!-- 레이아웃 틀 설정 -->
<!-- 항상 화면을 100% 로 사용하면, 와이드 스크린에서 웹페이지가 기대와 달리 보일 수 있음 -->
<!-- header 에 상단 메뉴까지 넣을 예정 -->
<!-- 전체 layout 는 시멘틱 태그로 구성하고,
각 layout component 는 width를 100% 로 하되,
해당 component 에 들어가는 요소들은 특정 가로 사이즈 이상에서는 특정 사이즈로 가운데에 정렬되도록,
inner 클래스로 감싸주기로 함
각 하부 요소 배치를 위해서는 각 layout 별 container 로 정의해주기로 함
-->
<title>텐코딩온라인강의</title>
</head>
<body>
<header>
<div class="inner">
<!-- 우리 설정한 css 네이밍은 충돌을 피하기 위해서 -- 하이픈 두개를 사용한다 -->
<div class="head--container">
<div class="head--brand"><a href="https://naver.com">텐코딩</a></div>
<div class="head--brand">
<a href="https://naver.com">텐코딩 블로그</a>
</div>
</div>
</div>
</header>
<!-- 메인 이미지 섹션 -->
<!-- 화면에 100% 크기를 차지하게 설정할 예정 -->
<section class="main">
<div class="main--container">
<div class="inner">
<div class="title--container">
<div class="title">주도적인 학습에 집중합니다</div>
<div class="message">
스스로 문제를 해결하는 능력<br />
찾아서 학습 하는 능력 <br />
스스로 재미를 찾아 내는 능력 <br />
</div>
</div>
</div>
</div>
</section>
<!-- 스킬 섹션 영역 -->
<section>
<div class="inner">
<div class="skill--container">
<div class="skill">
<i class="fa-brands fa-java skill--icon"></i>
<div class="skill--title">
<div class="skill--name">백엔드</div>
<div class="skill--usage">ERP/WEB/APP</div>
</div>
</div>
<div class="skill">
<i class="fa-solid fa-mobile skill--icon"></i>
<div class="skill--title">
<div class="skill--name">백엔드</div>
<div class="skill--usage">ERP/WEB/APP</div>
</div>
</div>
<div class="skill">
<i class="fa-solid fa-database skill--icon"></i>
<div class="skill--title">
<div class="skill--name">백엔드</div>
<div class="skill--usage">ERP/WEB/APP</div>
</div>
</div>
<div class="skill">
<i class="fa-brands fa-python skill--icon"></i>
<div class="skill--title">
<div class="skill--name">백엔드</div>
<div class="skill--usage">ERP/WEB/APP</div>
</div>
</div>
</div>
</div>
</section>
<!-- 로드맵 섹션 영역 1 (카드레이아웃 만들어 보기) -->
<section>
<div class="inner">
<!-- wrap을 감싸기 위한 div -->
<div class="roadmap--container">
<div class="roadmap--title--container">
<div class="roadmap--title">블로그 및 서적</div>
<div class="arrow--container">
<i class="fas fa-chevron-circle-left slide--prev"></i>
<i class="fas fa-chevron-circle-right slide--next"></i>
</div>
</div>
</div>
<!-- HTML5 에서는 태그에 확장처리를 위한 속성으로 data-* 속성 추가
data-변수이름=변수값 으로 정의하고, JS 등에서 활용 가능 -->
<ul class="class--list" data-position="0">
<li class="class--card">
<img
src="https://picsum.photos/id/10/300/300"
alt="텐코딩 블로그"
class="class--image"
/>
<a href="https://blog.naver.com/devnote1" target="_blank">
<div class="class--container">
<div class="class--skill">
<div class="class--type">학습방법</div>
<div class="class--format">블로그</div>
</div>
<div class="class--desc">
<div class="class--title">IT는 배우는 방법을 익혀야합니다</div>
<div class="class--detail">IT를 배우는 전략</div>
</div>
</div>
</a>
</li>
<li class="class--card">
<img
src="https://picsum.photos/id/20/300/300"
alt="텐코딩 블로그"
class="class--image"
/>
<a href="https://blog.naver.com/devnote1" target="_blank">
<div class="class--container">
<div class="class--skill">
<div class="class--type">출판서적</div>
<div class="class--format">서적</div>
</div>
<div class="class--desc">
<div class="class--title">비전공자를 위한 파이썬</div>
<div class="class--detail">파이썬 프로그래밍</div>
</div>
</div>
</a>
</li>
<li class="class--card">
<img
src="https://picsum.photos/id/30/300/300"
alt="텐코딩 블로그"
class="class--image"
/>
<a href="https://blog.naver.com/devnote1" target="_blank">
<div class="class--container">
<div class="class--skill">
<div class="class--type">학습방법</div>
<div class="class--format">블로그</div>
</div>
<div class="class--desc">
<div class="class--title">객체지향 프로그래밍 자바</div>
<div class="class--detail">SOLID 원칙이란</div>
</div>
</div>
</a>
</li>
<li class="class--card">
<img
src="https://picsum.photos/id/40/300/300"
alt="텐코딩 블로그"
class="class--image"
/>
<a href="https://blog.naver.com/devnote1" target="_blank">
<div class="class--container">
<div class="class--skill">
<div class="class--type">출판서적</div>
<div class="class--format">서적</div>
</div>
<div class="class--desc">
<div class="class--title">데이터 분석 및 DBA</div>
<div class="class--detail">관계형 데이터베이스</div>
</div>
</div>
</a>
</li>
<li class="class--card">
<img
src="https://picsum.photos/id/50/300/300"
alt="텐코딩 블로그"
class="class--image"
/>
<a href="https://blog.naver.com/devnote1" target="_blank">
<div class="class--container">
<div class="class--skill">
<div class="class--type">학습방법</div>
<div class="class--format">블로그</div>
</div>
<div class="class--desc">
<div class="class--title">플러터 프레임워크</div>
<div class="class--detail">크로스 플랫폼이란 뭘까?</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</section>
</body>
</html>
|작업 중
* {
box-sizing: border-box;
}
/* a 링크 태그 스타일 초기화 */
/* a 태그에 모든 요소를 초기화 한다. */
a {
all: unset;
}
a:link {
text-decoration: none;
color: #3f464d;
}
a:visited {
text-decoration: none;
color: #3f464d;
}
a:active {
text-decoration: none;
color: #3f464d;
}
a:hover {
text-decoration: none;
color: #3f464d;
}
.inner {
/* 가로 사이즈가 1200px 넘는 해상도에서는 미디어 쿼리 max-width 설정을 할 예정 */
width: 100%;
/* align-items 등으로 수직 가운데 정렬을 위해 미리 height 크기를 설정한다 */
height: 100%;
/* 가운데 정렬 */
margin: 0 auto;
/* 좌우 padding 값을 주어 좌우에 딱 붙지 않도록 설정 하기 위함 */
padding: 0 2rem;
/* 넘치는 영역에 대해서 표시가 안되도록 설정을 함 */
overflow: hidden;
}
header {
width: 100%;
height: 60px;
background-color: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.head--container {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
/* 자손선택자(공백 중요!) head--container 안에 있는 모든 태그들
* 중에 class 값 .head--brand 선택 바로 밑에 자식 뿐만 아니라 더 깊은 자손도 포함이 된다.
*/
.head--container .head--brand {
font-weight: bold;
/* 16px * 1.2 = 19.2px */
font-size: 1.2rem;
}
.head--container .head--brand a:hover {
color: #2186c3;
cursor: pointer;
}
section {
width: 100%;
background-color: #fff;
}
.main {
height: 360px;
background-image: url(https://cdn.pixabay.com/photo/2019/04/26/07/14/store-4156934_1280.png);
background-repeat: no-repeat;
/* x축, y축 */
background-position: center 20%;
background-size: cover;
z-index: 1;
}
.main--container {
width: 100%;
height: 100%;
background-color: rgb(30, 40, 80);
opacity: 0.6;
z-index: 2;
}
.title--container {
margin-top: 100px;
}
.title {
font-size: 2rem;
font-weight: bold;
color: #fff;
margin-bottom: 0.8rem;
}
.message {
font-size: 1.4rem;
font-weight: normal;
color: #fff;
line-height: 2rem;
}
.skill--container {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
/* 상하, 좌우 */
padding: 1rem 0;
/* flex-wrap 일 대 다음줄로 넘어 갔을 경우 여백 */
gap: 10px;
}
.skill {
width: 22%;
height: 100%;
background-color:#fff;
display: flex;
border: 1px solid rgb(212, 211, 211);
border-radius: 10px;
padding: 0.5rem 1rem;
/* x, y, bluer-radius 색상*/
box-shadow: 10px 5px 5px rgba(25, 42, 70, 0.3);
min-width: 200px;
transition: 0.3s;
}
.skill:hover {
transform: translate(0, -3px);
}
.skill--icon {
font-size: 2rem;
margin: 0 10px;
color: #2186c3;
}
.skill--title {
display: flex;
flex-direction: column;
align-content: center;
}
.skill--name {
font-size: 0.9rem;
font-weight: 400;
margin-bottom: 0.2rem;
color: #545e6f;
}
.skill--usage {
font-size: 0.8rem;
color: #545e6f;
}
.roadmap--container {
width: 100%;
margin-top: 2rem;
}
.roadmap--title--container {
display: flex;
justify-content: space-between;
align-items: center;
}
.roadmap--title {
font-size: 1.3rem;
font-weight: bold;
color: #545e6f;
}
.slide--prev {
font-size: 2rem;
cursor: pointer;
color: #cfd8dc;
}
.slide--next {
font-size: 2rem;
cursor: pointer;
color: #515455;
}
/* ul 태그 스타일 초기화 */
ul {
list-style: none;
}
/* -------- */
/* 직접 만들어 보기 */
/* -------- */
/* ul 태그 */
.class--list {
display: flex;
list-style: none;
padding: 1rem 0;
margin: 0;
}
/* li 태그 */
.class--card {
width: 240px;
/* box-shadow: 블럭에 그림자를 적용하는 CSS 기능
https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow
offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 10px 10px 10px -5px rgba(25, 42, 70, 0.2);
border-radius: 8px;
margin: 0 10px;
/* border: 1px solid gray; */
}
.class--image {
/* 사이즈가 큰 이미지를 작은 블럭 내에 넣을 때 호환성을 위해 max-width/max-height 를 사용해야 함 */
max-width: 240px;
/* border-radius: 블럭 모서리를 둥글게 하는 CSS 기능
top-left | top-right | bottom-right | bottom-left */
border-radius: 8px 8px 0 0;
}
.class--container {
width: 100%;
padding: 0.5rem 1rem 1rem 1rem;
}
.class--skill {
display: flex;
justify-content: space-between;
align-items: center;
}
.class--format {
font-size: 0.8rem;
color: #fff;
background-color: #0d47a1;
padding: 0.2rem;
}
.class--desc {
font-size: 0.8rem;
width: 100%;
margin-top: 1rem;
color: #545e6f;
padding: 0.2rem;
}
/* 미디어 쿼리 사용 */
@media (min-width: 1200px) {
/* 화면에 크기가 최소 1200px 커야 한다. */
.inner {
max-width: 1200px;
}
}728x90