TIL/웹퍼블리셔취업과정(56)
-
반응형 사이트 만들기 - mediaquery
▶ 특정 브라우저 폭을 지정해서 css 구문을 입력하면 해당 브라우저 폭에서는 미디어쿼리 안쪽에 쓰여진 구문이 기존의 css 구문을 덮어쓰게 됨 - 속성값이 같다면 생략 가능 - 속성값 추가 가능 ▶ 미디어쿼리 구간 안에서 전체 너비값(width)은 총 합이 100%가 되도록 작성 -> 고정 px을 %로 바꾸기 ▶ 원본의 css 구문(태그 경로)을 미디어쿼리에서도 동일하게 써야한다. #header .inner #gnb ▶ 미디어쿼리 구문 쓰는 방법 #header .inner #gnb { } -> 원본 css 구문 @media screen and (max-width:700px){ header .inner #gnb{ } -> 덮어쓸 css 구문 } 풀사이즈 웹 태블릿 1180px 모바일 540px 최소 사이..
2021.07.27 -
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