Mini Projects (66) 썸네일형 리스트형 Knowledge Timeline (4) Responsive Media Query @media(max-width: 900px) { #timeline ul li div { width: 250px; } #timeline ul li:nth-child(even) div { left: -284px; } } @media(max-width: 600px) { #timeline ul li { margin-left: 20px; } #timeline ul li div { width: calc(100vw - 90px); } #timeline ul li:nth-child(even) div { left: 40px; } #timeline ul li:nth-child(even) div:before { left: -15px; border-width: 8px 16px 8px 0; border-color: transp.. Knowledge Timeline (3) Boxes & Arrows #timeline ul { background: var(--primary-color); padding: 50px 0; } /* Create Line */ #timeline ul li { list-style: none; position: relative; width: 6px; margin: 0 auto; padding-top: 50px; background: #fff; } ul에 한번 더 배경색 위아래 padding li list-style: none; -> 점 없애기 나중에 position:absolute; element 나올 것 width: 6px; margin: 0 auto; -> 중앙 배치 padding-top: 위 공간 background:#fff; -> 흰색 => 중앙 흰 라인 /* Boxes .. Knowledge Timeline (2) Base CSS :root { --primary-color: #425b84; --secondary-color: #5b7bb4; --max-width: 1100px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font: normal 1rem/1.5 'Arial', sans-serif; background: var(--primary-color); color: #fff; overflow-x: hidden; padding-bottom: 50px; } #main-header { background: var(--secondary-color); padding: 4rem 0; } .container { max-width: var(--max-width); margin:.. Knowledge Timeline (1) HTML Knowledge Resume Brad Traversy 2007: HTML & CSS Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae, distinctio. Mollitia reprehenderit veritatis officia perferendis dicta obcaecati sapiente, rem quia? 2008: JavaScript & JQuery Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea aut eum assumenda architecto, perspiciatis itaque maiores ex rerum libero provident! 2009: PHP & W.. News Grid (11) Media Query Navigation #main-nav .social { display: none; } #main-nav .container { grid-template-columns: 1fr; grid-gap: 1.2rem; } #main-nav ul, #main-nav .logo { justify-self: center; } #main-nav ul li a { padding: 0.50rem; } sns 아이콘을 지웠다. 로고와 메뉴가 세로 한 줄로 배치되도록 grid-template-columns:1fr;을 주고 각자 중앙에 배치될 수 있게 justify-self:center;을 주었다. 링크 버튼이 좀 작아졌으면 해서 패딩을 조절. #home-articles .articles-container { grid-templ.. News Grid (11) style meta info #article .meta { display: flex; justify-content: space-between; align-items: center; background: #eee; padding: 0.5rem; } #article .meta .category { margin-top: 0.4rem; } News Grid (10) Article Page Lorem ipsum dolor sit amet Written By John Doe January 12, 2019 Entertainment Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore debitis beatae ad doloremque voluptate, blanditiis suscipit error quam fugit sapiente, aliquid quia libero incidunt recusandae enim voluptas nulla sequi similique? Temporibus ad est minima magni molestias obcaecati consequatur cumque exercitationem deleni.. News Grid (9) About Page & Inner Page Grid Container(Utility) About Our Organization Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore debitis beatae ad doloremque voluptate, blanditiis suscipit error quam fugit sapiente, aliquid quia libero incidunt recusandae enim voluptas nulla sequi similique? Temporibus ad est minima magni molestias obcaecati consequatur cumque exercitationem deleniti eos, animi facere recusandae, pariatur eveniet neque.. 이전 1 ··· 4 5 6 7 8 9 다음
