학습내용
smooth-moving
네이버 쇼핑 페이지를 카피캣해보면서, 화면이 줄어들 때 박스들이 부드럽게 옮겨지는 효과를 주는 방법이 궁금했다.
-> 내가 모르는 미디어 쿼리의 효과 중 하나겠지 싶어서 'smooth media query'이렇게 검색해보았다.
-> 맨 위의 stackoverflow 질문의 답으로 transition: ease all .5s;이 나와있었다.
- absolute한 box를 두 개 만들어서 top, left 값으로 media query 적용 전, 후를 각각 배치시킨다.
transition: ease all .5s;을 움직이는 박스의 css에 추가시키면 된다. all은 모든 속성이라는 의미.
em tag
주위 텍스트에 비해 강조된 부분을 기울임으로 나타낸다. 그러나 단순히 기울임꼴이 필요한 부분에 사용하는 것이 아니라, 강조할 상황일 때 쓴다. 어떠한 상황이 아니라 단순히 기울임꼴이 필요할 경우에는 css property font-style을 사용하자. em의 기울임꼴을 font-style:normal로 해제할 수도 있다.
em과 i의 차이
-
<em>은 "Just do it already!"나 "We had to do something about it."처럼 쓸 수 있습니다. 이 글을 읽는 사람이나 소프트웨어는 기울임꼴 부분에 강세를 두고 말할 것입니다. -
<i>는 "The Queen Mary sailed last night."처럼 사용합니다. "Queen Mary"를 강조하는 것도 아니고, 중요한 단어도 아닙니다. 다만 이 단어가 Mary라는 이름의 여왕이 아니고, Queen Mary라는 이름의 선박임을 나타낼 뿐입니다. "The word the is an article"도 좋은 예제가 되겠습니다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/em
CSS 텍스트 스타일
글꼴 스타일
- font-style : normal, italic, oblique
- font-weight : 폰트 굵기. normal, bold, lighter, bolder, 숫자
- text-transform : 소문자, 대문자. none, uppercase, lowercase, capitalize(모든 단어의 첫 글자를 대문자로), full-width
- text-decoration : decorate-line의 종류, 색, style, 두께 설정.
- text-shadow: 4px 4px 5px red; 말 그대로 텍스트 그림자.
텍스트 레이아웃 스타일
- text-align : left, right, center, justify
- line-height
shorthand
font : font-style (en-US), font-variant (en-US), font-weight, font-stretch (en-US), font-size, line-height (en-US), and font-family.
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;https://developer.mozilla.org/ko/docs/Learn/CSS/Styling_text/Fundamentals
Freely-usable Image
https://pixabay.com/ko/
https://unsplash.com/
