2022. 8. 27. 12:29ㆍHTML과 CSS
자기소개 페이지를 만드는 과제
시각적으로 임팩트를 주고 싶어서 선택한 코드입니다.
HTML
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>yuzinne intro</title> <!--링크이름-->
<link rel="stylesheet" href="style.css"/> <!--css 연결 -->
</head>
<body>
<script>
var today = new Date(); //현재 날짜 가져오기(얘를 없애면 현재 시간 분이 적용이 안됨)
var h = today.getHours(); //현재 시간 추출하기
var m = today.getMinutes(); //현재 분 추출하기
var pwd = prompt(h+ "시 " + m + "분에 방문하신 " + "방문자님 반갑습니다 🥰 \n" + "Quiz!! 함께 해서 " + "[1 : wecode] or [2 : ourcode] "+"(번호만 입력해주세요!)") //팝업찹 생성
var goodUrl = "file:///Users/eden/wecode/intro/index.html"
if(pwd == 1) {
alert("정답입니다 ! 함께 해서 wecode❤️")
location = goodURL
}
else if(pwd == 2) {
alert("틀렸습니다 !! 힌트 보고 오세요 !!")
location = "https://wecode.co.kr/" // 페이지가 wecode로 연결
window.open("https://yuzinnee.github.io/intro/") // 새로운 창으로 새 퀴즈 시작
}
else {
alert("보기에 있는 숫자를 제대로 입력하셨나요 ?") // 팝업 뜨고 확인 누르면 다시 입력창으로 감 닫기 누르면 null로 변경
location = pwd
}
</script>
<section class="banner">
<div class="container">
<div class="scr">
<h3>I'M A</h3>
</div>
</div>
<div class="scr"></div> <!--DEVELOPER-->
<div class="scr"></div>
<div class="scr"></div>
<div class="scr"></div>
<div class="scr"></div>
<div class="scr"></div>
<div class="scr"></div>
<div class="scr"></div>
<div class="scr"></div>
<div class="scr">
<h3>NAME</h3>
</div>
<div class="scr"> <!--깃허브-->
<img src ="github.png" alt="https://www.flaticon.com/free-icons/github" width="50px;" height="50px">
<a href="https://github.com/yuzinnee/WECODE" class="ct"><h2> yuzinnee's Github<br>(click me!👆👆👆)</h2></a>
</div>
<div class="content">
<h2>
<span style="--i:1;">d</span>
<span style="--i:2;">e</span>
<span style="--i:3;">v</span>
<span style="--i:4;">e</span>
<span style="--i:5;">l</span>
<span style="--i:6;">o</span>
<span style="--i:7;">p</span>
<span style="--i:8;">e</span>
<span style="--i:9;">r</span>
</h2>
</div>
</section>
</body>
</html>
name에는 원래 이름을 넣으면 됩니다.
위의 GIF파일에서는 안 보이지만
원래는 뒤에 단색의 이름 페이지와 깃허브 링크 페이지가 연이어집니다.
CSS
style.css
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container{
position: relative;
width:100%;
height:100vh;
overflow:auto;
background:black;
scroll-behavior: smooth; /* 스크롤 부드럽게 */
scroll-snap-type: y mandatory ; /* Y축으로 */
}
.scr{
position:relative;
width:100%;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: center;
}
h3{
color:rgb(255, 255, 255); /* I'M A & NAME글씨 */
font-size:10vw;
text-align: center;
}
.scr:nth-child(1){ /* I'M A 배경 */
background: rgb(0, 0, 0);
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.scr:nth-child(2){ /* D 배경 */
background: url('img2.jpg') ;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.scr:nth-child(3){ /* E 배경 */
background: url('img3.jpg') ;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.scr:nth-child(4){ /* V 배경 */
background: url('img4.jpg') ;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.scr:nth-child(5){ /* E 배경 */
background: url('img5.jpg') ;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.scr:nth-child(6){ /* L 배경 */
background: url('img6.jpg') ;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.scr:nth-child(7){ /* O 배경 */
background: url('img7.jpg') ;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.scr:nth-child(8){ /* P 배경 */
background: url('img8.jpg') ;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.scr:nth-child(9){ /* E 배경 */
background: url('img9.jpg') ;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.scr:nth-child(10){ /* R 배경 */
background: url('img10.jpg') ;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.scr:nth-child(11){ /* NAME 배경 */
background: black;
background-attachment: fixed;
background-position: center;
}
.scr:nth-child(12){ /* yuzinnee's Github배경 */
background: white;
background-attachment: fixed;
background-position: center;
}
.content{
position:absolute;
top:0;
width:100%;
text-align: center;
}
.content h2{
position:relative;
display:flex;
justify-content: center;
}
.content h2 span{ /*developer 글씨*/
position:sticky;
top:0;
line-height:100vh;
height:100vh;
color:rgb(255, 255, 255);
font-size:14vw;
margin-top:calc(100vh * var(--i));
}
a { /*하이퍼링크 밑줄없애기*/
text-decoration: none; color: black;
}
# <span> </span>
특정구역에 CSS 스타일 적용할 때 사용합니다.
# <div> </div>
division : 나누기
블록단위로 구분하는 태그입니다.
#scr : nth-child(n) {
background
...
}
그 부모의 n번째(th) 자식 요소 선택
n은 1부터 시작, 정수 뿐 아니라 등차수열 연산식도 가능합니다.
https://homzzang.com/b/css-295
# position : sticky;
sticky - 요소는 문서의 일반적인 흐름에 따라 배치된 다음,
값을 기반으로 테이블 관련 요소를 포함하여
가장 가까운 스크롤링 조상 및 포함 블록(가장 가까운 조상 블록 레벨)을 기준으로 오프셋 됩니다.
오프셋은 다른 요소의 위치에 영향을 주지 않습니다.
top, right, bottom, left의 값을 요구합니다.
이 값은 항상 새로운 스택 컨텍스트를 만듭니다.
문서에 따르면 이 요소는 같은 페이지에서 같은 포지션에 위치합니다.
고정 요소는 "스크롤 메커니즘"이 있는 가장 가까운 조상에
"고정" 된다는 점에 유의해야 합니다.
해당 조상이 실제로 가장 가까운 스크롤 조상이 아니더라도
이 overflow때 hidden생성됩니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
# scroll-behavior: smooth;
smooth - 스크롤 상자는 에이전트 정의 시간 동안
사용자 에이전트 정의 타이밍 기능을 사용하여
부드러운 방식으로 스크롤합니다.
사용자 에이전트는 플랫폼 규칙이 있는 경우 이를 따라야 합니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
scroll-behavior - CSS: Cascading Style Sheets | MDN
The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.
developer.mozilla.org
# scroll-snap-type : y mandatory;
y - 스크롤 컨테이너는 수직 축의 스냅 위치에만 스냅 됩니다.
mandatory - 이 스크롤 컨테이너의 시각적 뷰포트는
현재 스크롤되지 않은 경우 스냅 지점에 놓입니다.
즉, 가능한 경우 스크롤 작업이 완료되면 해당 지점에서 스냅 됩니다.
콘텐츠가 추가, 이동, 삭제 또는 크기 조정되면
스크롤 오프셋이 해당 스냅 지점에 유지되도록 조정됩니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
scroll-snap-type - CSS: Cascading Style Sheets | MDN
The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.
developer.mozilla.org
# text-decoration : none;
밑줄이 없는 기본값으로 설정합니다.
참고
- https://blog.naver.com/ym6688/222442685933