👀 Full Screen 제작
👉 style.css file
/* 인코딩 문자 깨짐 방지 */
@charset "UTF-8";
/* 사용자가 설정한 문자 크기를 그대로 반영시키기 */
html {
font-size: 100%;
}
body {
color : #432; /* 모든 폰트색 지정 */
line-height: 2.0; /* 글씨에 대한 여백 */
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}◼ header
/* 로고 크기 및 여백 */
.logo {
/* 크기를 줄이고 위에 여백 생성 */
width: 210px;
margin-top: 14px;
}
/* nav 메뉴 장식 */
.main-nav {
/* 메뉴 수평 정렬, 불렛 제거, 대문자, 크기 증가, 위에 여백 생성 */
display: flex;
list-style-type: none;
text-transform: uppercase;
font-size: 1.25rem;
margin-top: 34px;
}
.main-nav li {
/* 각 li에 여백 생성 */
margin-left: 36px;
}
.main-nav a {
/* 메뉴 글씨색 */
color: #432;
font-weight: bolder;
}
.main-nav a:hover {
/* 메뉴에 마우스 오버했을 때 이 색으로 변경 */
color: #0bd;
}
/* 로고와 메뉴의 수평 정렬 */
.page-header {
/* 로고 옆으로 메뉴가 수평으로 정렬됨 */
display: flex;
justify-content: space-between; /* 로고와 메뉴가 각자 양 사이드로 붙음 */
}
/* 콘텐츠의 최대 출력 너비 설정 */
.wrapper {
max-width: 1100px; /* 최대 너비 */
margin: 0 auto; /* margin: 0 auto : 화면 사이즈를 줄여도 계속 가운데에 있도록 */
padding: 0 4%;
}◼ home
.home-content {
text-align: center; /* 텍스트를 화면 가운데 정렬 */
margin-top: 10%;
}
/* '.클래스 p'형태로 작성하는 것이 좋음
(p만 입력 시, 다른 코드와 합쳐졌을 때 충돌 가능성 높음) */
.home-content p {
font-size: 1.125rem;
margin: 10px 0 42px;
}
.page-title {
font-size: 5rem;
text-transform: uppercase;
font-weight: bolder;
}
/* 메뉴보기 버튼 */
.button {
background: #0bd;
padding : 15px 32px;
border-radius: 10px;
color: white;
font-size: 1.375rem;
font-weight: bolder;
}
/* 배경 이미지 */
#home {
background-image: url("../images/main-bg.jpg");
min-height: 100vh; /* 뷰 포트 기준의 높이로 설정(위에서부터 아래까지 꽉 참) */
}
.big-bg {
/* 배경이 전체를 덮고 가운데로 설정, 반복 X */
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}👉 full-screen.html
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- mete tag : metadate(정보에 대한 정보) 제공
화면에 표시되지는 않지만 검색 엔진/브라우저에 읽힘 -->
<meta charset="UTF-8">
<!-- IE 브라우저에서 최신 표준 모드를 선택하는 문서 모드 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 뷰 포트 : 화면 상의 화상 표시 영역. 너비를 디바이스에 맞춤. 기본 배율은 1.
데스크탑 화면과 모바일의 뷰 포트는 차이가 있기 때문(없을 경우, 반응형 웹 만들기 불가능) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1_full-screen</title>
<!-- 외부 스타일 시트 -->
<link href="../resources/css/style.css" rel="stylesheet" type="text/css">
<!-- favicon (Real Favicon Generator 활용) -->
<link rel="icon" type="image/x-icon" href="../resources/images/favicon.ico">
<!-- 리셋 CSS
브라우저별로 디폴트로 적용된 CSS(여백, 폰트 등)에 차이가 있으므로 브라우저 별로 다르게 보일 수 있어
리셋 CSS를 활용한다. -->
<link href="http://unpkg.com/ress/dist/ress.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="home" class="big-bg">
<header class="page-header wrapper">
<h1><a href="1_full-screen.html">
<img class="logo" src="../resources/images/logo.png" alt="HOME">
</a></h1>
<nav>
<ul class="main-nav">
<li><a href="2_column.html">News</a></li>
<li><a href="3_grid.html">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="home-content wrapper">
<h2 class="page-title">Full Screen Pratice</h2>
<p>
풀 스크린이란 이미지 또는 동영상을 메인으로 화면 전체에 출력하는
레이아웃입니다.
</p>
<a class="button" href="3_grid.html">메뉴 보기</a>
</div>
</div>
</body>
</html>👀 News 제작
👉 style.css file
/* news */
#news {
background-color: skyblue;
height: 270px; /* 높이 조절 */
margin-bottom: 40px; /* 아래에 여백 */
}
#news .page-title { /* 이 영역을 기준으로 가운데 정렬 */
text-align: center;
}
/* footer */
footer {
background-color: #432;
text-align: center;
padding: 26px 0; /* 내부적인 여백 */
}
footer p {
color: white;
}
/* news content */
/* 기사 부분 */
article {
/* width: 74%; */
/* 2-column에서 3-column으로 변경 시 width 조정 */
width: 55%;
order: 2; /* 정렬 순서 지정 */
}
/* 사이드 바 */
aside {
width: 22%;
order: 3; /* 정렬 순서 지정 */
}
/* 광고 배너 */
.ad {
/* 컬럼 순서 변경 - display : flex가 적용된 자식 요소에서 동작 */
order: 1; /* 정렬 순서 지정 */
}
/* 뉴스 컨텐츠 수평 정렬 및 여백 */
.news-content { /* 카테고리와 소개가 기사 부분의 오른쪽으로 위치 이동 */
display: flex;
justify-content: space-between; /* 서로 너무 붙어있으니 여백 추가 */
padding-bottom: 40px;
}
/* 기사 날짜 장식 */
.post-info {
position: relative;
padding-top: 4px;
padding-bottom: 40px;
}
.post-date {
background-color: #0bd;
border-radius: 50%;
width: 100px;
height: 100px;
color: #fff;
font-size: 1.625rem;
text-align: center;
/* post-info 기준 절대 위치 */
position: absolute;
top: 0;
padding-top: 10px;
}
.post-date span {
font-size: 1rem;
border-top: 1px rgba(255,255,255,0.5) soild; /* 날짜 아래에 얇은 선 */
padding-top: 6px;
display: block;
width: 60%;
margin: 0 auto; /* 양쪽으로 가운데 정렬 */
}
.post-title {
font-family: "나눔명조";
font-size: 2rem;
font-weight: normal;
}
.post-title,
.post-cat { /* 날짜에 가려진 기사제목과 카테고리의 위치를 조절 */
margin-left: 120px;
}
article img {
margin-bottom: 20px;
}
article p {
margin-bottom: 1rem; /* 기사 내용의 문단마다 약간씩 여백 */
}
/* 카테고리 & 소개 (side bar) */
.sub-title {
font-size: 1.375rem;
padding: 0 8px 8px;
border-bottom: 2px #0bd solid; /* 제목 아래의 얇은 선 */
font-weight: normal;
}
.sub-menu {
list-style : none;
margin-bottom: 60px;
}
.sub-menu li {
border-bottom: 1px #ddd solid; /* 메뉴 마다의 얇은 회색 줄 */
}
.sub-menu a { /* 메뉴들의 폰트 색, 여백 */
color: #432;
padding: 10px; /* 약간 이동되어 티가 안남 */
display: block; /* a태그는 inline속성이기 때문에 티가 안나므로 block 속성으로 변경 */
/* 각 메뉴마다의 전체 영역을 눌렀을 때도 링크로 이동되기 때문에 block으로 변경하는 것이 좋음 */
}
.sub-menu a:hover { /* 메뉴에 마우스 오버 시, 색 변경 */
color: #0bd;
}
aside p {
padding: 12px 10px;
}
/*====================================*/
/* 미디어 쿼리 (for mobile) */
/* 변경 기준이 되는 화면 크기를 브레이크 포인트라고 하며 디바이스 별로
width는 다르다. 450~760 정도가 기준으로 중간 정도인 600을 브레이크 포인트로 설정한다.*/
@media (max-width:600px) {
/* 제목 문자 크기 축소 */
.page-title {
font-size: 2.5rem;
}
/* header */
/* 내비 글자 크기 및 여백 축소 */
.main-nav {
font-size: 1rem;
margin-top: 10px;
}
.main-nav li {
margin: 0 20px;
}
/* 로고와 내비 수직 정렬 */
.page-header { /* 원래 flex로 설정되어 수평이었으므로, flex-diretion 사용하여 수직 정렬 */
flex-direction: column;
align-items: center;
}
/* 뉴스 컨텐츠 수직 정렬 */
.news-content { /* 카테고리, 소개 수직 정렬 */
flex-direction: column;
}
/* 원래 컬럼을 나누어서 차지하던 너비를 100% 차지하게 변경 */
article,
aside {
width: 100%
}
/* 문자 크기 및 여백 조절 */
#news .page-title {
margin-top: 30px;
}
aside {
margin-top: 60px;
}
.post-info {
margin-bottom: 60px;
}
.post-date {
width: 70px;
height: 70px;
font-size: 1rem;
}
.post-date span {
font-size: 0.875rem;
padding-top: 2px;
}
.post-title {
font-size: 1.375rem;
}
.post-cat {
font-size: 0.875rem;
margin-top: 10px;
}
.post-title,
.post-cat {
margin-left: 80px;
}
}👉 column.html
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- meta tag : metadata(정보에 대한 정보) 제공
화면에 표시 되지는 않지만 검색 엔진/브라우저에 읽힘 -->
<meta charset="UTF-8">
<!-- IE 브라우저에서 최신 표준 모드를 선택하는 문서 모드 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 뷰 포트 : 화면 상의 화상 표시 영역. 너비를 디바이스에 맞춤. 기본 배율은 1.
데스크탑 화면과 모바일의 뷰 포트는 차이가 있기 때문. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2_column</title>
<!-- 외부 스타일 시트 -->
<link href="../resources/css/style.css" rel="stylesheet" type="text/css">
<!-- favicon (Real Favicon Generator 활용 )-->
<link rel="icon" type="image/x-icon" href="../resources/images/favicon.ico">
<!-- 리셋 CSS
브라우저별로 디폴트로 적용 된 CSS(여백, 폰트 등)에 차이가 있으므로 브라우저 별로 다르게 보일 수 있어
리셋 CSS를 활용한다. -->
<link href="https://unpkg.com/ress/dist/ress.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="news" class="big-bg">
<header class="page-header wrapper">
<h1><a href="1_full-screen.html">
<img class="logo" src="../resources/images/logo.png" alt="HOME">
</a></h1>
<nav>
<ul class="main-nav">
<li><a href="2_column.html">News</a></li>
<li><a href="3_grid.html">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="wrapper">
<h2 class="page-title">News</h2>
</div>
</div>
<div class="news-content wrapper">
<!-- 메인 콘텐츠 부분 -->
<article>
<!-- 기사 헤더 -->
<header class="post-info">
<h2 class="post-title">기사 상단에 출력 될 제목입니다.</h2>
<p class="post-date">2/6 <span>2023</span></p>
<p class="post-cat">카테고리 : 기사 카테고리</p>
</header>
<!-- 기사 본문 -->
<img src="../resources/images/tower1.PNG" alt="타워">
<p>
<b>반응형 웹(Responsive Web) 디자인</b>이란
출력 영역의 너비에 따라서 변화하게 디자인 된 웹 사이트를 의미한다.
데스크탑과 모바일의 너비는 매우 다른데, 반응형 웹 디자인을 사용하면
콘텐츠를 별도로 변경하지 않고도 디바이스 크기에 따라서 CSS만으로 외관을 변경할 수 있다.
</p>
<p>
<b>반응형 웹 디자인을 적용하는 방법</b>으로는
1. 2-column, 3-column 등 여러 개의 컬럼이 수평으로 정렬되면 모바일의 작은 화면에서는 보기 힘드므로
수평으로 정렬 된 컬럼을 수직으로 배치해 1-column으로 출력하는 방법
2. 내비게이션 메뉴의 경우 모바일의 작은 화면에서는 한 눈에 볼 수 없으므로 처음에는 내비게이션 메뉴를
감추고 메뉴 전용 아이콘을 눌렀을 때 모든 내비게이션 메뉴를 출력해서 보여주는 방법 등이 주로 사용된다.
</p>
<p>
<b>viewport란</b> 다양한 장치에서의 출력 영역을 의미한다.
별도로 지정하지 않았을 시 모바일에서도 데스크탑과 같은 너비에 맞춰서 모든 것을 출력해버리므로
글자가 너무 작아서 읽기 힘들어진다.
현재 viewport는 적용되어 있지만, 레이아웃이 개지므로 추가적인 조정이 필요하다.
</p>
<p>
<b>미디어 쿼리(Media Query)란</b>
웹페이지가 출력하는 화면 크기에 따라서 다른 CSS를 적용하게 해주는 기능으로
"화면의 너비가 600px 이하일 때 문자의 크기를 작게 만든다"와 같이
사용자 화면 환경에 맞게 스타일 변경이 가능하다.
@media (max-width:600px) { p {font-size: 10px}} 와 같은 형태로 사용 시
0~600px 크기의 화면에는 p 태그의 문자 크기를 10px로 나타낸다.
</p>
</article>
<!-- 사이드 바 -->
<aside>
<h3 class="sub-title">카테고리</h3>
<ul class="sub-menu">
<li><a href="#">서브 메뉴1</a></li>
<li><a href="#">서브 메뉴2</a></li>
<li><a href="#">서브 메뉴3</a></li>
<li><a href="#">서브 메뉴4</a></li>
</ul>
<h3 class="sub-title">하이미디어 소개</h3>
<p>
하이미디어 아카데미 종로 지점 15F 11강의장
하이미디어 아카데미 종로 지점 15F 11강의장
하이미디어 아카데미 종로 지점 15F 11강의장
하이미디어 아카데미 종로 지점 15F 11강의장
하이미디어 아카데미 종로 지점 15F 11강의장
</p>
</aside>
<!-- 3-column 레이아웃으로 변경해보기 -->
<div class="ad">
<img src="../resources/images/banner.PNG">
</div>
</div>
<footer>
<div class="wrapper">
<p><small>© 2023 Team Greedy</small></p>
</div>
</footer>
</body>
</html>👀 Menu 제작
👉 style.css file
#menu {
background-image: url("../images/menu-bg.jpg") ;
min-height: 100vh;
}
.menu-content {
max-width: 560px;
margin-top: 10%;
}
.menu-content .page-title {
text-align: center;
}
.menu-content p {
font-size: 1.125rem;
font-weight: bolder;
margin: 10px 0 0 ;
text-align: center;
}
/*========================*/
/* grid*/
.grid {
display: grid;
gap: 26px; /* 이미지 간의 갭 */
grid-template-columns: 1fr 1fr 1fr; /* 이미지들을 모두 같은 비율(사이즈)로 */
/* 창의 너비가 작아졌을 때, 이미지가 너무 작아지지 않도록 최소 값 지정 */
grid-template-columns: repeat(3, minmax(240px, 1fr)); /* : 최소 크기는 240px, 여유 공간이 있다면 1:1:1 */
/* 창의 너비가 작아지면 2, 3번째 요소가 잘려 보이므로 3열로 한정하지 않고 화면의 너비에 맞게 요소의 수를 조정 */
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* 자동으로 맞출 것 */
margin-top: 6%; /* 맨 위의 여백*/
margin-bottom: 50px; /* 맨 아래의 여백 */
}
.item p {
text-align: center;
font-weight: bolder;
font-size: 18px;
border-top: 5px salmon solid;
border-bottom: 5px salmon solid;
}
/* 강조하고 싶은 item의 크기 변경 (CSS) */
.big-box {
grid-row: 1/3;
grid-column: 1/3;
}
/* big-box와 다른 작은 이미지 간의 높이 맞춤 */
.big-box img{
height: 94%;
/* 이미지 비율 맞춤 (포함) */
object-fit: cover;
}
/* 타일형 레이아웃 변경으로 인해 폭이 좁아지면 메뉴끼리 크기가 맞지 않으므로
폭이 좁아질 경우 1-column으로 변경하는 미디어 쿼리*/
@media (max-width : 600px) {
/* big-box가 2행, 2열을 차지하는 설정을 리셋 */
.big-box {
grid-row: auto;
grid-column: auto;
}
}👉 grid.html
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- meta tag : metadata(정보에 대한 정보) 제공
화면에 표시 되지는 않지만 검색 엔진/브라우저에 읽힘 -->
<meta charset="UTF-8">
<!-- IE 브라우저에서 최신 표준 모드를 선택하는 문서 모드 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 뷰 포트 : 화면 상의 화상 표시 영역. 너비를 디바이스에 맞춤. 기본 배율은 1.
데스크탑 화면과 모바일의 뷰 포트는 차이가 있기 때문. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3_grid</title>
<!-- 외부 스타일 시트 -->
<link href="../resources/css/style.css" rel="stylesheet" type="text/css">
<!-- favicon (Real Favicon Generator 활용 )-->
<link rel="icon" type="image/x-icon" href="../resources/images/favicon.ico">
<!-- 리셋 CSS
브라우저별로 디폴트로 적용 된 CSS(여백, 폰트 등)에 차이가 있으므로 브라우저 별로 다르게 보일 수 있어
리셋 CSS를 활용한다. -->
<link href="https://unpkg.com/ress/dist/ress.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu" class="big-bg">
<header class="page-header wrapper">
<h1><a href="1_full-screen.html">
<img class="logo" src="../resources/images/logo.png" alt="HOME">
</a></h1>
<nav>
<ul class="main-nav">
<li><a href="2_column.html">News</a></li>
<li><a href="3_grid.html">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="menu-content wrapper">
<h2 class="page-title">Menu</h2>
<p>
웹 개발자 양성과정에 오신 여러분을 진심으로 환영합니다.
웹 어플리케이션 개발에 대한 기초를 다지기 위해 해당 과정에서 학습할 수 있는
하단의 메뉴를 확인해보세요.
</p>
</div>
</div>
<div class="grid wrapper">
<div class="item">
<img src="../resources/images/java.png" alt="java">
<p>Java 시작하기</p>
</div>
<div class="item">
<img src="../resources/images/oracle.jpg" alt="oracle">
<p>Oracle 시작하기</p>
</div>
<div class="item">
<img src="../resources/images/html.png" alt="html">
<p>HTML 시작하기</p>
</div>
<div class="item big-box">
<img src="../resources/images/css.png" alt="css">
<p>CSS 시작하기</p>
</div>
<div class="item">
<img src="../resources/images/js.png" alt="javascript">
<p>JavaScript 시작하기</p>
</div>
<div class="item">
<img src="../resources/images/react.jpg" alt="react">
<p>React 시작하기</p>
</div>
<div class="item">
<img src="../resources/images/servlets.png" alt="servlets">
<p>Servlets 시작하기</p>
</div>
<div class="item">
<img src="../resources/images/spring.png" alt="spring">
<p>Spring Framework 시작하기</p>
</div>
<div class="item">
<img src="../resources/images/jpa.png" alt="jpa">
<p>JPA 시작하기</p>
</div>
</div>
<footer>
<div class="wrapper">
<p><small>© 2023 Team Greedy</small></p>
</div>
</footer>
</body>
</html>
Tiny little habits make me