2023.11.28
1px 그림자크기
0 번짐정도
10px 그림자 채도 수준
flex-direction: column;
html에 <p> 태그 추가
css에 ection1 p 추가해서
추가로
위에 보다 아래에
p에 좁은영역을 추가해서 따로 폰트사이즈 추가하는게 합리적이다
<총정리 코드>
@font-face {
font-family: 'TAEBAEKmilkyway';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/TAEBAEKmilkyway.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'JeonjuCraftMjB';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2310@1.0/JeonjuCraftMjB.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Giants-Inline';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/Giants-Inline.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
h1, h2, p {
margin: 0;
}
/*사이트 제목과 그 아래에는 관련된 디자인이 들어감*/
header {
background-color: #F2BDBD;
width: 100%;
height: 100px;
display: flex;
justify-content: center; /*가로 중앙 정렬*/
align-items: center; /*세로 중앙 정렬*/
font-family: 'Giants-Inline';
font-size: 2.5em
}
header h1{
color :#358C74;
}
/*전체 섹션1에 대한 디자인*/
section {
background-color: #48D9B0;
border: 2px solid #358C74;
height: 100vh; /* vh단위는 브라우저창의 비율*/
font-family: 'Giants-Inline';
}
/*세션1에 대한 디자인*/
.section1 { display: flex;
align-items: start; /*aline 과 direction이 반대가 되는상황*/
flex-direction: column; /*세로정렬*/
justify-content: center;
background-image: url(pink.jpg) ;
background-size: cover;
}
.section1 h2, section1 p {
margin-left: 20px;
color : white;
text-shadow: black 5px 0 10px;
font-family: 'TAEBAEKmilkyway';
font-size: 2em;
}
.section1 p {
font-size: 3em;
<!DOCTYPE html>
<html lang="en">
<head>
<title>디지털 디자인 교육</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 웹사이트 제목 -->
<header>
<h1>디지털 디자인 교육</h1>
</header>
<!-- 섹션1 웹사이트 설명-->
<section class="section1">
<h2>여성 대상으로 진행되는 디자인 교육</h2>
<p>비전공자를 위한 첫 코딩 챌린지</p>
</section>
html에 돌아와서
<section> 과
<div> 에 따로 클래스 지정해서 서로 다른 효과주기.
이어서 각 따로 효과를 주기위해 div에 서로 다른 이름으로 클래스로 명명한다.
여태까지는 큰 범위먼저 진행했고, 이제는 사진 먼저 넣기.
css에 추가로
tip)
- 스크롤을 내릴 때 고정하는 방법
header {
background-color: #F2BDBD;
width: 100%;
position: fixed;
height: 100px;
display: flex;
justify-content: center; /*가로 중앙 정렬*/
align-items: center; /*세로 중앙 정렬*/
font-family: 'Giants-Inline';
font-size: 2.5em
}header에 position: fixed; 추가하기
- 스크롤 내리면 상단 부분에 빈공간이 보일 수 있는데,
body를 추가해서 margin 0 을 주면
스크롤 부분의 빈공간을 채울 수 있다.
css
pic 위에
-
margin 추가
width 와 height의 수치와 단위를 바꾸면
여기서 모서리가 너무 딱딱하면
-이제 각 칸에 이미지를 넣어보기-
/*이미지 넣는 공간, 주석으로 미리 추가하면
추후 이미지 수정시 금방 찾을 수 있어 편리함*/
.pic1 {
background-image: url(pic1.jpg);
background-size: cover;
}
.pic2 {
background-image: url(pic2.png);
background-size: cover;
}
.pic3 {
background-image: url(pic3.png);
background-size: cover;
background-position: center;
}
/*backround-size: cover는지정된 틀 딱 맞게 넣어주는 기능 사진이 크면 잘림*/
/*pic3사진은 그림이 짤려서 , 그림을 중앙을 포커스
이제 전제 section 의 컬러를 수정. 왜냐하면 저 초록색이 거슬리기 때문에
선이랑 색깔을 없앴더니
보통 처음에 가이드라인으로 색 지정 먼저하고, 그림 채우면 그 뒤에 가이드라인 색은 지우는게 깔끔하게 진행된다.
이미지 태그만 쓰면 글자 안에 글이 안들어가는데
div 태그 쓰면 이미지 위에 글자가 들어간다. 보통 웹페이지는 이렇게 활용한다.
display: flex; 써도 왜 변화가 없는지?
글자색 color 추가
filer 포토샵 효과
font-size 추가함
span 태그안에 a 태그 넣기
더보기 위치를 끝으로 옮기기
처음엔 범위 먼저, 그다음 이동수준 설정
padding 은 안쪽 공간 범위
margin 은 바깥쪽 공간 범위 설정시 이용
/*푸터 디자인*/
footer {
background-color: #F2BDBD;
height: 60px;
font-family: 'JeonjuCraftMjB';
text-align: center;
padding: 40px;
}
/* 안쪽 공간 범위는 padding, 바깥쪽 범위는 margin을 주로 사용함*/
결과 영상