본문 바로가기

CSS🔧/css 가변 요소&레이아웃2

css- pagination 가변요소 페이지네비게이션 (active) 개수마다 컨텐츠가 변하는 가변요소는 무엇으로 만들어야할까? 겹치는 요소가 아니기 때문에 position 아님 왼쪽이나 오른쪽으로 붙이는 요소도 아니기 때문에 float:left 아님 inline:block으로 가운데 정렬을 해준다. 1. html 페이지네이션 이름 지정해주기 첫페이지 이전 1 2 다음 마지막페이지 버튼은 클릭하면 넘어가기 때문에 a 태그로 설정 공통 class 이름 지정하기 btn_paging lasg 마지막페이지 게시판 페이지에 공통으로 들어가는 네이게이션 바 이기 때문에 공통클래스로 처리해 줄것. > 클래스를 정확히 걸수 있도록 각각 이름 지정 2. css로 공통부분에 작성 2-1 자리잡기 전체 div_wrap 부분에 영역 설정 margin-top: 20px; 텍스트가 가운데 올 수 .. 2022. 10. 4.

css @media 미디어쿼리 가변레이아웃 여기 전체 화면일때 4개씩 보이는 컨텐츠를 창을 1412px로 줄여줬을때 3개씩 나오도록 조정해주자. 먼저 그리드 부터 계산을 잘 해주고 들어가야한다 웹 화면은 전체화면 1920이지만, 컨텐츠 그리드는 1280px을 기준으로 한다. (화면 환경이 다 다르기 때문에 표준 1280) 거기에 스크롤바 크기도 감안해줘야 하기때문에 1280 - 17 (세로 스크롤바 크기) = 1263 (컨텐츠 최대크기) 가 나온다. 그렇기 때문에 데스크탑 컨텐츠 그리드는 일반적으로 1200px 을 사용하여 1280에서도 좌우여백 30px씩 확보한다. 따라서 컨텐츠 그리드가 1280 이상일 경우 가변레이아웃 처리가 필요하다 (css 미디어 쿼리 사용) 보통 심미성, 사용성, 매체성 디자인에 사용 컨텐츠 4개일때 전체 넓이 1304.. 2022. 9. 7.

이전 1 다음

티스토리툴바