github 주소
https://dabin219.github.io/web/
What I learned
폰트 적용 방법
웹폰트
구글 폰트, 눈누 등의 무료폰트 사이트에서 주소를 복사해 적용할 수 있다.
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@100;300;500&display=swap');
</style>
</head>
//CSS
body {
font-family: 'Exo 2', sans-serif;
}폰트 파일
파일을 다운받아 프로젝트 디렉토리에 복사해 url에 폰트 경로를 넣어주면 된다. font-family는 임의로 작성할 수 있다.
//CSS
@font-face{
src: url("");
font-family: "wow";
}
body {
font-family: "wow";
}img
이미지 삽입을 할 때 src에는 디렉토리에 있는 사진 파일을 불러올 수도 있고, 웹 상의 링크를 복사해 불러올 수도 있다. alt 속성은 이미지를 설명하는 대체 텍스트를 삽입해준다. alt속성을 이용하면 시각장애인들은 화면 낭독기를 통해 이미지의 내용을 파악할 수 있다.
<img src="scrolldown.png" width="12px" height="40px" alt=" ">시맨틱 태그
개발자와 브라우저에게 태그의 용도/내용의 의미를 전달한다. div/span은 정보 전달을 하지 않지만, header/footer등의 태그는 해당 태그의 용도를 전달한다. html5에서는 <div class="header"> 보다 <header>를 이용하여 정의하도록 요구한다.
- section : 특정 구역, 제목과 컨텐츠로 이루어진 그룹
- article : 독립적 내용의 컨텐츠 ex)블로그 포스트
- header : 문서나 섹션의 머리말
- footer : 하단 영역 ex)문서의 저자, contact info 등
- nav : 네비게이션 링크 지정
- aside : 주요 컨텐츠와 분리 배치, 주위 컨텐츠와 연관
https://m.blog.naver.com/hadaboni80/221704704219
배경을 이미지로 반복 없이 꽉 채우는 방법
- vh = viewport height
- vw = viewport width
vh와 vw는 실행중인 스크린 크기에 맞춰 상대적 크기를 반환한다. vh/vw는 스크롤까지의 영역을 포함하지만, %는 스크롤바의 영역을 포함하지 않는다는 차이점이 있다.
background-image: url(13.jpeg);
background-size: 100vw 100vh;
background-attachment: fixed;
background-repeat: no-repeat;vh vw 외에도 vmin vmax em rem단위를 사용해 반응형으로 만들 수 있다.
- vmin : vw와 vh 중 더 작은 것 적용
- vmax : vw와 vh 중 더 큰 것 적용
- 1em : 부모의 폰트 크기
- 1rem(relative to the root element) : html의 폰트 크기
em 단위는 계산하기 번거롭다. rem을 이용해 폰트 사이즈 관리를 편하게 만들어보자.
브라우저 기본 폰트 사이즈는 100%=16px이다.
따라서 html {font-size: 62.5%;}를 적용하면 1rem=10px이 된다.
16px=1.6rem과 같은 방법으로 폰트 사이즈를 적용할 수 있다.
이렇게 되면 사용자가 웹 브라우저 설정에서 폰트 사이즈를 임의로 지정해도 잘 보이게끔 설정된다.- 내용/이미지 출처 : https://nykim.work/85
링크 가상 클래스
- link : 방문전, 링크에만 적용
- visited :방문후, 링크에만 적용
- hover : 마우스 클릭할 때, 모든 요소에 적용
- active : 마우스 오버했을 때, 모든 요소에 적용
- 스타일 적용 순서는 L V H A
menu에 hover 적용하기
menu li a {
color: white;
text-decoration: none;
}
.menu a:hover {
color:thistle;
}3 x 2 grid 만들기
.favorites {
display: grid;
grid-template-columns: 225px 225px 225px;
grid-template-rows: 225px 225px;
}- 그리드 형태 정의 : grid-template-columns/grid-template-rows
- fr단위 사용 : 1fr 1fr 1fr;은 1:1:1비율로 만들겠다는 뜻. px과 섞어 쓰며 고정/가변 트랙을 설정할 수 있다.
- 그리드 사용법 완벽 정리 : https://studiomeal.com/archives/533
- examples : https://gridbyexample.com/examples/
배경색만 투명하게 만들기
rgba의 a 수치를 변경하면 투명도가 조정된다. opacity를 사용하면 배경과 내용 모두 투명하게 만들어지니 상황에 따라 선택적으로 사용하자.
background-color: rgba(255, 255, 255, 0.37);
opacity: 0.37;아쉬운점
컨텐츠 영어로 작성
그 어떤 한글 폰트를 적용해도 원하는 느낌이 아니길래 결국 영어로 다시 다 작성했다🥲 앞으로 예쁜 폰트 만나면 꼬옥 저장해놓기🙏🏻
{}
css에서 첫번째 {}가 적용이 되지 않는다. 검색을 뭐라고 해야할지 몰라서 일단 {}를 놔두고 body~ 부터 시작했는데, 다음에 처음부터 css를 작성할 일이 있으면 다시 알아봐야겠다😵
@import "reset.css"
@charset "utf-8";{}
/*scroll*/
body {}grid 반응형 만들기
section 하나씩 스크롤이 되게 만들고 싶었기 때문에 반응형으로 만들어 2 x 3 배열이 되게 하면 사진이 너무 작게 보였다. 이번 자기소개 페이지를 계획할 때 모바일까지 고려하지는 않았기 때문에 크기는 고정해 두었다. 반응형은 미디어 쿼리를 활용한다.
메뉴 .active
수정 과정에서 javascript로 메뉴 active 기능을 추가하고 싶었는데, 어떤 코드를 써도 작동하지 않았다😰 처음부터 다시 작성하기 보다는 더 많이 배운 뒤 자바스크립트까지 고려한 자기소개 페이지를 다시 만들어보고 싶어 이번에는 pass!
효율적인 코드 작성
CSS를 작성할 때 상위 class를 활용해서 간단하게 작성할 수도 있었지만, 처음 웹페이지를 만들었기 때문에 하나하나 작성하며 변경사항을 확인하고 어떠한 코드 때문에 예상했던 것과 다른지 한눈에 파악하기 위해 중복된 코드가 있다. 다음엔 중복을 줄이고 보다 간결하게 끝내봐야겠다!
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>✧*.◟(ˊᗨˋ)◞.*✧</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@100;300;500&display=swap');
</style>
</head>
<body>
<div id="container">
<header>
<nav class ="menu">
<ul>
<li><a href = #list1>Home</a></li>
<li><a href = #list2>About</a></li>
<li><a href = #list3>Favorites</a></li>
<li><a href = #list4>TMI</a></li>
<li><a href = #list5>Contact</a></li>
</ul>
</nav>
</header>
<section class="list" id="list1">
<div class="one">
<h1>Hello, I am Dabin!</h1>
<h5>Please scroll down for my stories</h5>
<img src="scrolldown.png" width="12px" height="40px" alt=" ">
</div>
</section>
<section class="list" id="list2">
<div class ="two">
<div class ="intext">
<h1>[Why WeCode]</h1>
<p>I majored in International Development & Cooperation after volunteering abroad.<br>
After graduating from university, <br>I worked for an NGO which runs crowdfunding platform for startups
of developing countries.<br>
While writing about Social Impact Startups, <br>I realized that technology, especially software,
is the most powerful tool <br>to help address the world’s most challenging issues.</p>
<p>I want to be a developer who changes peoples’ lives for the better.<br>
This is the start of my journey.<br>
Let's staaaaaaart ٩(๑˃̵ᴗ˂̵)و </p>
</div>
</div>
</section>
<section class="list" id="list3">
<div class="three">
<h1>[What I like]</h1>
<div class = "favorites">
<div class="hobby">
<p class = "hobby_text">freediving</p>
<img class = "hobby_img" src="9.jpeg" alt="">
</div>
<div class="hobby">
<p class = "hobby_text"> travelling </p>
<img class = "hobby_img" src="4.jpeg" alt="">
</div>
<div class="hobby">
<p class = "hobby_text"> weight training</p>
<img class = "hobby_img" src="7.jpeg" alt="">
</div>
<div class="hobby">
<p class = "hobby_text"> climbing </p>
<img class = "hobby_img" src="10.jpeg" alt="">
</div>
<div class="hobby">
<p class = "hobby_text"> scuba diving </p>
<img class = "hobby_img" src="scuba.JPG" alt="">
</div>
<div class="hobby">
<p class = "hobby_text"> cycling </p>
<img class = "hobby_img" src="cycle.jpeg" alt="">
</div>
</div>
</div>
</section>
<section class="list" id="list4">
<div class ="four">
<h1>[Want to get to know me better?]</h1>
<div class = "toomuchinfo">
<div class="tmi">
<p class = "tmi_text">[Where I live]</p>
<img class = "tmi_img" src="gupabal2.jpeg" alt="">
</div>
<div class="tmi">
<p class = "tmi_text">[19970219]</p>
<img class = "tmi_img" src="0219.jpeg" alt="">
</div>
<div class="tmi">
<p class = "tmi_text">[MBTI]</p>
<img class = "tmi_img" src="mbti.png" alt="">
</div>
<div class="tmi">
<p class = "tmi_text">[Favorite food]<br>Korean soul food,,,the LOVE,,,</p>
<img class = "tmi_img" src="ddeok.jpeg" alt="">
</div>
<div class="tmi">
<p class = "tmi_text">[Favorite place]<br>the floor of a gym on a leg day</p>
<img class = "tmi_img" src="hell.jpeg" alt="">
</div>
<div class="tmi">
<p class = "tmi_text">[wecode]<br>2021.08 ~</p>
<img class = "tmi_img" src="wecode.jpeg" alt="">
</div>
</div>
</div>
</section>
<section class="list" id="list5">
<div class="five">
<h1>[GET IN TOUCH]</h1>
<h5>Want to get in touch? Here's how you can reach me (๑˃̵ᴗ˂̵)و</h5>
<div class = "five" id="list5">
<a href="https://velog.io/@dabin0219" target="blank" class="ct">Velog</a>
<a href="mailto:dabin0219@gmail.com" target="blank" class="ct">Gmail</a>
<a href="https://github.com/dabin219" target="blank" class="ct">Github</a>
<a href="https://instagram.com/anda_vinci" target="blank" class="ct">Instagram</a>
</div>
<div class="footer">copyright ⓒ 2021 All rights reserved by dabin.</div>
</div>
</section>
<div>
</body>
</html>CSS
@import "reset.css"
@charset "utf-8";{}
/*scroll*/
body {
overflow: hidden;
font-family: 'Exo 2', sans-serif;
background-image: url(13.jpeg);
background-size: 100vw 100vh;
background-attachment: fixed;
background-repeat: no-repeat;
}
::-webkit-scrollbar {
display: none;
}
#container{
width:100%;
height:100vh;
overflow: auto;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
.list{
width:100%;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: center;
}
/*nav*/
.menu *{
display: inline;
}
.menu {
font-size: 14px;
align-items: center;
text-align: center;
position: fixed;
padding-top: 50px;
top: 0;
left: 0;
right: 0;
height: 50px;
}
.menu ul {
padding-left: 0px;
}
.menu li {
margin: 12px;
}
.menu li a {
color: white;
text-decoration: none;
}
.menu a:hover {
color:thistle;
}
/* page 1 */
.one {
text-align: center;
color:white;
}
/* page 2 */
.intext {
width: 780px;
text-align: center;
color:white
}
.intext p {
font-size:15px;
line-height: 170%;
}
/* page 3 */
.three {
align-items: center;
text-align: center;
color: white;
}
.favorites {
display: grid;
grid-template-columns: 225px 225px 225px;
grid-template-rows: 225px 225px;
}
.hobby{
display: inline-block;
font-size: 13px;
}
.hobby_img {
width: 200px;
height: 190px;
display: inline-block;
margin:0px;
border: solid white 0.25px;
}
.hobby_text {
margin-top: 0;
margin-bottom: 4px;
}
/* page 4 */
.four {
align-items: center;
text-align: center;
color: white;
}
.toomuchinfo {
display: grid;
grid-template-columns: 225px 225px 225px;
grid-template-rows: 225px 225px;
}
.tmi{
display: inline-block;
font-size: 13px;
}
.tmi_img {
width: 200px;
height: 190px;
display: inline-block;
margin:0px;
border: solid white 0.25px;
}
.tmi_text {
margin-top: 0;
margin-bottom: 4px;
}
/* page 5 */
.five {
text-align: center;
align-items: center;
color: white;
display:inline;
}
.five h1 {
margin-bottom: 10px;
}
.five h5 {
margin-top: 10px;
margin-bottom: 55px;
}
.five a:hover {
color:thistle;
}
.ct {
text-decoration: underline;
font-size: 25px;
font-style: italic;
margin: 35px;
color: white;
}
.footer {
width:100%;
left:0;
color:white;
bottom:0;
font-size: 10px;
position:fixed;
align-items: center;
margin-bottom: 10px;
}
https://velog.io/@subtitle1/HTML-CSS-자기소개-페이지-만들기 에서 https://blog.naver.com/ym6688/222442685933를 보고 전체 구조를 짜고,
검색을 통해 세부 사항을 작성했다.
모르는것투성이
아니 이걸 사전스터디때?.. 역시 예비 프런트 인...