본문 바로가기

분류 전체보기134

반응형 디자인 - 미디어 쿼리 실습 시작 전 css 링크파일 *{margin:0; padding:0;} li, ul{ list-style : none;} a{ text-decoration:none;} img{max-width:100% ; height:auto;} @media(min-width:767px){ #wrap { width:960px; margin:0 auto; border:1px solid #e3e3e3; } #wrap h1{ color:#fff000; } #wrap .logo{ background-image:url(images/KakaoTalk_20240122_114306622.png); height:280px; } #wrap .logo >h1 { color:#fff000; font-weight: bold; padding:20p.. 2024. 1. 27.
미디어 쿼리(@media)-반응형디자인 미디어 쿼리란? - 반응형 디자인으로 화면의 크기에 따라 디자인이 달라지는 것 미디어쿼리(반응형 디자인) 내용.............. 기본 화면 화면을 줄였을 때(width = 766 이하) 미디어쿼리 예시 2) 박스 박스 박스 박스 박스 박스 박스 박스 박스 박스 박스 박스 반응형은 %로 크기를 주로 조절한다 2024. 1. 27.
포지션 실습하기1(sticky) 등록하기 사진을 position 으로 주고 그만큼 margin 이나 padding을 줘서 크기를 맞추는게 주요 포인트이다. sticky inner1 중단메뉴 중단메뉴 중단메뉴 중단메뉴 inner3 sticky 비교 스티키의 위치가 지정된 위치로 오면 거기에서 고정이 된다. 2024. 1. 27.
포지션 실습하기2 TOP 메뉴 메뉴 메뉴 메뉴 iphone(디스플레이 or 플롯) iphone ipad iMac 아이콘 아이콘 아이콘 아이콘 2024. 1. 27.
07포지션 포지션 규칙 움직일 대상에 absoulte 지정한 박스(부모에) relative top bottom 중 택 1, left- right 중 택1 해서 움직인다 포지션1 포지션2 포지션3 포지션적용 X 포지션적용 O 나에게 relative를 쓸 경우 박스1 박스2 박스3 내 위치 기준에서 움직인다 예시) 메뉴 메뉴 메뉴 메뉴 메뉴 안녕하세요 ....... 안녕하세요 ....... 안녕하세요 .....asdasd.. 안녕하세요 ....... 안녕하세요 .......asdasdas section 기준 우측아래에 생성되었다. 2024. 1. 27.
그림자 사용하기 회원가입 아이디 비밀번호 로그인 border에 그림자를 주고 0, 그 이후2배씩이 보기가 좋은 이 공식이다. ex) 0 , 8 , 16 rgb( 0, 0, 0, 0.15) ease-in-out transition 애니메이션 효과로 (변경할 속성, 시간 , 타이밍함수 , 딜레이 순이다). all , 0.5s , ease-in-out. 0.5s ~ 2024. 1. 26.

티스토리툴바