ex) a안에 클래스 땡땡을 불러와라
.submenu > li > a.jpg::before {
- transition: 0.3s; = 스르륵 펼쳐지는 효과 0.3초
- text-transfrom: uppercase; 대문자 전환
- 클래스 이름 지을 때 소문자로 짓기로 규칙 정했다. (웹표준 규칙)
- float을 쓰게 되면 브라우저에서 살짝 떨어지는 특징이 있어 잘못하면 스크롤을 내릴 때 해더랑 겹칠 수도 있다.
개발자도구 - 오른쪽 스타일 - :hov 누르면 마우스 올렸을 때 상태를 지속적으로 보여준다. :focus 도
개발자 도구- color 검색해서 아무 컬러나 선택한 후 스포이드 사용가능
초기화 파일
reset 파일을 따로 만든 다음에 css 파일에 아래와 같이 @import '리셋파일명'; 으로 가져오면 reset 파일이 css 파일에 연결되어 html에 css 파일만 연결해주면 간편하게 사용 가능하다.
@charset "utf-8";
@import "reset.css";
iLovePDF | PDF를 즐겨 쓰시는 분들을 위한 온라인 PDF 툴
iLovePDF는 PDF 파일 작업을 위한 온라인 서비스로 완전히 무료이며 사용하기 쉽습니다. PDF 병합, PDF 분리, PDF 압축, 오피스 파일에서 PDF로, PDF에서 JPG로 변환 등!
www.ilovepdf.com
큰 구조 먼저 잡기
<body>
<div class="wrapper">
<header></header>
<main></main>
<footer></footer>
</div>
</body>
header + main + footer를 감싸고 있는 큰 div 필요하다.
header
html
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>i Love PDF2</title>
<link rel="stylesheet" href="./css/layout.css" />
</head>
<body>
<div class="wrapper">
<header>
<h1>
<a href="/"><img src="./img/ilovepdf.svg" alt="로고" /></a>
</h1>
<nav id="gnb">
<ul>
<li><a href="#">MERGE PDF</a></li>
<li><a href="#">SPLIT PDF</a></li>
<li><a href="#">COMPRESS PDF</a></li>
<li>
<a href="#">CONVERT TO PDF <span class="sm_3">▼</span></a>
<div class="submenu_wrap">
<ul class="submenu">
<span>convert to pdf</span>
<li><a href="#" class="jpg">jpg to pdf</a></li>
<li><a href="#" class="word">word to pdf</a></li>
<li><a href="#" class="power">powerpoint to pdf</a></li>
<li><a href="#" class="excel">excel to pdf</a></li>
<li><a href="#" class="htmls">html to pdf</a></li>
</ul>
</div>
</li>
<li>
<a href="#">ALL PDF tools <span class="sm_3">▼</span></a>
<div class="submenu_wrap">
<ul class="submenu">
<span>ORGANIZE PDF</span>
<li><a href="#" class="merge">Merge PDF</a></li>
<li><a href="#" class="split">Split PDF</a></li>
<li><a href="#" class="remove">Remove Page</a></li>
<li><a href="#" class="extract">Extract Pages</a></li>
<li><a href="#" class="organize">Organize PDF</a></li>
<li><a href="#" class="scan">Scan to PDF</a></li>
</ul>
</div>
</li>
</ul>
</nav>
<!-- 오른쪽 아이콘 -->
<div class="action">
<a href="#" class="icon_desk"></a>
<a href="#" class="login">Login</a>
<a href="#" class="sign_up">Sign up</a>
<a href="#" class="menu"></a>
</div>
</header>css
더보기
@charset "utf-8";
@import "reset.css";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
body {
font-family: "Inter", sans-serif;
font-size: 16px;
line-height: 28px;
font-weight: 400;
color: #47474f;
}
.wrapper {
width: 100%;
/* overflow: hidden; */
height: auto; /*오버플로우히든하면 만들때 아래 영역이 잠시 안보여서 하이트 오토 해둠*/
}
header {
width: 100%;
height: 60px;
background-color: #fff;
box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.3);
box-sizing: border-box; /*패딩으로 해더 양 옆 여백을 만들어주기 위해 박스 사이징 진행 패딩이 안으로 생겨야하니깐*/
padding: 0 24px;
position: fixed;
top: 0;
left: 0;
right: 0; /*브라우저 줄였을때 확실하게 잘 고정되어있었음해서 right도 고정시킴*/
z-index: 999;
display: flex;
column-gap: 24px;
}
h1 {
width: fit-content;
height: fit-content; /*이미지 크기만큼 크기를 잡아라 max-width쓰는게 아니라 이미지에 부모박스를 맞추는 방법*/
padding: 15px 0;
}
h1 img {
height: 30px;
}
#gnb {
width: fit-content;
height: 100%;
}
#gnb > ul {
width: fit-content;
display: flex;
column-gap: 20px;
line-height: 60px; /*라인하이트로 가운데정렬해줌*/
}
/* 1차메뉴 */
#gnb > ul > li {
padding: 0 20px; /*상하 좌우*/
position: relative;
text-align: center;
}
#gnb > ul > li .sm_3 {
display: inline-block; /*span태그는 원래 iline 속성이라 인라인 블럭으로 바꿔준다*/
position: relative; /*폰트사이즈로 크기를 줄이고 위치값을 맞춰주기위해*/
font-size: 9px;
top: -2px;
margin-left: 5px;
}
#gnb > ul > li > a {
font-size: 14px;
font-weight: 700;
}
#gnb > ul > li:hover > a {
color: #e5322d;
}
/* 2차메뉴 */
/* 한꺼번에 선언 */
#gnb > ul > li:nth-child(4) > div,
#gnb > ul > li:last-child > div {
background-color: #fff;
width: 160%; /*li의 160% 차지해라*/
height: 0px;
overflow: hidden; /*높이를0으로 만들어서 오버플로우로 숨김*/
position: absolute;
left: -56px;
top: 70px;
box-sizing: border-box;
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
border-radius: 20px;
transition: 0.3s; /*스르륵 펼쳐지는 효과 0.3초*/
}
.submenu {
box-sizing: border-box;
width: 100%;
padding: 10px 30px; /*상하 좌우*/
text-align: left; /*글자 왼쪽 정렬*/
line-height: 50px; /*높이값을 라인하이트로 줄였다.*/
font-size: 12px;
font-weight: 700;
text-transform: uppercase; /*대문자로 변경*/
}
.submenu > span {
color: #707078;
}
.submenu > li {
box-sizing: border-box;
padding-left: 30px; /*li 앞에 아이콘을 넣어줄 여백을 만들어줬다 아이콘 크기20+여백 20*/
position: relative; /*앞에 오는 아이콘들을 정렬하기위해 상대좌표로 변경*/
border-radius: 8px;
}
.submenu > li:hover {
background-color: #f5f5f5;
}
/* a태그 앞에 아이콘 영역 공통 설정 */
.submenu > li > a::before {
display: block; /*가상요소 선택자는 인라인 속성이라 속성 바꿔줘야한다.*/
width: 20px;
height: 20px;
content: ""; /*content를 반드시 넣어줘야한다 안넣으면 안나옴 ''안은 비워둬도 된다. 만약 문구를 쓸 경우 폰트 사이즈를 0으로 선언해줘야한다*/
position: absolute;
left: 0px;
top: 15px; /*좌표값으로 아이콘 위치를 li 옆으로 맞춰준다*/
background:/* lightblue*/ url(./../img/sprite.svg) no-repeat; /*한꺼번에 선언 배경컬러, 배경주소, 반복여부 위치맞출때 배경컬러 사용했다.*/
background-position-x: -5px;
}
/* a안에 클래스 땡땡을 불러와라 */
.submenu > li > a.jpg::before {
background-position-y: -180px;
}
.submenu > li > a.word::before {
background-position-y: -205px;
}
.submenu > li > a.power::before {
background-position-y: -230px;
}
.submenu > li > a.excel::before {
background-position-y: -255px;
}
.submenu > li > a.htmls::before {
background-position-y: -530px;
}
.submenu > li > a.merge::before {
background-position-y: -5px;
}
.submenu > li > a.split::before {
background-position-y: -30px;
}
.submenu > li > a.remove::before {
background-position-y: -55px;
}
.submenu > li > a.extract::before {
background-position-y: -80px;
}
.submenu > li > a.organize::before {
background-position-y: -105px;
}
.submenu > li > a.scan::before {
background-position-y: -680px;
}
.submenu > li:hover > a {
color: #e5322d;
}
/* 서브메뉴 펼쳐짐 */
#gnb > ul > li:nth-child(4):hover > div {
height: 320px;
}
#gnb > ul > li:last-child:hover > div {
height: 370px;
}
/* 오른쪽 아이콘 */
.action {
width: fit-content;
height: 100%;
margin-left: auto; /*margin을 auto로 두면 왼쪽 끝으로 가게된다. 오른쪽으로 가게 하고 싶으면 margin right를 auto로 주면 된다*/
column-gap: 5px;
display: flex;
align-items: center;
}
.action > a {
position: relative;
display: block;
width: 60px;
height: 100%;
box-sizing: border-box; /*버튼만들때 필요하니깐 미리 선언*/
/* background-color: beige; */
}
/* 각각 불러오기 힘들어서 a로 전체 비포 만들어놓고 가상요소 들어갈 부분만 넓이높이 줘서 보여지게 한다.*/
.action > a::before {
content: "";
display: block;
/* background-color: lightsalmon; */
background-image: url(./../img/sprite.svg);
background-repeat: no-repeat;
}
.action > a.icon_desk {
padding: 16px 14px;
}
.action > a.icon_desk::before {
width: 32px;
height: 28px;
background-position: -55px -30px;
}
.action > a.icon_desk::after {
content: "iLovePDF Desktop, work offline";
display: block; /*인라인블럭은 보더라디우스를 쓸 수 없다 그래서 블럭으로 바꿈*/
font-size: 14px;
width: 230px;
line-height: 32px;
background-color: #47474f;
color: #fff;
text-align: center;
font-weight: 700;
position: absolute;
top: 70px;
left: -70px;
border-radius: 8px;
opacity: 0; /*투명도를 없애서 숨겨준다*/
transition: opacity 0.3s; /*0.3초동안 오퍼시티를 변화시켜라*/
}
/* 띄어쓰기 없이 에프터 불러와야함. 아이콘에 호버하면 뒤에 에프터를 */
.action > a.icon_desk:hover::after {
opacity: 1;
}
.action > a.login {
text-align: center;
line-height: 60px;
color: #e5322d;
font-weight: 500;
}
.action > a.login:hover {
color: #47474f;
}
.action > a.sign_up {
box-sizing: content-box; /*border-box의 반대.해제 버튼 만들어주기위해서*/
text-align: center;
height: 32px;
padding: 0 12px;
font-size: 14px;
font-weight: 700;
background-color: #e5322d;
color: #fff;
border-radius: 10px;
transition: 0.3s; /*hover했을때 천천히 바뀌게 할려면 hover에 이 효과를 주는게 아니라 원래 얘한테 줘야한다*/
}
.action > a.sign_up:hover {
background-color: #47474f;
}
.action > a.menu {
padding: 21px 18px;
}
.action > a.menu::before {
width: 24px;
height: 18px;
background-position: -55px -5px;
}header- 바디 & 로고
<body>
<div class="wrapper">
<header>
<h1>
<a href="/"><img src="./img/ilovepdf.svg" alt="로고" /></a>
</h1>css
@charset "utf-8";
@import "reset.css";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
body {
font-family: "Inter", sans-serif;
font-size: 16px;
line-height: 28px;
font-weight: 400;
color: #47474f;
}
.wrapper {
width: 100%;
overflow: hidden;
/* height: auto; 오버플로우히든하면 만들때 아래 영역이 안보여서 잠시 하이트 오토 해둠*/
}
원래 브라우저는 기본 폰트 사이즈가 16이고 라인하이트가 28인데 초기화 파일로 초기화되어 다시 body에 설정해준다.
body에 기본적으로 사이트에서 쓸 line-height와 font-size, font color 등을 설정해준다.
* wrapper(해더 메인 풋터 감싸고 있는 div)에 높이값을 오토나 핏 컨텐츠를 주면 박스 사이징 안하고 패딩으로 여백을 줬을때 패딩 영역을 컨텐츠 영역으로 인식하지 않을 수 있다. 그래서 높이값 대신 overflow-hidden을 쓴다.
(핏 컨텐츠는 컨텐츠까지만 인식하니깐 컨텐츠 밖의 패딩을 인식하지 못함.)
header {
width: 100%;
height: 60px;
background-color: #fff;
box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.3);
box-sizing: border-box; /*패딩으로 해더 양 옆 여백을 만들어주기 위해 박스 사이징 진행 패딩이 안으로 생겨야하니깐*/
padding: 0 24px;
position: fixed;
top: 0;
left: 0;
right: 0; /*브라우저 줄였을때 확실하게 잘 고정되어있었음해서 right도 고정시킴*/
z-index: 999;
display: flex;
column-gap: 24px;
}
h1 {
width: fit-content;
height: fit-content; /*이미지 크기만큼 크기를 잡아라 max-width쓰는게 아니라 이미지에 부모박스를 맞추는 방법*/
padding: 15px 0;
}
h1 img {
height: 30px;
}
* 사이트 디자인이 header가 양 옆에 여백이 적어서
해더 안에 컨텐츠를 묶어주는 div를 만들어서 영역을 지정해주는 방식이 아니라 해더에 양 옆에 패딩을 줘서 만들어줬다.
그러기위해서 해더에 박스사이징 진행-
- 해더는 다 만들고 position: fixed로 스크롤을 해도 따라올 수 있도록 고정시켜준다. 고정시켜도 해더 색을 유지하면서 따라와야하니깐 해더영역에 백그라운드 컬러 넣어줘야한다.
포지션에 좌표값을 top, left, right를 지정해줌. 브라우저를 줄였을 때 확실하게 고정되어있었으면 해서 right 값도 넣어주었다.
- 해더 및으로 아래 애들에 포지션을 주게 되면 걔네들이 해더보다 위로 올라오게 된다.
그래서 해더에 z-index: 999; 준다. z 축으로 맨 앞으로 나와있어라. 높은 수일수록 위쪽 레이어에 위치한다.
- 로고는 기존엔 로고를 감싸고 있는 h1 태그에 영역을 잡아서 그 안에 있는 img에 max-width를 줘서 부모박스를 채우게 했는데 이번엔 img에 수치값을 주고 감싸고 있는 h1에 fit-content를 줘서 자식 이미지 크기만큼 영역을 잡도록 하는 방법을 써줬다.
-로고는 가운데 정렬 padding 으로 정렬해줬다.
메뉴
<nav id="gnb">
<ul>
<li><a href="#">MERGE PDF</a></li>
<li><a href="#">SPLIT PDF</a></li>
<li><a href="#">COMPRESS PDF</a></li>
<li>
<a href="#">CONVERT TO PDF <span class="sm_3">▼</span></a>
<div class="submenu_wrap">
<ul class="submenu">
<span>convert to pdf</span>
<li><a href="#" class="jpg">jpg to pdf</a></li>
<li><a href="#" class="word">word to pdf</a></li>
<li><a href="#" class="power">powerpoint to pdf</a></li>
<li><a href="#" class="excel">excel to pdf</a></li>
<li><a href="#" class="htmls">html to pdf</a></li>
</ul>
</div>
</li>
<li>
<a href="#">ALL PDF tools <span class="sm_3">▼</span></a>
<div class="submenu_wrap">
<ul class="submenu">
<span>ORGANIZE PDF</span>
<li><a href="#" class="merge">Merge PDF</a></li>
<li><a href="#" class="split">Split PDF</a></li>
<li><a href="#" class="remove">Remove Page</a></li>
<li><a href="#" class="extract">Extract Pages</a></li>
<li><a href="#" class="organize">Organize PDF</a></li>
<li><a href="#" class="scan">Scan to PDF</a></li>
</ul>
</div>
</li>
</ul>
</nav>
1차메뉴 css
#gnb {
width: fit-content;
height: 100%;
}
#gnb > ul {
width: fit-content;
display: flex;
column-gap: 20px;
line-height: 60px; /*라인하이트로 가운데정렬해줌*/
}
/* 1차메뉴 */
#gnb > ul > li {
padding: 0 20px; /*상하 좌우*/
position: relative;
text-align: center;
}
#gnb > ul > li .sm_3 {
display: inline-block; /*span태그는 원래 iline 속성이라 인라인 블럭으로 바꿔준다*/
position: relative; /*폰트사이즈로 크기를 줄이고 위치값을 맞춰주기위해*/
font-size: 9px;
top: -2px;
margin-left: 5px;
}
#gnb > ul > li > a {
font-size: 14px;
font-weight: 700;
}
#gnb > ul > li:hover > a {
color: #e5322d;
}
- 1차메뉴들은 ul에 display: flex; 로 가로 정렬, column-gap으로 사이 간격을 맞춰주고,
line-height로 글자들을 가운데 정렬해주었다.
- 1차메뉴들이 상대좌표로 기준점을 갖게 하고 2차 메뉴를 위치 조정하기 위해 1차메뉴에 position relative 를 걸어준다.
- ▼ 아이콘은 글자문자로 쓰고 span 으로 묶어서 font-size 로 줄여줬다.
▼ 위치는 해더 a태그에 position:relative 걸어주고 span에 position:absolute 준 뒤 위치값으로 위치 조정해줬다.
2차메뉴 css
/* 2차메뉴 */
/* 한꺼번에 선언 */
#gnb > ul > li:nth-child(4) > div,
#gnb > ul > li:last-child > div {
background-color: #fff;
width: 160%; /*li의 160% 차지해라*/
height: 0px;
overflow: hidden; /*높이를0으로 만들어서 오버플로우로 숨김*/
position: absolute;
left: -56px;
top: 70px;
box-sizing: border-box;
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
border-radius: 20px;
transition: 0.3s; /*스르륵 펼쳐지는 효과 0.3초*/
}
.submenu {
box-sizing: border-box;
width: 100%;
padding: 10px 30px; /*상하 좌우*/
text-align: left; /*글자 왼쪽 정렬*/
line-height: 50px; /*높이값을 라인하이트로 줄였다.*/
font-size: 12px;
font-weight: 700;
text-transform: uppercase; /*대문자로 변경*/
}
.submenu > span {
color: #707078;
}
.submenu > li {
box-sizing: border-box;
padding-left: 30px; /*li 앞에 아이콘을 넣어줄 여백을 만들어줬다 아이콘 크기20+여백 20*/
position: relative; /*앞에 오는 아이콘들을 정렬하기위해 상대좌표로 변경*/
border-radius: 8px;
}
.submenu > li:hover {
background-color: #f5f5f5;
}
/* a태그 앞에 아이콘 영역 공통 설정 */
.submenu > li > a::before {
display: block; /*가상요소 선택자는 인라인 속성이라 속성 바꿔줘야한다.*/
width: 20px;
height: 20px;
content: ""; /*content를 반드시 넣어줘야한다 안넣으면 안나옴 ''안은 비워둬도 된다. 만약 문구를 쓸 경우 폰트 사이즈를 0으로 선언해줘야한다*/
position: absolute;
left: 0px;
top: 15px; /*좌표값으로 아이콘 위치를 li 옆으로 맞춰준다*/
background:/* lightblue*/ url(./../img/sprite.svg) no-repeat; /*한꺼번에 선언 배경컬러, 배경주소, 반복여부 위치맞출때 배경컬러 사용했다.*/
background-position-x: -5px;
}
/* a안에 클래스 땡땡을 불러와라 */
.submenu > li > a.jpg::before {
background-position-y: -180px;
}
.submenu > li > a.word::before {
background-position-y: -205px;
}
.submenu > li > a.power::before {
background-position-y: -230px;
}
.submenu > li > a.excel::before {
background-position-y: -255px;
}
.submenu > li > a.htmls::before {
background-position-y: -530px;
}
.submenu > li > a.merge::before {
background-position-y: -5px;
}
.submenu > li > a.split::before {
background-position-y: -30px;
}
.submenu > li > a.remove::before {
background-position-y: -55px;
}
.submenu > li > a.extract::before {
background-position-y: -80px;
}
.submenu > li > a.organize::before {
background-position-y: -105px;
}
.submenu > li > a.scan::before {
background-position-y: -680px;
}
.submenu > li:hover > a {
color: #e5322d;
}
/* 서브메뉴 펼쳐짐 */
#gnb > ul > li:nth-child(4):hover > div {
height: 320px;
}
#gnb > ul > li:last-child:hover > div {
height: 370px;
}
* 1차메뉴에 마우스를 올렸을 때, 2차메뉴가 스르륵 펼쳐지게 할려면 overflow:hidden을 써서 2차 메뉴를 숨겨놔야한다.
디스플레이 논으로 숨기면 스르륵 펼쳐지지가 않는다.
오버플로우 히든 할려면 이차메뉴 ul를 감싸는 div 를 만들어줘야한다.
그냥 ul만 하면 여백줄 때 패딩을 넣어야하는데 패딩은 오버플로우 히든으로 숨겨지지않는다. 그래서 div 안에 ul에 패딩을 준다. div에 패딩을 넣으면 안숨겨진다.
높이값을 0으로 바꾸고 오버플로우 히든으로 숨겼다가 hover하면 높이값을 다시 줘서 2차메뉴가 나타나게 한다.
- 처음에 2차메뉴들 공통 속성을 한꺼번에 선언해준다.
- transition: 0.3s; = 스르륵 펼쳐지는 효과 0.3초 (애는 hover에 주는 게 아니라 hover하는 그 대상에게 미리 줘야한다.)
- li 앞에 아이콘들은 a태그에 가상요소 선택자 ::before로 만들어줬다.
가상요소 선택자는 백그라운드 포지션 값을 제외하고 공통속성들을 한번에 선언해준다.
가상요소 선택자는 인라인 속성이라 속성 바꿔줘야한다.
content를 반드시 넣어줘야한다. 안넣으면 안 나옴. ''"안은 비워둬도 된다. 만약 문구를 쓸 경우 폰트 사이즈를 0으로 선언해줘야한다
- top: 15px; /*좌표값으로 아이콘 위치를 li 옆으로 맞춰준다*/
- background: /* lightblue*/ url(./../img/sprite.svg) no-repeat;
한꺼번에 선언해주는 background 속성을 이용한다. 배경컬러( 위치맞출때 배경컬러 ), 배경주소, 반복여부
아이콘
<div class="action">
<a href="#" class="icon_desk"></a>
<a href="#" class="login">Login</a>
<a href="#" class="sign_up">Sign up</a>
<a href="#" class="menu"></a>
</div>
</header>css
.action {
width: fit-content;
height: 100%;
margin-left: auto; /*margin을 auto로 두면 왼쪽 끝으로 가게된다. 오른쪽으로 가게 하고 싶으면 margin right를 auto로 주면 된다*/
column-gap: 5px;
display: flex;
align-items: center;
}
.action > a {
position: relative;
display: block;
width: 60px;
height: 100%;
box-sizing: border-box; /*버튼만들때 필요하니깐 미리 선언*/
/* background-color: beige; */
}
/* 각각 불러오기 힘들어서 a로 전체 비포 만들어놓고 가상요소 들어갈 부분만 넓이높이 줘서 보여지게 한다.*/
.action > a::before {
content: "";
display: block;
/* background-color: lightsalmon; */
background-image: url(./../img/sprite.svg);
background-repeat: no-repeat;
}
.action > a.icon_desk {
padding: 16px 14px;
}
.action > a.icon_desk::before {
width: 32px;
height: 28px;
background-position: -55px -30px;
}
.action > a.icon_desk::after {
content: "iLovePDF Desktop, work offline";
display: block; /*인라인블럭은 보더라디우스를 쓸 수 없다 그래서 블럭으로 바꿈*/
font-size: 14px;
width: 230px;
line-height: 32px;
background-color: #47474f;
color: #fff;
text-align: center;
font-weight: 700;
position: absolute;
top: 70px;
left: -70px;
border-radius: 8px;
opacity: 0; /*투명도를 없애서 숨겨준다*/
transition: opacity 0.3s; /*0.3초동안 오퍼시티를 변화시켜라*/
}
/* 띄어쓰기 없이 에프터 불러와야함. 아이콘에 호버하면 뒤에 에프터를 */
.action > a.icon_desk:hover::after {
opacity: 1;
}
.action > a.login {
text-align: center;
line-height: 60px;
color: #e5322d;
font-weight: 500;
}
.action > a.login:hover {
color: #47474f;
}
.action > a.sign_up {
box-sizing: content-box; /*border-box의 반대.해제 버튼 만들어주기위해서*/
text-align: center;
height: 32px;
padding: 0 12px;
font-size: 14px;
font-weight: 700;
background-color: #e5322d;
color: #fff;
border-radius: 10px;
transition: 0.3s; /*hover했을때 천천히 바뀌게 할려면 hover에 이 효과를 주는게 아니라 원래 얘한테 줘야한다*/
}
.action > a.sign_up:hover {
background-color: #47474f;
}
.action > a.menu {
padding: 21px 18px;
}
.action > a.menu::before {
width: 24px;
height: 18px;
background-position: -55px -5px;
}
* 박스가 flex일 경우에, 아이콘 div에 margin-left:auto; 를 주면 아이콘 더미가 오른쪽으로 가게 된다. (왼쪽 margin을 자동으로 두게 된다) margin 숫자px를 써서 밀면 그 자리에 고정이 되기에 반응형이 어려워진다.
- a태그들로 영역 잡아서 그 안에 위치시켜 주었다.
- a태그에 전부 다 박스사이징을 해놨어서 sign up은 박스사이징 해제 (컨텐츠박스 box-sizing: content-box;)를 해주고 버튼 모양을 만들어줬다. (버튼을 만들려면 패딩을 바깥으로 만들어줘야하니깐. )
- 아이콘에 호버하면 뒤에 에프터를 변화시키라( 띄어쓰기 없이 불러온다)
.action > a.icon_desk:hover::after {
opacity: 1; }
hover 했을 때 뜨는 검정 요소 - 가상요소 선택자로 만듦
Main
main {
width: 100%;
height: auto; /*나중에 오버플로우 히든으로 바꿀거다*/
/*색상 이미지경로 반복여부 배경고정 위치 / 사이즈 순서*/
background: #f5f5fa url(./../img/background.svg) no-repeat fixed center /
cover;
margin-top: 60px; /*해더크기만큼 내려줘야 컨텐츠 애들이 안숨는다*/
}
/* 모든 섹션에 공통 속성 */
section {
width: 100%;
box-sizing: border-box; /*섹션들 영역을 패딩으로 잡을려고*/
height: auto;
}.tools_wrap {
padding: 0 68px;
}
section에 box-sizing: border-box하고 섹션에 양쪽 패딩을 줘서 컨텐츠 영역의 크기를 맞춰줬다.
반응형 할 때 이 방법 많이 쓴다.
<section 1>
더보기
<main>
<section class="tools">
<div class="top_title">
<h2>Online tools for PDF lovers</h2>
<p>
Free online PDF tool to merge PDF, split PDF, compress PDF,
convert<br />office files to PDF, convert PDF to JPG, convert JPG
to PDF. No installation required.
</p>
</div>
<div class="tools_wrap">
<!--패딩을 줄 박스-->
<div class="item_con">
<!--소숫점 여백이 남는게 싫어서 가운데로 보낼려고 하나 더 div 만듦-->
<!-- 아이템박스 -->
<div class="item">
<a href="#">
<h3 class="icon1">Merge PDF</h3>
<p>
Merge and merge PDF files as you wish. Very easy and fast!
</p>
</a>
</div>
<div class="item">
<a href="#">
<h3 class="icon1">Merge PDF</h3>
<p>
Merge and merge PDF files as you wish. Very easy and fast!
</p>
</a>
</div>
<div class="item">
<a href="#">
<h3 class="icon1">Merge PDF</h3>
<p>
Merge and merge PDF files as you wish. Very easy and fast!
</p>
</a>
</div>
<div class="item">
<a href="#">
<h3 class="icon1">Merge PDF</h3>
<p>
Merge and merge PDF files as you wish. Very easy and fast!
</p>
</a>
</div>
<div class="item">
<a href="#">
<h3 class="icon1">Merge PDF</h3>
<p>
Merge and merge PDF files as you wish. Very easy and fast!
</p>
</a>
</div>
<div class="item">
<a href="#">
<h3 class="icon1">Merge PDF</h3>
<p>
Merge and merge PDF files as you wish. Very easy and fast!
</p>
</a>
</div>
<div class="item">
<a href="#">
<h3 class="icon1">Merge PDF</h3>
<p>
Merge and merge PDF files as you wish. Very easy and fast!
</p>
</a>
</div>
<div class="item">
<a href="#">
<h3 class="icon1">Merge PDF</h3>
<p>
Merge and merge PDF files as you wish. Very easy and fast!
</p>
</a>
</div>
<div class="item">
<a href="#">
<h3 class="icon1">Merge PDF</h3>
<p>
Merge and merge PDF files as you wish. Very easy and fast!
</p>
</a>
</div>
<div class="item">
<a href="#">
<h3 class="icon1">Merge PDF</h3>
<p>
Merge and merge PDF files as you wish. Very easy and fast!
</p>
</a>
</div>
<div class="item">
<a href="#">
<h3 class="icon1">Merge PDF</h3>
<p>
Merge and merge PDF files as you wish. Very easy and fast!
</p>
</a>
</div>
<div class="item">
<a href="#">
<h3 class="icon1">Merge PDF</h3>
<p>
Merge and merge PDF files as you wish. Very easy and fast!
</p>
</a>
</div>
</div>
</div>
</section>css
더보기
.tools {
padding: 50px 0;
text-align: center;
}
.top_title {
width: 100%;
margin-bottom: 40px; /*밑에 박스들하고 벌려준다*/
}
.top_title h2 {
font-size: 42px;
font-weight: 700;
margin-bottom: 20px;
}
.top_title p {
font-size: 20px;
}
.tools_wrap {
padding: 0 68px;
display: flex;
justify-content: center;
align-items: center;
}
.item_con {
width: 100%;
height: fit-content;
display: flex;
flex-flow: row wrap;
gap: 2px;
}
.item_con .item {
/* flex-basis: calc(16.666% - 4px); gap만큼 빼줌 */
flex: 1 0 16%; /*기본적으로 가져야할 넓이를 16%로 설정*/
word-wrap: break-word; /*튀어나온거 정렬*/
background-color: #fff;
border: 1px solid #f5f5fa;
text-align: left;
border-radius: 4px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
/* calc() = 계산기 숫자값을 계산해서 알아서 계산해줌*/
.item a {
display: block;
width: 100%;
height: 100%;
padding: 50px 30px;
box-sizing: border-box;
}
.item a:hover {
background-color: #f5f5fa;
}
.item h3 {
font-size: 20px;
color: #333;
font-weight: 600;
}
.item h3::before {
content: "icons";
font-size: 0;
display: block;
width: 48px;
height: 48px;
/* background-color: lightblue; */
margin-bottom: 30px;
background: url(./../img/sprite.svg) no-repeat;
background-size: 545%;
background-position: -11px -11px;
}
.item p {
font-size: 13px;
line-height: 18px;
color: #707078;
margin-top: 10px;
}
위의 구조 / svg 는 가상 선택자로 불러와도 된다. 영문판은 가상선택자로 불러와서 만들어줬다. 한글판은 svg로 바로 가져옴
<section 2,3 >
더보기
<!-- 섹션2 -->
<section class="solution">
<h2>Looking for another solution?</h2>
<div class="solution_box">
<div>
<h3>iLovePDF Desktop</h3>
<p>
Download the <a href="#">iLovePDF Desktop App</a> which can be
used with your favorite PDF tools on your Mac or Windows PC .
Get a lightweight PDF app that lets you handle a lot of PDF
tasks offline in seconds.
</p>
</div>
<div>
<h3>iLovePDF Mobile</h3>
<p>
<a href="#">Get the iLovePDF mobile app</a> to manage your
documents remotely or on the go . Turn your Android or iPhone
device into a PDF editor and scanner so you can annotate, sign,
and easily share documents.
</p>
</div>
<div>
<h3>iLoveIMG</h3>
<p>
<a href="#">iLoveIMG</a> is a web app that helps you edit images
for free. Crop, resize, compress, convert, etc. With just a few
clicks, you have all the tools you need to improve your images.
</p>
</div>
</div>
</section>
<!-- 섹션3 -->
<section class="user">
<h2>PDF software trusted by millions of users</h2>
<p>
iLovePDF is the best app for editing PDF files easily on the web.
Get all the tools you need to work efficiently<br />
on your electronic documents while maintaining data security and
integrity.
</p>
<div class="other_logo">
<div>
<img src="./img/pdf-logo.svg" alt="pdf-logo" />
</div>
<div>
<img src="./img/iso-logo.svg" alt="iso-logo" />
</div>
<div>
<img src="./img/secure-logo.svg" alt="ssl logo" />
</div>
</div>
</section>
이미지는 반응형할때를 고려하여 이미지를 바로 넣지 않고, div를 만들어서 그 안에 이미지 넣는다.
이미지는 찌그러지지않게 너비와 높이중에 하나만 설정해준다.
css
더보기
/* 섹션2 */
.solution {
background-color: #fff;
padding: 100px 0;
color: #33333b;
text-align: center;
}
section > h2 {
font-size: 42px;
font-weight: 700;
}
section > p {
/*전체 p 공통속성 선언*/
line-height: 32px;
font-size: 22px;
font-weight: 400;
color: #47474f;
}
.solution_box {
width: 1500px;
margin: 0 auto;
margin-top: 80px;
display: flex;
column-gap: 40px;
text-align: left;
}
.solution_box h3 {
font-size: 26px;
line-height: 30px;
font-weight: 600;
margin-bottom: 12px;
}
.solution_box p {
color: #707078;
line-height: 28px;
font-weight: 400;
}
.solution_box a {
text-decoration: underline;
color: #e5322d;
font-weight: 600;
}
.solution_box a:hover {
color: #47474f;
}
/* 섹션3 */
.user {
padding: 100px 0;
text-align: center;
}
.user p {
margin-top: 28px;
color: #707078;
}
.other_logo {
width: 500px;
margin: 0 auto;
margin-top: 80px;
display: flex;
justify-content: space-between;
}
.other_logo > div {
height: 30px;
}
.other_logo > div > img {
max-height: 100%; /*부모박스의 높이에 맞춰서 채워라*/
}섹션 3의 로고 이미지들은 이미지를 감싸고 있는 div들에 높이를 지정해주고
이미지에 max-height: 100%를 적용해 부모 박스의 높이에 맞춰 채우라고 지정해줬다.
<section 4 >
<section class="premium">
<div class="left">
<h2>Get more with Premium</h2>
<p>
Complete projects faster with batch file processing, convert
scanned documents to OCR, and re-sign business contracts.
</p>
<a href="#">Get Premium</a>
</div>
<div class="right">
<img src="./img/file.svg" alt="file" />
</div>
</section>
</main>오른쪽 이미지는 홈페이지에서 svg를 복사해 비주얼스튜디오코드에서 복붙으로 저장해준다음(파일명.svg)
img src로 그 파일을 불러와줬다. 이렇게하면 코드가 길어지지않고 간단하게 쓸 수 있다.
css
더보기
.premium {
background-color: #47474f;
color: #f5f5fa;
display: flex;
justify-content: space-between;
padding: 80px 200px;
align-items: center; /*글과 그림 센터로 정렬*/
}
.left {
width: 60%;
}
.left h2 {
font-size: 42px;
font-weight: 700;
margin-bottom: 40px;
}
.left p {
line-height: 32px;
font-weight: 22px;
font-weight: 400;
margin-bottom: 60px;
}
.left a {
display: block;
background-color: gold;
width: fit-content;
padding: 8px 24px;
font-weight: 700;
border-radius: 8px;
transition: 0.3s;
}
.left a:hover {
background-color: goldenrod;
}
footer
더보기
<footer>
<section class="sitemap">
<nav id="footer_nav">
<ul>
<h4>ILOVEPDF</h4>
<li><a href="#">home</a></li>
<li><a href="#">function</a></li>
<li><a href="#">price</a></li>
<li><a href="#">equipment</a></li>
<li><a href="#">Frequently Asked Questions</a></li>
</ul>
<ul>
<h4>PRODUCT</h4>
<li><a href="#">iLovePDF Desktop</a></li>
<li><a href="#">iLovePDF Mobile</a></li>
<li><a href="#">developer</a></li>
<li><a href="#">Wordpress plugin</a></li>
<li><a href="#">iloveimg.com</a></li>
</ul>
<ul>
<h4>SOLUTION</h4>
<li><a href="#">business</a></li>
<li><a href="#">education</a></li>
</ul>
<ul>
<h4>COMPANY</h4>
<li><a href="#">story</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">press release</a></li>
<li><a href="#">Legal & Privacy</a></li>
<li><a href="#">inquiry</a></li>
</ul>
</nav>
<div class="btn_wrap">
<a href="#">
<img src="./img/app_store.svg" alt="애플" />
</a>
<a href="#">
<img src="./img/google_play.svg" alt="구글" />
</a>
</div>
</section>
<section class="copy">
©iLovePDF 2024 ® - Your PDF Editor
</section>
</footer>
</div>
</body>
</html>
상표등록 엔터티 코드 - ®
css
더보기
footer {
width: 100%;
box-sizing: border-box;
padding: 50px 200px;
background-color: #f5f5fa;
}
.sitemap {
width: 100%; /*푸터의 패딩영역을 제외한 나머지 영역을 100%*/
height: fit-content;
border-bottom: 1px solid #aaa;
margin-bottom: 30px;
}
#footer_nav {
width: 100%;
display: flex;
justify-content: space-between;
gap: 60px; /*반응형을 고려하여 갭 넣어놓음*/
}
#footer_nav ul {
/* flex-basis: 25%;
flex-grow: 1;
flex-shrink: 1; */
flex: 1 25%;
line-height: 1;
font-weight: 400;
}
#footer_nav ul h4 {
color: #e5322d;
font-weight: 700;
margin-bottom: 16px;
}
#footer_nav ul li {
margin-bottom: 14px; /*line-height말고 마진으로 간격을 벌려줬다*/
}
#footer_nav ul li a {
color: #707078;
}
#footer_nav ul li a:hover {
color: #e5322d;
}
.btn_wrap {
width: 100%;
height: 40px; /*버튼 높이가 40이라서*/
margin: 30px 0;
}
.btn_wrap a {
float: right;
display: block;
width: 135px;
height: 40px;
margin-left: 10px;
}
.btn_wrap:first-child {
margin-left: 0; /*반응형을 고려해서 없애준다*/
}
오른쪽 버튼들은 a태그라서 display : block 해주고 float:right로 정렬해줬다.
'예제 실습' 카테고리의 다른 글
| 실습) Plum 페이지 (0) | 2024.07.04 |
|---|---|
| 실습) lnb 아코디언 메뉴바 / 2차, 1차 메뉴 css 정리 (0) | 2024.07.02 |
| 실습) iLovePDF 사이트 클론 코딩-1 혼자 해본 버전 (0) | 2024.06.27 |
| 실습) split shire 사이트 클론 코딩 (0) | 2024.06.25 |
| 실습) Google (0) | 2024.06.24 |
