- HTML & CSS를 이용해서 자유형식으로 '자기소개 페이지'를 만들어보기
- "웹 호스팅"을 이용해서 자기소개 사이트를 호스팅하기
<!DOCTYPE html>
<html lang="ko">
<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" href="style.css">
<script src="https://kit.fontawesome.com/319ea18cd4.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="section">
<div class="inner">
<h1>"박 별"에 대해서 소개합니다~</h1>
<h2><a href="https://namu.wiki/w/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C" target="_block" title="프론트엔드 개발자 알아보기!">미래의 프론트엔드 개발자</a></h2>
<h3>ABOUT</h3>
<div class="wrap">
<article>
<img src="star.JPG" alt="프로필사진" width="320" height="320">
<a href="#" onclick="getPopup()" title="통화연결">call<i class="fab fa-whatsapp"></i></a>
</article>
<article>
<div class="box1">
<h4>keyword</h4>
<div class="circle1">열정</div>
<div class="circle2">긍정</div>
<div class="circle3">감성</div>
</div>
<div class="box2">
<h4>skill</h4>
<div class="circle4">Html 중</div>
<div class="circle5">Css 중</div>
<div class="circle6">Js 하</div>
</div>
<div class="box3">
<h4>favorite</h4>
<div class="circle7">봄</div>
<div class="circle8">여행</div>
<div class="circle9">BTS</div>
</div>
</article>
<script src="index.js"></script>
</div>
</div>
</div>
</body>
</html>더보기
내가 쓴 HTML 코드 분석
- html 파일에 css파일을 입히기 위해서는, html파일에 ≪ link:css ≫ 를 입력후 엔터를 치면 연결이 가능!!
- 그 후, 가장 큰 골격부터 작성해주기 (안의 요소들을 배치하기위해서 가장 큰 틀부터 작성해주기)
<div id="section">
<div class="inner">
<div class="wrap">
section이라는 큰 틀안에 inner를 넣어 안의 컨텐츠들을 묶어준 후, wrap이라는 틀을 만들어 wrap안의 요소들을 다시 한번 묶어주었다.
※ 왜 틀을 만들어주는 작업을 했는지..?
☞ 틀 안에 있으면, 안의 컨텐츠들에 margin과 padding을 주는 것이 더 간단해집니다! 또한, float기능을 이용했기때문에... 묶어주는 틀이 필요합니다! (큰 덩어리들 있을때만..)
@import url('https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles&family=Poor+Story&display=swap');
*{padding: 0;margin: 0;box-sizing: border-box;}
a{text-decoration: none; }
ul,ol,li{list-style: none;}@charset 'utf-8';
@import 'reset.scss';
body{
background-color: #333;
#section{
width: 100%;
margin: 0 auto;
.inner{
width: 1180px;
padding: 30px;
position: relative;
h1{
font-family: "Poor Story";
color: bisque;
font-size: 60px;
text-align: center;
margin: 45px 0;
margin-top: 60px;
}
h2{
font-family: "Poor Story";
font-size: 30px;
text-align: center;
margin-bottom: 40px;
>a{color: #fff;}
}
h3{
font-family: "Fuzzy Bubbles";
color: #888; font-weight: bold;
font-size: 25px;
position: absolute;
top: 40px; left: 47%;
&::after{
content: "";clear: both;display: block;
width: 20px; height: 2px;
background-color: #fff;
position: absolute;
left: 30px;
}
}
.wrap{
width: 100%;
padding: 30px;
&::after{content: "";clear: both;display: block;}
article{
box-sizing: border-box;
float: left;
&:nth-child(1){
width: 450px;
img{
border-radius: 50%;
box-shadow: 10px 15px 20px #111;
}
>a{
color: #fff;
font-size: 35px;
position: absolute;
left: 370px;
}
}
&:nth-child(2){
width: 600px;
.box1{
width: 200px;
padding: 50px;
float: left;
h4{
font-family: "Fuzzy Bubbles";
font-size: 23px;
color: cadetblue;
font-weight: bold;
margin-bottom: 20px;
letter-spacing: 2px;
}
.circle1{
width: 100px; height: 100px;
border-radius: 50%;
box-shadow: 5px 5px 3px rgba(255, 0, 0, 0.767);
background-color: orangered;
opacity: 0.7; font-weight: bold;
font-family: "Poor Story";
font-size: 25px; text-align: center;
color: #000; line-height: 100px;
margin-bottom: 20px;
}
.circle2{
width: 100px; height: 100px;
border-radius: 50%;
box-shadow: -5px 5px 3px rgba(0, 128, 0, 0.753);
background-color: seagreen;
opacity: 0.7; font-weight: bold;
font-family: "Poor Story";
font-size: 25px; text-align: center;
color: #000; line-height: 100px;
margin-bottom: 20px;
}
.circle3{
width: 100px; height: 100px;
border-radius: 50%;
box-shadow: 5px 5px 3px rgba(36, 0, 128, 0.726);
background-color: rgb(86, 4, 158);
opacity: 0.7; font-weight: bold;
font-family: "Poor Story";
font-size: 25px; text-align: center;
color: #000; line-height: 100px;
}
}
.box2{
width: 200px;
padding: 50px;
float: left;
h4{
font-family: "Fuzzy Bubbles";
font-size: 24px;
font-weight: bold;
color: cadetblue;
margin-bottom: 20px;
letter-spacing: 2px;
text-align: center;
}
.circle4{
width: 100px; height: 100px;
border-radius: 50%;
box-shadow: 5px 5px 3px rgba(255, 182, 193, 0.692);
background-color: pink;
opacity: 0.7; margin-bottom: 20px;
font-family: "Poor Story", "Fuzzy Bubbles";
font-size: 25px; text-align: center;
font-weight: bold;
color: #000; line-height: 100px;
}
.circle5{
width: 100px; height: 100px;
border-radius: 50%;
box-shadow: -5px 5px 3px rgb(225, 240, 252);
background-color: lightblue;
opacity: 0.7; margin-bottom: 20px;
font-family: "Poor Story", "Fuzzy Bubbles";
font-size: 25px; text-align: center;
font-weight: bold;
color: #000; line-height: 100px;
}
.circle6{
width: 100px; height: 100px;
border-radius: 50%;
box-shadow: 5px 5px 3px rgba(255, 250, 205, 0.788);
background-color: lightyellow;
opacity: 0.7;
font-family: "Poor Story", "Fuzzy Bubbles";
font-size: 25px; text-align: center;
font-weight: bold;
color: #000; line-height: 100px;
}
}
.box3{
width: 200px;
padding: 50px;
float: left;
h4{
font-family: "Fuzzy Bubbles";
font-size: 23px;
font-weight: bold;
color: cadetblue;
margin-bottom: 20px;
letter-spacing: 2px;
text-align: center;
}
.circle7{
width: 100px; height: 100px;
border-radius: 50%;
box-shadow: 5px 5px 3px rgba(248, 248, 16, 0.448);
background-color: rgb(252, 206, 68);
opacity: 0.7; margin-bottom: 20px;
font-family: "Poor Story", "Fuzzy Bubbles";
font-size: 25px; text-align: center;
font-weight: bold;
color: #000; line-height: 100px;
}
.circle8{
width: 100px; height: 100px;
border-radius: 50%;
box-shadow: 5px 5px 3px rgba(55, 248, 16, 0.448);
background-color: rgb(145, 252, 68);
opacity: 0.7; margin-bottom: 20px;
font-family: "Poor Story", "Fuzzy Bubbles";
font-size: 25px; text-align: center;
font-weight: bold;
color: #000; line-height: 100px;
}
.circle9{
width: 100px; height: 100px;
border-radius: 50%;
box-shadow: 5px 5px 3px rgba(92, 92, 234, 0.644);
background-color: rgb(93, 3, 247);
opacity: 0.7;
font-family: "Poor Story", "Fuzzy Bubbles";
font-size: 25px; text-align: center;
font-weight: bold;
color: #000; line-height: 100px;
}
}
}
}
}
}
}
}더보기
내가 쓴 SCSS 코드 리뷰하기
- css파일은 일일이 작업하는 것이 좀 더 불편해서 scss파일을 만들어서 작업했다
- reset파일도 따로 만들어서 작업했다
- wrap으로 묶인 틀에 float해제 작업을 해주었고, 각 article이란 컨텐츠들에 float을 해주었다
.wrap{
::after {content: "";clear: both;display: block;}
article {
box-sizing: border-box; float: left;
}
}
분홍색 부분이 float을 해제해주는 방법이다. float속성이 하늘로 붕뜬 기능을 준것이기에 보통 레이아웃을 망가뜨리는 주범이다. 이를 해결하기 위해서는 "float을 해제" & "overflow : hidden;" 이렇게 두가지 방법이 있다.
▶ F l o a t 란..?
→ 서로 영역을 침범하지 않는다는 점에서 position기능과 다른 차이점을 가진다.
→ 나란히 배치해야할 때 쓰이는 기능으로 겹치지않는다.
∴ 즉, float는 쌓아놓는 형식(쌓아놓는데 좌우배치할 것을 띄어서 다시 쌓아놓는 형식)을 의미한다. ('위'가 빠지면 '아래'가 위로 올라가는 방식) => 차곡 차곡 쌓아가면서 컨텐츠를 빌드하는 느낌..!
더보기
사스(sass) 연결법 [scss파일]
- 비주얼 스튜디오 코드에서 scss파일을 생성한다
- sass 실시간 컴파일 명렁어(아래)는 sass를 css로 자동 컴파일해주는 명렁어입니다.
- 터미널창에 아래와 같이 입력하면 됩니다.
- sass는 css전처리기 이기 때문에 브라우저가 sass파일을 해석하는게 아닌 sass로 작성된 파일을 실시간으로 css파일로 컴파일 해주면 브라우저는 컴파일된 css파일을 읽는 식으로 동작합니다.
sass--watch scss/style.scss:css/style.css
더보기
웹 호스팅(web hosting) 하는 법
https://www.youtube.com/watch?v=n1wvs7xuUYk&list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb&index=19
↑↑위 싸이트로 가면, 자세한 설명을 볼 수 있습니다 !!
더보기
"자기 소개 페이지" 를 공개합니다 ~ !
-- 궁금하신 분들은 들어와서 보고 가주세용ㅎㅎ
https://stella0426.github.io/web1/
'wecode [TIL]' 카테고리의 다른 글
| [TIL] Git & GitHub ( 1탄 ) (0) | 2022.02.26 |
|---|---|
| [TIL] Wecode 중간고사 (JavaScript) (0) | 2022.02.13 |
| [TIL] H.T.T.P (Hyper-Text Transfer Protocol) (0) | 2022.02.13 |
| Westagram Login-page (HTML & CSS & JavaScript) (0) | 2022.02.12 |
| Westagram main-page (HTML & CSS & JavaScript) (4) | 2022.02.12 |
댓글