LEARN/HTML | CSS39 [HTML/CSS] responsive navigation 티스토리에서 제공하는 'HTML블럭' 기능을 사용해봤다! 캡처도 좋지만, 실시간으로 확인할 수 있으니 굿! 'Do ti! 프런트엔드 웹 디자인 입문' 책 보면서 따라했다. 👉 반응형 웹 페이지 HTML 삽입 미리보기할 수 없는 소스 너비가 720 이하일 때는 메뉴가 사라지고, 트리거(햄버거 메뉴)가 생긴다. 실제 웹에서 내 티스토리의 사이즈를 줄여보면 메뉴가 달라지는 걸 볼 수 있다. 일단 따라하면서 jquery로 만들었는데, 추후에 자바스크립트나 부트스트랩을 사용해서 다시 만들어보는 걸로 하겠음. 아 디자인하고, 반응형으로 작동하는 건 보이는데 버튼이 눌리지는 않는다. 그래서 참고하기 위해 이미지는 추가로 올림 index.html HOME ABOUT WEB DESIGN MAP CONTACT MENU s.. 2023. 1. 8. [HTML] meta tag viewport width: 뷰포트의 너비. 기본값 device-width height: 뷰포트의 높이. 기본값 device-height initial-scale: 초기 배율. 기본값 1 1보다 작은 값이면 축소 페이지를, 1보다 큰 값이면 확대 페이지를 표시 user-scalable: 사용자가 페이지를 확대/축소할 수 있는지 여부 지정. 기본값 yes minimum-scale: 확대/축소할 수 있는 최솟값(가로 기준). 기본값 0.25 maximum-scale: 확대/축소할 수 있는 최댓값(가로 기준). 기본값 5.0 minimum-scal와 maximum-scale을 각각 1.0으로 지정하면 user-scaleble 속성을 yes로 해도 사용자가 화면을 확대하거나 축소할 수 없음 target-densityDpi: 고.. 2023. 1. 8. [HTML] form input 💾 Editor: VSCode 고구마 감자 사과 : 큰 input 👉 input에 style 주기 html css input[type="text"] { padding: 10px; font-size: 20px; border: 2px solid black; border-radius: 5px; } input 태그로 하면 모든 input 태그에 스타일이 적용됨. 원하는 타입의 input 태그만 지정하여 스타일을 줄 수 있음 👉 실습 parctice.html contact us Your Email First name Last name Message Subscribe practice.css body { margin: 0px; } div { box-sizing: border-box; } .container { max.. 2023. 1. 6. [CSS] width & max-width & box-sizing 💾 Editor: VSCode 👉 z-index 공중에 떠있는 애들이 많으면 누가 맨 앞에 올 것인가? 순서 지정 html 💡 Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse molestiae dolore sed, est soluta earum. Temporibus cupiditate, tempora doloribus aliquid quo ipsum maxime, architecto iste rerum maiores consequatur quas corrupti? 박스를 하나 더 복사해서 style에 padding을 50px를 주면 위 이미지와 같이 보임 👉 width width는 content 영역의 너비를 의미함 (box 가 아니라 con.. 2023. 1. 5. [CSS] position 으로 박스 위치 조정 & 좌표 💾 Editor: VSCode 이미지가 이렇게 여백이 있을 시에는 body 태그에 style="margin:0px;" 을 줌 Fly me to the moon Do you want to go? click this button 그럼 여백 없이 꽉 채워짐 👉 position (좌표 이동 가능, 공중에 붕 뜸) https://developer.mozilla.org/ko/docs/Web/CSS/position relative: 기준점을 기준으로 이동 (내 위치 기준) static: 좌표이동 X fixed: 현재 화면이 기준 (ex- 고정된 메뉴) absolute: 내 부모 태그 중에 relative 가진 부모 기준 💡 오른쪽 아래 정렬 /* 부모 태그 */ .main-background { width: 100%.. 2023. 1. 4. [CSS] 배경 넣기 & margin collapse 💾 Editor: VSCode 🐥 background-size contain: 세로 고정, 가로로 이미지 반복됨 cover: 이미지를 꽉 채움 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size 🐥 background-repeat no-repeat: 배경 반복 금지 https://developer.mozilla.org/ko/docs/Web/CSS/background-repeat 🐥 background-position (배경 위치 조정) center right left top bottom https://developer.mozilla.org/en-US/docs/Web/CSS/background-position 🐥 background-attac.. 2023. 1. 3. 이전 1 2 3 4 ··· 7 다음
