전체 글(151)
-
css 한 줄이상 안보이게 하기
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
2021.07.27 -
z-index, 이미지 위에 글씨 쓰기
position: absolute로 두 개 이상의 요소가 겹치는 경우, 나중에 작성된 태그가 화면에 보이고 먼저 작성된 태그는 밑에 깔리게 된다. 작성순서를 무시하고 위로 올리는 방법 - z-index 설정하기 값이 클수록 화면 가장 위에 보여지게 된다.
2021.07.22 -
video 태그 옵션
controls : 컨트롤바 표시 muted : 강제 음소거 autoplay : 자동재생 loop : 무한반복 html 태그 안에 넣어주면 적용됨
2021.07.22 -
transform: translate(); 위치 좌표 설정하기
transform: translate(가로, 세로); - 자기 자신의 위치에서 가로, 세로로 위치 이동 ▶ 화면 정 가운데에 위치시키고 싶을 때 margin-top: 50%; margin-left: 50% transform: translate(-50%, -50%);
2021.07.22 -
background-attachment: fixed;
기본 배경이미지는 배경이미지가 들어있는 프레임을 기준으로 background-position이 설정됨 background-attachment: fixed; 를 적용하면 이미지가 물리적으로 어느 프레임에 배치되어 있든지 무조건 브라우저 기준으로 위치가 고정됨 -> 패럴랙스 사이트 만들 때 사용됨
2021.07.22 -
object-fit: fill / contain / cover, 이미지, 비디오 크기 조절
object-fit : fill / contain / cover - fill : 이미지의 비율이 틀어지더라도 화면에 꽉 채움 - contain : 프레임에 여백이 남더라도 이미지를 자르지않고 비율에 맞게 꽉 채움 - cover : 이미지가 잘리더라도 여백 없이, 비율에 맞게 꽉 채움 --> IE11 이하에서는 동작이 안됨 (background-size와 같은 역할, 이미지 혹은 비디오에 적용할 수 있음) 배경으로 쓰이는 이미지/비디오는 opacity 값을 주어 약간 연하게 해주는 것이 보기 좋음
2021.07.22