반응형
스파르타코딩클럽에서 설 연휴동안 '덕담 공유 코딩 패키지' 강의를 무료로 공개했다.
총 강의 시간 1시간으로 부담도 없고, 다른 분이 만든 것 보니까 넘 귀여워서 나도 수강했다ㅎㅎ.
강의 들으며 메모한 내용 간략히 정리!
웹사이트 동작
- 브라우저가 서버에게 요청, 서버가 HTML, CSS, JS 줌
- HTML 뼈대, CSS 꾸미기, JS 움직이기
*tip: vs code에서 open in 플러그인 설치 후, Alt + B -> 창을 바로 띄울 수 있다. (맥은 option + B)
CSS
- 가리켜서 꾸민다!
- 가리킬 수 있어야 하므로 이름표를 붙여줌
- 코드 절대 외워서 쓰는 거 X
- 다시와서 보고 쓰면 됨
- margin, display - 그 박스 입장에서!
개발 시작
생각해야 할 것
- 배경 - div로 만들면 됨
- 덕담아이콘 - 랜덤 위치에 뜨도록
- 버튼 - 둥둥 떠다니게, 창 크기 상관없이 항상
*tip: pc로 개발하며 모바일 화면에서는 어떻게 나올지 확인하는 법 <모바일 확인>
크롬 - 우클릭 '검사' - 창 2개로 바꾸고 - 왼쪽에서 두 번째 아이콘 클릭 - Dimensions - 폰 단말로도 바꿀 수 있음
*tip: div는 눈에 안 보이기 때문에, 배경색을 깔고 하면 좋음.
*tip: 가운데로 몰기: display: flex 4줄!! (필요할 때 마다 복붙해서 쓰면 됨)
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
*tip: 코드 드래그해서 한 번에 tab 가능
코드:
<!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>
<!-- 링크 공유할 때 미리보기 이미지, 설명 나오도록! -->
<meta property="og:title" content="ㅇㅇ 님의 덕담 페이지"/>
<meta property="og:description" content="덕담 한마디 남겨주세요!"/>
<meta property="og:image" content="https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/ogimage.png"/>
<style>
@font-face {
font-family: 'Cafe24Ssurround'; /* 폰트 이름 지정 */
src: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/Cafe24Ssurround.woff') format('woff');
}
* { /* 별 = 모든 것에 적용 */
font-family: 'Cafe24Ssurround';
}
.background {
width: 100vw;
height: 100vh;
max-width: 450px;
background-image: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/bg_default.png');
background-position: center;
background-size: cover;
margin: auto; /* 여백을 동등하게 = 가운데로! */
}
body, h1, p {
margin: 0; /* 자동으로 들어가는 여백 없애주기 */
}
.title {
/* background-color: green; */
color: #3f3732;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 5vh; /* 보는 사람 폰 크기의 5%만큼 띄울래 */
}
.title > h1 {
font-size: 22px;
background-color: white;
padding: 8px 16px; /* 첫 번째는 위아래, 두 번째는 좌우 */
border-radius: 16px;
margin-bottom: 16px; /* h1 기준 바깥쪽 간격 */
}
.title > p {
font-size: 18px;
}
.title > p > span {
font-size: 22px;
}
.btn {
background-color: #3f3732;
color: white;
width: 300px;
height: 50px;
border-radius: 10px;
font-size: 18px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer; /* pc 접속 - 버튼 클릭할 때 마우스가 손 모양으로! */
position: fixed; /* 고정 = 무조건 붙어 있음 */
bottom: 16px;
left: calc(50% - 150px); /* 가운데 위치 - width가 300px니까 반절인 150px 빼줌*/
}
.box > img {
width: 70px;
position: absolute;
bottom: 50%;
left: 20%;
}
</style>
<script src="https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/free_newyear_2022.js"></script>
<script>
let mycode = '개인마다 코드 다름';
</script>
</head>
<body>
<div class="background">
<div class="title">
<h1>덕담 하나 주면 안 잡아먹지!</h1>
<p>ㅇㅇ 님이 받은 덕담: <span>2개</span></p>
</div>
<div class="box">
<!-- <img onclick="alert('새해복!')" src="https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/object3.png"> -->
</div>
<div class="btn">바구니에 덕담 남기기</div>
</div>
</body>
</html>
결과물:
느낀점: 다시 개념을 잡을 수 있는 좋은 시간이었다. Alt + B 단축키도 새로 알게 됐다ㅜㅜ! 이 강의를 토대로 응용해서 간단한 웹페이지 하나 만들어봐야지 다짐.
반응형
'Development' 카테고리의 다른 글
| [git] 깃 원격 저장소 초기화 하기 (0) | 2021.09.07 |
|---|
