CSS/CSS 이론에따라 직접해보기18 Flex hello 안녕하세요 flex hello 안녕하세요 flex hello 안녕하세요 flex hello 안녕하세요 flex flex flex flex flex flex flex hello 안녕하세요 flex 2024. 1. 28. 부트스트랩 -커스텀 Page 1 Page 1-1 Page 1-2 Page 1-3 Page 2 Page 3 로그인 Sign Up Login Name: Password: 주소찾기 참조 사이트 https://www.w3schools.com/ 2024. 1. 28. 부트스트랩 그리드 , 모달 사용한 탬플릿, 부트스트랩은 밑에 있습니다. 부트스트랩 그리드 Firstname Lastname Email John Doe john@example.com Mary Moe mary@example.com July Dooley july@example.com 부트스트랩 그리드 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 head위에 부트스트랩에서 받은 css링크를 주면된다 col-*-~ 에서 *에는 크기 ~는 총 12칸중 몇칸을 차지할건지 정해주면된다 lg 사이즈 ms 사이즈 부트스트랩 모달 Open Modal~~ × Modal Header Some text in the modal. Close Open Modal × Modal Header.. 2024. 1. 28. 반응형 디자인 - 미디어 쿼리 실습 시작 전 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. 이전 1 2 3 다음
