html
html 순위
<!DOCTYPE html> // 의미 없이 관습적 으로 항상 써준다.
<html> </html> // 시작과 끝 위와 같은 의미로 보통 써준다.
<meta charset="UTF-8"> 한글 정상 출력을 위해 써준다. (head 태그 안에 넣어준다)
<head> </head> : 헤드 태그
<body> </body> : 바디 태그
<p> </p> // 본문
<tittle></tittle> // 홈페이지 위에 적혀있는 타이틀 이름
<footer></footer> // 가장 아래에 (번호,주소,사업자 등록번호, 저작권 ...)을 적는 것이다.
// 링크테그는 닫지 않는다
// "codelion.css"와 연결 되었다.
<link rel="stylesheet" href="codelion.css">
// 클래스 붙혀 서로 다른 p 테그 설정
<p class="big-font">내 이름은 김멋사</p>
<p class="small-font">코드라이언으로 코딩 배웠지</p>
// div 태그 여러 태그를 묶어 CSS로 꾸며주기 위함
<div class="mainbox">
<h1>김멋사</h1>
<p>HTML/CSS 개발자</p>
</div>
// 이미지 추가
// a태그로 링크타고 들어가짐
<a href="http://facebook.com"><img class="sns-img" src="images/facebook.png"></a>
<img src="images/twitter.png">
<img src="images/linked-in.png">
HTML
복사
class 만들 때 “” 따옴표 필수
div 가 많아짐에 따라 section 이라는 태그를 만들어 덜 복잡하게 한다
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;
}
footer {
font-size: 30px; // 폰트 사이즈 설정
text-align: center; // 텍스트를 중앙에 위치한다
background-color: black; // 배경색 설정
color: white; // 글자색 설정
background-color: #1e1e1e; // 색 선택
color: #919191; // 색 선택
}
// 클래스 붙힐땐 항상 앞에 점 붙히기
.big-font {
font-size: 40px;
}
.small-font {
font-size: 15px;
}
// div mainbox 만들기
.mainbox {
background-color: skyblue; // 박스 색깔
border: 1px solid #ebebeb; // 두께 크기, 두께 선 정도(두껍게 얇게 ..), 색깔
width: 610px;
text-align: center;
margin-left: auto; // 박스 가운데
margin-right: auto; // 박스 가운데
padding: 20px; // 박스 안 범위 추가
margin: 20px; // 박스 와 밖의 공간 추가
// 흐림정도, 블러, 퍼진정도, 스프래드, 색깔
box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1); // 그림자 추가
}
// h1, h2 폰트 설정
h1 {
font-size: 36px;
font-weight: bold; // 진하게
font-style: italic // 기울림
}
h2 {
font-size: 20px;
font-weight: lighter; // 엄청 얄게
color: #282828;
border-bottom: 1px solid #ebebeb; // 밑줄 긋기
margin-bottom: 16px; // 밑줄과 거리두기
padding-bottom: 5px; // 밑줄과 거리두기
}
.about-me-text {
font-size: 10px;
line-height: 16px; // 줄간격 설정 폰트사이즈 대비 160%가 가장 이상적이라고함
}
// 좌 우 정렬 , 같은 열에서도 가능
.title-text {
font-size: 11px;
font-weight: bold;
color: #282828;
float: left; // 왼쪽 정렬
}
.year-text {
font-size: 11px;
font-weight: bold;
color: #282828;
float: right; // 오른쪽 정렬
}
// 좌우정렬 가둬주지 않으면 문장에 문제가 생김
.float-wrap {
overflow: hidden;
}
CSS
복사
두께는 다르지만 박스의 크기는 같다
html color code // 보다 많은 선택지에 색깔을 선택할 수 있음 (ex. HEX : #1E1E1E)
폰트 설정하기
