footer 태그
웹 페이지의 바닥에 넣는 태그
<footer>copyright CODE LION. All rights reserved.</footer>margin: auto;
보통 text-align: center; 를 이용하면 글씨만 가운데정렬이 되고 박스 자체는 옮겨지지 않는다.
이것이 이 html의 오류,부족한 점 이라는데 명시되어 있지 않는다.
그래서 margin: auto를 꼭 함께 붙여야 한다는 것 잊지 말자
box-shadow
box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);1) x축으로 그림자 이동 : 양수면 오른쪽, 음수면 왼쪽으로 뻗음
2) y축으로 그림자 이동
3) 블러
4) spread(확장)
rgba( 0이 검정에 가깝고 255는 가장 밝음 / 투명도(0~1))
웹 폰트
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800&display=swap');
* {
font-family: 'Montserrat';
}Montserrat 폰트 : 많이 쓰인다고 함
“ * ” : 모든 폰트에 적용한다는 의미
section
div가 남발되는 것을 방지하기 위해 쓰이는 태그
남발 예시
<div>
<div>
<div>
<div>
content1
</div>
<div>
content2
</div>
</div>
<div>
content3
</div>
</div>
<div>
content4
</div>
</div>여기에 큰 div안에 section을 섞어주면 좋다
div랑 기능은 똑같은데 다른 포장지라고 생각하기
+) article 도 마찬가지
여러 코드를 섞어 쓰면 가독성 업업
Lorem ipsum (로렘 입숨)
아무 의미가 없는 문장이나 의미 있어보이는 활자들의 나열로,
최종 아웃풋에서 텍스트가 보이는 상황을 가정하여, 임의 텍스트를 미리 삽입해 디자인 완성도를 체크해 볼 수 있다. 그 때 쓰이는 단어!
line-height: 16px;
폰트의 160% 되는 줄 간격이 가장 좋다.
float
“둥둥 떠다니다”라는 의미로 둥둥 떠다니되 왼쪽, 오른쪽으로 떠다니라는 뜻
text-align을 하면서 한 줄로 두 개가 정렬되도록 하고 싶을 때 사용
그런데 이 float는 말 그대로 둥둥 떠다니기 때문에
float를 적용하지 않은 태그들과 겹칠 수 있다. 이럴 때 하나의 가두리를 만들어야 함
div로 묶고
.div{
overflow: hidden;float로 띄워져 있는 것을 다 묶어주고
그 다음에 오는 html의 요소들이 이 float의 영향을 받지 않게 해준다.
