본문 바로가기

분류 전체보기

 (207)
News Grid (7) Padding & Background Color Utility .bg-dark{ background:var(--dark-color); color:#fff; } .bg-primary{ background:var(--primary-color); color:#fff; } .bg-secondary{ background:var(--secondary-color); color:#fff; } .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark a, .bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary a, .bg-secondary h1, .bg-secondary h2, .bg-secondary h3, .bg-secondary a { color: #fff; } .py-1 { padding: 1...
News Grid (6) Home Articles Grid Editor Picks Entertainment Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quam eius ducimus optio veniam sit nihil beatae ea autem. Doloribus. Sports Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quam eius ducimus optio veniam sit nihil beatae ea autem. Doloribus. Technology Lorem ipsum dolor sit amet Lorem ip..
News Grid (5) Category & Button Utility 카테고리 기본 스타일 .category { display: inline-block; color: #fff; font-size: 0.55rem; text-transform: uppercase; padding: 0.4rem 0.6rem; border-radius: 15px; margin-bottom: 0.5rem; } 카테고리별 배경색 .category-sports { background: var(--sports-color); } .category-ent { background: var(--ent-color); } .category-tech { background: var(--tech-color); } 버튼 기본 스타일 .btn { display: inline-block; border: none; backg..
News Grid (4) - Header Showcase 기본 마크업 Sports Some Sports Article Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam facilis quasi sapiente dolorum sed dolor laudantium eligendi nihil rem cum? Read More #showcase { background-color: var(--dark-color); color: #fff; padding: 2rem; position: relative; } showcase의 기본 배경색, 글자색, 패딩. position:relative를 사용한 이유는 showcase:before이라는 pseudo selector를 이용해서 showcase에 배경 이미지를 넣어주려..
News Grid (3) Basic CSS :root { --primary-color: #c72727; --secondary-color: #f99500; --light-color: #f3f3f3; --dark-color: #333; --max-width: 1100px; } .category { --sports-color: #f99500; --ent-color: #a66bbe; --tech-color: #009cff; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Lato", sans-serif; line-height: 1.5; background: var(--light-color); } a { color: #333; text-decoration: none; ..
News Grid (2) Nav Bar (HTML) Home About navbar 속에 container img .social a i a i a i a i ul li li
News Grid (1) Setup & Favicon 기본적으로 boilertemplate에 넣은 것들. - fontawesome - main style sheet인 css/style.css 넣어주기 - 모바일 사이즈 미디어 쿼리를 위해 css/mobile.css도 넣어준다. 그런데 이 파일은 화면 너비가 최대 768px까지만 영향을 줄거라서 media="screen and (max-width:768px)" 속성도 넣어줘야 한다. - favicon favicon이 뜨지 않으면 그냥 f5가 아니라 shift + f5를 누른다. f5가 단순히 페이지를 reload해준다면 shift+f5는 cached content를 무시하고 페이지를 reload 해준다.
CSS Grid 수업 필기(5) Media Queries & The Grid Heading Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, veniam animi soluta aspernatur corrupti ratione. Heading Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, veniam animi soluta aspernatur corrupti ratione. Heading Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, veniam animi soluta aspernatur corrupti ratione. Heading Lorem ipsum, dolor sit amet co..

티스토리툴바