HTML / CSS 기초 문법

CODING/HTML,CSS

by 피그말리온(PYGM) 2022. 5. 27. 20:15

```
div태그: 여러태그들을 묶어서 css를 함께 꾸며주기 위한 태그

HTML
section태그: div와 속성 똑같다 (=article) --> 난잡하지 않도록 구분하는 것 뿐

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이력서</title> --> 웹 탭 상단에 표기
<link rel="stylesheet" href="codelion.css" />
</head>
<body>
<div class="mainbox">
	<h1>이력서</h1>
	<p class="big-font">HTML/CSS</p>
	<p class="small-font">HTML/CSS</p>

   <section>
     <h2>About Me </h2>
     <p class="name-text">HTML/CSS개발자</p>
  </section>
<a href="http://facebook.com">
  <img class="sns-img" src="images/facebook.png">
</a>

  <img class="sns-img" src="images/facebook.png">
  <img class="sns-img" src="images/twitter.png">
  <img class="sns-img" src="images/linkedin.png">
</div>
<footer>copyright CODE LION. ALL rights reserved.</footer>
</body>
</html>


CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800&display=swap');    --> 구글폰트 컴업 인기가 많음

* {
font-family: 'Montserrat';
}

footer {
text-align: center;  --> 박스안의 텍스트 정렬
background-color: black;
color: #122111;
font-size: 15px;
font-style: italic;   --> 폰트 기울임
line-height: 16px; --> 줄간 간격!
margin-left: auto;
margin-right: auto;
margin: 30px;                --> 이렇게 3개가 가운데정렬 + 여백 남기기
font-weight: lighter / light / bold / normal or 500;
box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);  --> 0: 가로축으로 그림자 뻗어나가는 정도(양수면 오른쪽, 음수면 왼쪽), 1px: Y축으로 그림자 이동, 20px: 흐림정도 0: 퍼진 정도(spread)

border-bottom: 1px solod #ebebeb;  ---> 일반적으로 연한 밑줄 매우 연하다!
padding-bottom: 5px;
margin-bottom: 10px;

}

.small-font {
font-size: 15px;
border: 2px solid black;
width: 610px;
}

.box1{
background-color: skyblue;
width: 100px;
height: 100px;
border: 5px solid black;  --> 박스 두께
padding: 12px; --> 박스 내 공간
margin: 20px;  --> 박스 밖
float: left;
}

.float-wrapper{
overflow: hidden;
}

.box2{
background-color: violet;
width: 100px;
height: 100px;
border: 5px solid purple;
float: right; ---> 한쪽 줄에서 좌, 우로 나눌때
}
```
---> 한쪽 줄에서 좌, 우로 나눌때 --> 두개를 div태그로 묶어(float-wrapper)