* max-width = 최대 넓이 반응형 할 때 많이씀. 세로 적용하면 이미지 찌그러진다. 가로만 적용
이미지에 max-width 쓰게되면 이미지 위 영역 설정해놓은 넓이박스에 쏙 맞춰 들어가게 된다.
* z-index: 999;
= position 박스를 맨 앞으로(z축으로) 끌어당김. 해더에 적용해 해더가 가장 위쪽 레이어에 위치할 수 있도록 한다.
높은 수일수록 위쪽 레이어
* box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3); /* x축 y축 퍼짐정도 색*/
= 그림자효과
* class 이름은 공백으로 구분해서 여러 개 만들어줄 수 있다. ex) <a href="#" class="black_btn btn1>
* 자간
= letter-spacing: 5px;
! 큰 구조 먼저 만들고 시작하기
로고
h1 > a > img 태그 순서
아니면 a 태그를 블록속성으로 바꿔서 너비높이줘서 백그라운드 이미지로 불러온다. (스프라이트 이미지)
/ = 최상위 폴더 메인페이지로 이동
> css
@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
a {
text-decoration: none;
color: #222;
}
body {
font-family: "Open Sans", sans-serif;
font-size: 14px;
color: #222;
line-height: 28px;
}
.wrapper {
width: 100%;
height: auto;
}
/* header */
header {
width: 100%;
height: 100px;
background-color: #fff;
box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.3); /* x y 퍼짐정도 색*/
position: fixed; /*스크롤해도 따라다니게 함*/
top: 0;
left: 0; /*top위치에 고정*/
z-index: 999; /*position 박스를 맨 앞으로 끌어당김. 해더가 가장 위쪽 레이어에 위치할 수 있도록 한다. 높은 수일수록 위쪽 레이어*/
}
.header_wrap {
width: 1500px;
height: 100px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
h1 {
width: 55px;
height: 55px;
/* background-color: lightcoral; */
padding: 23px 0; /*가운데로 밀어줌*/
}
h1 img {
max-width: 100%; /*max-width = 최대넓이 반응형 할 때 많이씀. 세로 적용하면 이미지 찌그러진다 가로만 적용*/
}< header 아래 그림자 효과 >
box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.3); /* x축 y축 퍼짐정도 색*/
- h1 로고를 pabbing 으로 가운데 정렬해준다. ( box-sizing: border-box 안한 상태로 )
(aline-items:center 하게되면 2차 메뉴들이 가운데 정렬로 브라우저 밖으로 뚫고 올라가서 안된다. 각 해더 컨텐츠들을 따로따로 가운데 정렬해줘야한다.)
- 해더 안 컨텐츠 묶어주는 header_wrap에 display: flex; 로 정렬
h1 img { max-width: 100%;}max-width = 최대넓이 반응형 할 때 많이씀. 세로 적용하면 이미지 찌그러진다. 가로만 적용
max-width 쓰게되면 영역 설정해놓은 h1 넓이에 쏙 들어가게 된다.
z-index: 999;
= position 박스를 맨 앞으로 끌어당김. 해더에 적용해 해더가 가장 위쪽 레이어에 위치할 수 있도록 한다.
높은 수일수록 위쪽 레이어
- header에 position:fixed 줘서 따라오게 할 때 header 에 background-color 줘야한다. 안주면 뚫려서 뒤에 비치게 된다.
메뉴
nav - 메뉴 하나만 2차 메뉴가 있는 구조
> css
#gnb {
width: 750px;
height: auto;
}
#gnb > ul {
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
}
/* 1차메뉴/ 인 애들만 불러와서 line-height로 높이값 대신. alinitems:center 하면 2차애들때문에 1차메뉴가 올라가 숨겨져서 안된다. */
#gnb > ul > li {
line-height: 100px;
text-align: center; /*2차메뉴도 같이 글자가운데정렬*/
position: relative;
font-weight: 500;
}
/* 자손으로 a를 불러와서 2차메뉴까지는 색이 안바뀌게 함 */
#gnb > ul > li:hover > a {
color: palevioletred;
}
/* 2차메뉴 */
li > .submenu {
position: absolute;
left: 0;
top: 100px;
background-color: #fff;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
line-height: 65px; /*라인하이트로 높이값을 대신*/
width: 160%;
margin-left: -20px;
border-bottom: 3px solid palevioletred;
display: none; /*디자인 끝내고 숨겨준다*/
text-transform: uppercase; /*대문자로 바꿔줌*/
font-weight: 400;
}
.submenu > li:hover > a {
display: block; /*a태그가 display: block;하면 넓이높이 갖게 되며 li 영역까지 채우게 되면서 li 영역에 마우스 올리면 클릭할 수 있는 마우스 커서모양이 뜬다*/
color: palevioletred;
}
.submenu > li:hover {
background-color: #f5f5f5;
}
/* 서브메뉴 마우스 올렸을 때 나타내라 */
#gnb > ul > li:nth-child(6):hover .submenu {
display: block; /*display: none;로 숨겨놨던 걸 display: block;로 다시 나타낸다*/
}
- nav 영역 너비 높이를 설정
- 메뉴들을 가로 정렬 - #gnb > ul에 display: flex; / justify-content: space-between; 적용
- 1차 메뉴들은 line-height 로 높이값을 대신해준다.
alinitems:center 하면 2차 애들때문에 1차메뉴가 브라우저 위로 올라가 숨겨져서 안된다.
-1차 메뉴들에 마우스를 올리면 색이 바뀌게 할 때 2차 메뉴들까지 색 안바뀌게 할려면 a 태그를 자손선택자로 잘 불러와서 1차메뉴 a들만 선택적용시켜준다.
-2차 메뉴들에는 line-height로 높이값을 대신해줬다.
-2차 메뉴 숨길 때 display: none; 으로 숨기고 display:block으로 다시 나오게 적용해줬다.
margin-left -20px로 가운데로 끌어당겨준다.
아이콘
크기는 최소 48px
> css
.icons {
width: fit-content;
height: 48px; /*아이콘 크기 48*48*/
display: flex;
column-gap: 4px;
padding: 26px 0; /*가운데정렬*/
}
.icons > a {
display: block;
width: 48px;
height: 48px;
/* background-color: lavender; */
box-sizing: border-box;
padding: 15px; /*아래 div를 가운데 정렬*/
}
.icons > a > div {
width: 17px;
height: 17px;
/* background-color: lightcoral; */
background-image: url(./../img/top_ico.jpg);
background-repeat: no-repeat;
}
.icons > a:last-child {
margin-left: 20px;
}
/* div안에 클래스이름이 .face인 얘를 불러와라- 공백없이 구분 */
div.face {
background-position: 4px 0;
}
div.twit {
background-position: -31px 0;
}
div.pin {
background-position: -67px 0;
}
div.insta {
background-position: -102px 0;
}
div.search {
background-position: right 0; /*right끝나는 시점*/
}
마지막 검색아이콘만(마지막 a태그) margin-left 로 밀어줬다.
background-position 쓸 때 right 같은 값을 줘도 된다. right 쓰게 되면 이미지가 끝나는 오른쪽 시점이 된다.
메인
< Entity code 엔티티 코드>
&는 코드로 해석할 수 있어서 코드로 써준다. = &
HTML 자주 사용 특수문자 코드표 (Entity code)
Entity code 자주 사용하는 html 앤티티 코드를 정리하였습니다. 간혹 정말 필요한데 검색할려니 마땅히 무엇을 적어야 할지 몰라 당황했던적이 있습니다. 생각해보면 특수문자 또는 html code라고만
aneok.tistory.com
< section 1 >
- <b></b>태그는 인라인 속성으로 인라인 속성에는 <br>가 블록속성이라 들어갈 수 없다. 그래서 <br>태그를 기준으로 앞 뒤로 끊어줘야한다.
-버튼은 클릭하면 다른 페이지로 이동하는 버튼이니 a태그로 만들어도 된다. 그리고 css에서 a 버튼에 넓이를 주기 위해 display:block 으로 속성을 변경해준다.
-class 이름은 공백으로 구분해서 여러 개 만들어줄 수 있다. ex) <a href="#" class="black_btn btn1>
> css
main {
width: 100%; /* 섹션별로 너비가 달라서 일단 100%로 채워둔다. 어떤 섹션은 브라우저 전체 영역을 차지하고 있어서*/
height: auto;
margin-top: 100px;
}
section {
padding: 80px 0;
}
/* 첫번째 섹션 */
.main_txt {
width: 100%;
height: auto;
text-align: center;
}
.main_txt h4 {
font-size: 12px;
font-weight: 800;
letter-spacing: 5px; /*자간*/
}
.main_txt h2 {
font-size: 70px;
line-height: 76px;
font-weight: 700;
letter-spacing: -0.06rem; /*자간 좁게 수정*/
}
.main_txt p {
margin-top: 30px;
font-size: 16px;
margin-bottom: 40px;
}
/* b태그가 초기화되어서 다시 설정해줬다. */
.main_txt b {
font-weight: 700;
}
/*공통 버튼 */
.black_btn {
display: block; /*a태그는 인라인 속성이라 버튼 형태로 만들기위해 속성 변경해줌*/
background-color: #222;
border: 1px solid #222;
color: #fff;
padding: 20px 26px;
margin: 0 auto;
border-radius: 40px;
font-weight: 600;
}
.black_btn:hover {
color: #222;
background-color: #fff;
border: 1px solid #222;
}
.btn1 {
width: 200px;
}- a태그로 버튼을 만들기 위해선, a태그가 인라인 속성이라 블럭속성으로 속성을 변경해준다.
- 나중에 버튼 효과를 줄 때 버튼 크기가 다르면 어색해질 수 있다.
:hover 했을 때 border를 주면서 border 크기가 버튼 크기에 합쳐져 약간 커지는데
그래서 기존 검정 버튼에도 border를 준다.
-버튼은 공통속성으로 묶어서 적용할 건 묶어서 적용해준다.
< section 2 >
> css
.image_box {
width: 100%;
height: fit-content;
margin: 0% auto;
}
.big_box {
width: 1370px;
height: fit-content;
display: flex;
flex-flow: row wrap;
justify-content: space-evenly; /*모든 여백을 골고루 준다*/
gap: 40px;
margin: 0% auto;
margin-bottom: 100px;
}
.big_box > div {
width: 430px;
height: 320px;
overflow: hidden;
background-color: #a7a7a7;
border-radius: 20px;
}
.big_box img {
max-width: 100%;
}-flew-flow: row wrap;
: flex-direction(나열) + flex-wrap(감싸기)을 한꺼번에 선언함 ex) flex-flow: row wrap;
flex-direction: row flex를 적용한 기본 모습
flex-wrap: wrap :요소들을 여러 줄에 걸쳐 정렬하고, 자식의 넓이 높이를 유지함.
< section 3 >
> css
.black_back {
background-color: #222;
color: #fff;
text-align: center;
}
.black_back h3 {
font-size: 55px;
line-height: 70px;
}
.black_back > h3::after {
display: block; /*가상 선택자는 인라인 속성이라서 선 효과로 만들 땐 블럭속성으로 바꾼다*/
content: "line";
font-size: 0; /*content 글자 숨김*/
width: 200px; /*선의 가로 길이*/
height: 3px; /*선의 두께*/
background-color: palevioletred;
margin: 0px auto; /*가운데로 보내고*/
margin-top: 50px; /*위에만 마진으로 벌려주고*/
}
본문 아래 선은 가상선택자로 만들어준다.
가상선택자는 기본적으로 인라인 속성이라 블럭속성으로 바꿔준다.
< section 4 >
>css
.list_wrap {
width: 100%;
height: auto;
}
.list_box {
width: 1000px;
height: auto;
margin: 0 auto;
}
.list_box h3 {
font-size: 30px;
font-weight: 600;
text-align: center;
margin-bottom: 50px;
}
#sitemap {
width: 100%;
height: 140px; /*플롯을 줘서 영역을 인식못해서 높이를 아예 지정해줬다*/
}
#sitemap ul {
float: left;
width: 25%;
list-style: disc inside; /*타입과 포지션을 리스트 스타일로 한꺼번에 할 수 있다. */
font-size: 16px;
}
#sitemap ul li:hover a {
color: palevioletred;
}- 한 페이지에 nav가 여러 개 들어갈땐 nav id=""로 구분한다.
< section 5 >
<section class="black_back">
<div class="content">
<h3>Why SplitShire</h3>
<p>
In the course of almost ten years of photography, I have
accumulated many photos, thousands, who were in the hard disk
gathering dust, so I created SplitShire with the simple aim of
giving them for free. It started as a side project in 2014 and
since then SplitShire stock photos have been downloaded millions
of times, now you can see them around the web, magazines, musical
videos.
</p>
<h4>Daniel Nanescu</h4>
<a href="#" class="white_btn">DONATE</a>
</div>
</section>
</main>> css
.black_back > .content {
width: 1000px;
height: auto;
margin: 0 auto;
}
.content > h3 {
font-size: 70px;
font-weight: 500;
margin-bottom: 50px;
}
.content p {
font-size: 18px;
margin-bottom: 50px;
line-height: 32px;
}
.content h4 {
font-weight: 700;
font-size: 20px;
margin-bottom: 50px;
}
.white_btn {
display: block;
width: 150px;
border: 1px solid #fff;
background-color: #fff;
padding: 12px 0px;
margin: 0 auto;
border-radius: 40px;
font-weight: 600;
}
.white_btn:hover {
background-color: transparent;
color: #fff;
}푸터
<footer>
© 2021 SplitShire - Free Stock Photos & Images - Privacy Policy
</footer>카피라이트 엔티티 코드 : ©
> css
footer {
width: 100%;
height: 100px;
text-align: center;
background-color: #fff;
color: #ccc;
line-height: 100px;
position: relative;
}
'예제 실습' 카테고리의 다른 글
| 실습) iLovePDF 사이트 클론코딩-2 같이 해본 버전 (0) | 2024.06.28 |
|---|---|
| 실습) iLovePDF 사이트 클론 코딩-1 혼자 해본 버전 (0) | 2024.06.27 |
| 실습) Google (0) | 2024.06.24 |
| 실습) 네이버 회원가입 창 (0) | 2024.06.21 |
| 실습) table 게시판 만들기 (0) | 2024.06.19 |
