목표 시안
| 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>
</body>
</html>Font Awesome Docs
Official documentation for Font Awesome.
docs.fontawesome.com
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
box-shadow - CSS | MDN
The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.
developer.mozilla.org
| style.css
* {
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;
}
/* 미디어 쿼리 사용 */
@media (min-width: 1200px) {
/* 화면에 크기가 최소 1200px 커야 한다. */
.inner {
max-width: 1200px;
}
}
728x90
'HTML CSS' 카테고리의 다른 글
| (HTTP기초지식/사전기반) 9.웹 클라이언트와 서버의 통신 (0) | 2025.06.17 |
|---|---|
| 웹 페이지 만들어 보기 (이미지 섹션 만들기 -3) (0) | 2025.06.07 |
| 웹 페이지 만들어 보기 ( 헤더 작업 하기 -2 ) (0) | 2025.06.07 |
| 웹 페이지 만들어 보기 (패키지 구조 및 기본 설정 -1) (1) | 2025.06.07 |
| CSS 미디어 쿼리 (Media Query) - 23 (1) | 2025.06.07 |