HTML/CSS Day 3

HTML

footer 태그를 여러개 추가하면,

위치와 상관없이 같은 CSS가 적용된다.

 

같은 태그 구분하기

같은 <footer>의 경우에 다르게 적용하고 싶다면?

👉 <class>, <id> 태그 사용

 

class

<p class="small-font">작은 글씨</p>
<p class="small-font">또 다른 작은 글씨</p>

.small-font{font-size:10px;}

👉 small-font라는 이름의 class라는 속성을 <p>태그에 줌

👉 중복 사용이 가능함 (동일 이름을 여러 곳에 사용 가능)

id

<p id="big-font">유일한 큰 글씨</p>

#big-font{font-size:50px;}

👉 유일한 값을 사용해 꾸며줌

👉 중복 사용 X

 

<footer class="small-font">아무 내용</footer>

.small-font{
	font-size: 10px;
}

<footer class="big-font">아무 내용2</footer>

#big-font{
	font-size: 50px;
}

1. Footer 1 - id를 이용해 큰 폰트
2. Footer 2,3 - class를 이용해 작은 폰트

 

박스 그리기

Footer 한개 남긴 후, 폰트 12로 맞추고 시작!

footer의 배경색 → #1e1e1e

글자색 → #919191

 

<div class="main box">
  <h1>오늘코딩</h1>
  <p>HTML/CSS 개발자</p>
</div>

👉 <h1>, <p> 태그를 <div class= "mainbox">로 묶어 줌

 

.mainbox{
  border: 1px solid black;
  width: 610px;
  margin: 0 auto;
}

👉 테두리: 1px두께, solid 선, 검정색;

👉 박스 넓이 610px

👉 text 가운데로

👉 박스 가운데로

 

🗒️ 정리

1. HTML 파일을 만들고 한국어 파일로 설정
2. Title, heading, paragraph, footer 적용
3. CSS파일 만들고 HTML파일과 연결
4. Footer - 텍스트 가운데로 옮기기, 배경색 - 검정, 글자색 - 흰색
5. Footer - 3개 만들기
6. Footer 1 - id를 이용해 큰 폰트
7. Footer 2,3 - class를 이용해 작은 폰트
8. Footer 한개 남기고 폰트 12로 맞추기
9. 배경색(#1e1e1e), 글자색(#919191) 바꿔보기
10. Footer를 제외하고 메인박스를 만든다.
11. 메인박스 테두리 그리기 - 두께1, 직선, 글자색(#ebebeb)
12. 넓이 610, 박스 가운데로, 텍스트 가운데로