Categorycss (9)

[번역] 디버깅 시간을 절약할 수 있는 CSS 네이밍

이 글은 Ohans Emmanuel의 CSS Naming Conventions that Will Save You Hours of Debugging 을 번역한 내용입니다.Ohans Emmanuel(원작자)의 허락을 받은 후 작성되었으며, 이 글의 모든 저작권은 Ohans Emmanuel에게 있습니다. 이해의 편의상 의역이 들어가 있습니다.잘못된 번역은 댓글로 남겨주시면 감사하겠습니다!디버깅 시간을 절약할 수 있는 CSS 네이..

[CSS] 5. fr 단위 대하여

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천해 드립니다.fr?fr이란 유연한 크기를 갖는 단위입니다.그리드 컨테이너 내의 공간 비율을 분수(fraction)로 나타냅니다.사용자가 계산해야 할 부분을 fr을 통해서 쉽고 유연하게 사용할 수 있습니다..grid {    display: grid;    grid-template..

[CSS] 4. Grid Name을 이용한 Grid 나누기

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천해 드립니다.Grid name을 이용한 Grid 나누기보기이번 예제에서는 grid css 중 grid-template-columns와 grid-template-rows를 사용합니다.여기에 Grid Name을 할당하여 레이아웃을 나눠보도록 하겠습니다.html element 설정아래와 같은 class를 가진 element를 생성해 줍시다.<body..

[CSS] 3. fr 단위를 이용하여 grid 나누기

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천드립니다.fr 단위를 이용하여 grid 나누기이번 코드에서 중요 포인트는 fr단위입니다.보기아래 css를 보시죠.container {    display: grid;    height: 100vh;    grid-template-col..

[CSS] 2. grid-column, grid-row

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천드립니다.grid-column, grid-row를 이용하여 grid 나누기grid-column과 grid-row를 이용하여 레이아웃을 나누는 법을 알아보겠습니다.우선 기본적인 grid css를 적용해 줍시다.보기.container {    display: grid;    grid..

[CSS] 1. grid-area를 이용한 Grid Layout

들어가기 전링크를 타고 오거나 중간부터 보셨다면 시작하기를 먼저 보시길 추천드립니다.grid-area를 이용한 Grid Layout첫번째 파트입니다.간단하게 그리드를 구현해보겠습니다.아래와 같은 Grid Layout으로 시작해봅시다.보기index.html<!DOCTYPE html><html lang="en"><head>    <meta cha..

[CSS] 0. CSS Grid Layout 시작하기 & 목차

시작하며CSS Grid 관련 내용은 아래 Github에서도 보실 수 있습니다.Github 바로가기CSS Grid?우리는 지금까지 일반적으로 그리드를 구현할 때 라이브러리를 사용하곤 했습니다.ex) Bootstrap, fancyGrid 등하지만 CSS에 공식 GRID 지원 기능이 있습니다.다만 문제라면 Firefox 52, Chrome 57이상 버전의 브라우저를 사용하거나 크롬의 flag 기능을 이용해야 합니다.이렇게 보니 ..

퍼블리싱을 위한 HTML5, CSS3, jQuery 필수구문 정리

퍼블리싱을 위한 HTML5, CSS3, JQuery 필수구문 정리퍼블리싱에는 자바스크립트의 클로저나 객체지향, 함수형 프로그래밍 등에 대해서 고민할 필요는 없습니다.하지만 맨 바닥에서 시작 할 수는 없는 노릇..!정말 기초적인 부분은 안다는 가정하에 퍼블리싱에 필요한 기술들을 리마인드 혹은 배워봅시다.이번 포스트에서는 실무에서 많이 사용되며 꼭 알아둬야 하는 필수 구문들에 대해서 정리해 보았습니다.HTML5HTML5의 새로운 태그들HTML5가 나오면..

12. HTML / CSS

HTMLHTML이란?Hyper Text Markup Language의 약자이며 WWW 문서를 작성하는 Markup Language입니다.하이퍼 텍스트(Hyper Text)란 하나의 문서(Text)로 두는 것이 아닌 문서와 문서를 상호 연결하여 접근 방식을 다양화 시킨 문서를 의미합니다.HTML은 여러 태그로 구성되어 있으며, 각 태그를 사용하여 원하는 문서를 만들 수 있습니다.태그란?Tag태그란 정보를 정의하는 형식입니다.컨텐츠를 감싸서 그 정보의 ..