[코드라이언] HTML/ CSS
HTML / CSS를 이용하여 아래 문서 만들기!!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>김멋사의 이력서</title>
<link rel="stylesheet" href="codelion.css">
</head>
<body>
<div class="mainbox">
<div class="title-box">
<h1>김멋사</h1>
<p class="name-text">HTML/CSS 개발자</p>
</div>
<section>
<h2>ABOUT ME</h2>
<p class="about-me-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section>
<h2>EXPERIENCE</h2>
<div class="float-wrap">
<p class="title-text">Awesome Programming Company</p>
<p class="year-text">2020 - Now</p>
</div>
<p class="desc-text">Front-End Web Developer</p>
<p class="desc-subtext">HTML/CSS, JS, React, ...</p>
<div class="float-wrap">
<p class="title-text">Ministry of Health</p>
<p class="year-text">2015 - 2018</p>
</div>
<p class="desc-text">UI/UX Designer</p>
<p class="desc-subtext">Web design</p>
<div class="float-wrap">
<p class="title-text">Freelance Work</p>
<p class="year-text">2011 - 2015</p>
</div>
<p class="desc-text">Graphic Designer</p>
<p class="desc-subtext">Graphic Design, Editorial Design</p>
</section>
<section>
<h2>ACTIVITIES</h2>
<div class="float-wrap">
<p class="title-text">Front-End Web Developer Forum Volunteer</p>
<p class="year-text">2019 - 2020</p>
</div>
<p class="desc-text">Application Page Development</p>
<p class="desc-subtext">Lorem ipsum dolor sit amet.</p>
<div class="float-wrap">
<p class="title-text">LIKELION SEOUL</p>
<p class="year-text">2017 - 2018</p>
</div>
<p class="desc-text">Teacher in Mutsa University</p>
<p class="desc-subtext">Lorem ipsum dolor sit amet.</p>
<div class="float-wrap">
<p class="title-text">Open Source Committer</p>
<p class="year-text">2011 - 2013</p>
</div>
<p class="desc-text">Angular JS</p>
<p class="desc-subtext">Lorem ipsum dolor sit amet.</p>
</section>
<section>
<h2>EDUCATION</h2>
<div class="float-wrap">
<p class="title-text">Mutsa University</p>
<p class="year-text">2008 - 2012</p>
</div>
<p class="desc-text">Computer Science and Engineering</p>
<div class="float-wrap">
<p class="title-text">Mutsa High school</p>
<p class="year-text">2006 - 2008</p>
</div>
<p class="desc-text">Visual Communication Design</p>
<div class="float-wrap">
<p class="title-text">Online Programming Academy</p>
<p class="year-text">2006 - 2007</p>
</div>
<p class="desc-text">Python Course</p>
</section>
<section>
<h2>AWARDS</h2>
<div class="float-wrap">
<p class="title-text">LIKELION SEOUL</p>
<p class="year-text">2018</p>
</div>
<p class="desc-text">Best Developer Award</p>
</section>
<div class="sns-wrap">
<a href="http://facebook.com"><img class="sns-img" src="images/facebook.png"></a>
<img class="sns-img" src="images/twitter.png">
<img class="sns-img" src="images/linked-in.png">
<img class="sns-img" src="images/insta.png">
</div>
</div>
<footer>
<p>Copyright CODE LION All rights reserved. </p>
</footer>
</body>
</html>-
<!DCTYPE html: html 시작을 알리는 선언으로 큰 의미는 없다 -
<meta charset="utf-8": 한글출력을 가능하게 해주는 명령어 -
link rel="stylesheet" href="codelion.css": head안에 넣어주는 명령어로 CSS를 HTML과 연결시켜주는 역활 -
Html에서 문단을 구분하기 위해
<div></div>, <section></section>, <article></article>모두 사용 가능
- 문단이 많아지는 경우 한 종류로만 표현하기에는 너무 복잡해서 적절하게 섞어서 사용 -
이미지 삽입 :
<img class="sns-img" src="images/twitter.png"> -
링크 삽입 : a
-<a href="http://facebook.com"><img class="sns-img" src="images/facebook.png"></a>
CSS
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800&display=swap');
* {
font-family: 'Montserrat';
}
body,h1,h2 {
margin:0px;
padding:0px;
}
body {
min-width: fit-content;
}
h1 {
font-size:36px;
font-weight: bold;
font-style: italic;
}
h2 {
font-size:20px;
color:#282828;
font-weight: lighter;
margin-bottom: 16px;
border-bottom: 1px solid #ebebeb;
padding-bottom: 5px;
}
.name-text {
font-size:16px;
color:#7c7c7c;
font-weight: bold;
}
.about-me-text {
font-size:10px;
line-height: 16px;
}
.mainbox {
width: 610px;
padding: 30px;
margin: 30px;
margin-right: auto;
margin-left: auto;
border: 1px solid #ebebeb;
box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);
}
.title-box {
text-align: right;
}
section {
margin-bottom:24px;
}
.float-wrap {
overflow: hidden;
}
.title-text {
font-size:11px;
font-weight: bold;
color: #282828;
float: left;
}
.year-text{
font-size:11px;
font-weight: bold;
color: #282828;
float: right;
}
.desc-text {
font-size: 9px;
}
.desc-subtext {
font-size: 9px;
color:#282828;
padding-left:16px;
}
.sns-img {
width:12px;
height:12px;
}
.sns-wrap {
text-align:right;
}
footer {
text-align: center;
background-color: #1e1e1e;
padding: 20px;
font-size: 12px;
color: #919191;
}-
.class {} : html에서 부여한 class명 앞에 .을 찍어서 해당 class를 수정한다는 의미
-
margin > border > padding
- border(테두리) 를 기준으로 외부에 폭을 주는 것은 margin, 내부에 폭을 주는 것을 padding 이라 한다 -
box의 중앙정렬을 위해서 margin auto를 사용
margin-left : auto;
margin-right : auto; -
box-shadow : x축 y축 blur spread rgba(color)
-
구글에서 폰트를 찾아 url을 import 하여 폰트를 변경할 수 있다
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800&display=swap'); -
* {font-family: 'Montserrat';} 로 import된 폰트를 불러와서 사용
- * 은 문서전체에 해당 폰트를 적용한다는 것을 의미한다 -
body,h1,h2 {margin:0px; padding:0px;}
- 브라우저마다 기준값이 다를 수 있으므로 margin과 padding을 초기화 하여 시작하는 것이 좋다 -
float: left; float: right; 로 text를 배열한 경우 다른 요소나 글씨들의 겹침현상 발생
- overflow: hidden; 을 통해 가두리 작업이 요구된다
