WEB/HTML&CSS (4) 썸네일형 리스트형 flexbox LandingPage https://youtu.be/-drcStMYOcM 이 영상을 따라 만들었다. 분석 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: poppins; } ul,nav{ list-style: none; } a{ text-decoration: none; cursor: pointer; color: inherit; } 초기화 css 헤더 Saffron Home About Services Contact header{ position: absolute; top: 0; left: 0; z-index: 10; width: 100%; display: flex; justify-content: space-between; align-items: .. float 레이아웃 예시1 유튜브 링크 IE가 망하고 나서 Flex와 grid를 가지고 레이아웃 짜는 것이 정석이 됐지만 어느정도 float로 짜는 법을 알고는 있어야 한다고 생각한다. 처음구조 Navigation Header Section1 Section2 Footer 처음 구조는 매우 간단한다. Container 세팅 body{ margin: 0; background-color: #dddddd; font-family: sans-serif; } *{ box-sizing: border-box; } .container{ max-width: 1140px; background-color: #ffffff; height: auto; margin: 40px auto; padding: 20px; } h1{ font-size: 30px; mar.. 생활코딩) Parallax 생활코딩parallax Parallax(시차를 이용한 효과) - 겁나 빠른 웹 레시피 수업소개 parallax는 시차라는 뜻으로 천문학에서 사용하는 용어입니다. 즉 멀리 있는 물체는 천천히 움직이고, 가까이 있는 물체는 빨리 움직이는 현상을 의미하죠. 이 현상을 이용하면 입체감, opentutorials.org HTML Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti adipisci fugiat deserunt Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti adipi.. 간단한 CardBox HTML 코드 Fly in the Sky MORE? bg클래스를 가지는 div는 배경 투명도를 조절해주는 역할을 해준다. CSS 코드 body { background-color: #e9ecef; } .cardbox { width: 500px; height: 800px; margin: 0 auto; margin-top: 50px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04); position: relative; } .card_comment { width: 100%; height: 200px; position: absolute; bottom: 0; background-color: #f8f9fa; } .more_btn { font-size: 16px; color: #e9ecef;.. 이전 1 다음
