Background-image 사용
-
img src 마크업 속성 대신 사용함
-
반응형 웹을 위해서는 높이값을 px 대신 % 단위를 사용해 준다.
-
이미지의 높이값 조정은 height 속성만 가능할까?
padding-top 또는 padding-bottom 사용을 통해서 안쪽 공간을 주게 된다.
padding-top은 높이 기준이지만 % 퍼센트를 적용하면 너비 기준으로 바뀌어, 너비 기준으로 높이를 잡게 된다. (창 크기에 따라 높이 비율이 유지됨) -
보통 모니터에서 사용하는 16 대 9 의 비율로 적용하고 싶다. 9나누기 16, 56.25%이다.
-
padding-top 을 56.25% 를 적용하였다.
전체적인 마크업, 큰 틀로 덩어리를 나누어 구성
- 페이지의 기본값을 초기화 : body의 margin, padding, font-size, li의 스타일 등등
직업을 나타내는 부분에 애니매이션 적용
- ul 과 li 태그를 사용하여 작성 뒤 inline-block 으로 바로 옆으로 이동시킴
- 상단부분을 위와 맞추기 위해 vertical-align: top 속성을 적용함
- line-height 와 overflow 속성으로 한개씩만 보이게 조절 후 애니메이션 적용
- @keyframes 로 각 구간별로 0%, 25%, 50%, 75% 100% 일 때 margin-top 을 0에서 - em 단위로 조절
- css 클래스에서 animation-name, animation-duration, animation-iteration-count:infinite; 를 사용하여 애니매이션 효과를 최종 적용함
- 그런데 @keyframes 에서 마진활용보다 transform: translateY 속성이 더 부드럽게 동작한다는 것을 배움. translate 는 자기자신의 높이 기준에서 %를 가져올 수 있다 라는 의미이다. Y는 높이 Y축의 의미!
- animation-direction: reverse; 로 하면 반대로 돌아가게 되고
- box-shadow 속성으로 inset(그림자 안쪽 적용), 블러와 스프레드 그리고 색상을 조절하였음
가상 요소의 사용
-
가상 요소로 부모클래스의 자식 요소를 가상으로 만들 수 있다.
.class::after {
}
.class::before {
}
.class li::last-child 또는 nth-child() 이런 식으로 다가.. -
position relative, absolute 속성과 float 속성을 적절히 사용한다.
막대그래프 만들기
CSS Gradient, 복붙으로 완성되는 색상팔레트
-
li 태그로 리스트를 죽 만든 후, 데이터 스코어 속성 만들기
< li data-score = "100%" > 노래 부르기 </ li>
: 이렇게 data score 속성을 사용할 수 있다. -
근데 노래 부르기 100% 이렇게 옆으로 나란히 나오면 별로 안예쁘니까 이 100% 라는 것을 float 으로 오른쪽으로 보내버림. 여기에는,
그래프 리스트의 가상 자식요소를 만들어서 float 속성으로 오른쪽으로 보내버림.
-
content:attr(data-score); 로 적용.
-
.graph li[data-score: "50%"] { width: 50%, box-sizing: border-box}
-
CSS gradient 사이트에서 원하는 색상을 지정한 뒤 복사해서 그래프 li 속성에 그대로 붙여넣으면 완성!
이름 고정시키기. 스크롤해도 그대로 붙어있게.
- position: sticky 를 사용
- 부모와 자식 요소가 필요함. 내가 고정시키고 싶다고 스티키를 써도 적용이 안됨.
- 부모 내에서의 자식 요소를 스티키로 적용시 예를 들어 부모 요소의 높이가 500px 이라면, 자식 스티키는 부모 요소가 끝날 때까지 지속된다.
- name 이름 전체 포지션에 sticky 를 주고 top:0 준 뒤 자식요소에 relative 요소를 주면 스크롤을 하여도 sticky 요소를 작동시킬 수 있다.
미디어쿼리 적용
- 미디어 쿼리 @@
- (괄호 안은 조건을 의미함)
- min-width, 최소사이즈 규정으로 브라우저를 늘였다 줄였다 할 때 이 사이즈보다 더 커진다면? 이라는 조건을 뜻함.
- vh : viewport height (전체 창 기준에서의 높이)
- vw : viewport width (전체 창 기준에서의 폭)
@media (min-width: 768px) {
.portrait {
position: fixed;
left: 0;
top: 0;
width: 60vw;
height: 100vh;
padding: 0;
}
.profile {
margin-left: 60vw;
}
}
Bootstrap 사용
- 사진 : 캐로셀, 슬라이드쇼 적용
- 점보트론 사용
폰트어썸에서 무료 아이콘 적용
구글 폰트에서 다양한 폰트 사용
