css는 html에 비해 양이 조금 더 많고 외울 것도 많았던 것 같다. 물론 아직까지는 할 만한 난이도라 금방 끝낼 수 있었다. 완벽한 암기는 조금 힘들겠지만 기본적인 구조는 알게 된 하루였다. 미세먼지가 너무 심해 운동을 안 갈까 했지만 꾸준히 운동하기로 스스로 약속 했기 때문에 가서 기분이 좋은 하루가 되었다.
<!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="자기소개.css">
</head>
<body>
<img src="img/IMG_20220801_174713_187.jpg">
<main>
<h2>유주성의 자기소개</h2>
<div>
<span>[나이: 25살]</span>
<span>[학교: 한국외국어대학교 글로벌캠퍼스]</span>
<span>[전공: 융합인재학부(아랍어통번역,중동이슬람전략,ict&ai)]</span>
</div>
<div class="liner">
<ol>
<h4>나의 목표</h4>
<li>대학교 졸업 전까지 <span class="ex">프론트엔드 개발자</span> 역량 갖추기</li>
<li><span class="ex">건강한 신체</span> 유지하기</li>
</ol>
</div>
<div class="liner">
<ol>
<h4>목표를 위한 다짐</h4>
<li><span class="ex">프론트엔드 부트캠프</span> 일정에 맞추어 최선을 다히기</li>
<li>2024년에 무조건 한 번 이상 <span class="ex">해커톤</span> 참여해보기</li>
<li>일주일에 3번 이상 <span class="ex">헬스장</span> 가기</li>
</ol>
</div>
</main>
</body>
</html>어제 했던 과제에서 css를 링크하고 html 자체도 css를 위한 작업을 조금 추가하였다. class를 이용해 선과 단어 강조를 하였다.
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
body {
width: 1200px;
background-color:rgba(243, 231, 214, 0.509);
}
img {
border-radius: 50%;
border: 1px solid black;
width: 300px;
display: inline-block;
}
main {
display: inline-block;
}
h2 {
font-weight: bold;
font-family: 'Black Han Sans', sans-serif;
display: inline-block;
}
.ex {
font-weight: 700;
}
.liner {
border-top: 1px solid gray;
}
div {
margin: 30px 0px;
}폰트를 인터넷에서 임베드 하는 것을 해보았고, 이미지는 원으로 바꾸고, 주요 단어는 굵기를 바꾸었다. 배경은 베이지색 비슷한 색으로 바꾸어 밋밋한 힌색을 대체하였다.
오늘 배운것 요약
- 폰트 크기를 지정할 때는 절대크기(px,pt)와 상대크기(%, em, rem, ch, vw, vh)가 있다. font-size 를 이용해 변경할 수 있다.
- color, background-color, border-color을 이용해 글자 색, 배경색, 테두리 색을 구분 할 수 있다.
- border은 테두리 설정이 가능하고, margin은 테두리 밖에 넓이 설정 할 수 있고, padding은 테두리 안과 콘텐츠 사이의 넓이를 설정할 수 있다.
- 다양한 셀렉터를 공부하였다. 후손 자식 형제 요소들을 선택하는 것 너무 많은 종류가 있어서 생략!
