Escape

Grid Template Areas 문자열을 값으로 받아들여서 , 보다 직관적으로 표를 구성할 수 있게 해주는 도구 아래 예시의 경우 2열, 4행의 grid를 구성하는데 각각의 item에 이름을 미리 붙여주는 역할이라고 생각하면 된다. .container { display: grid; max-width: 900px; position: relative; margin: auto; grid-template-areas: "head head" "nav nav" "info services" "footer footer"; grid-template-rows: 300px 120px 800px 120px; grid-template-columns: 1fr 3fr; } header { grid-area: head; } nav..

Flexbox에 관한 내용 이후 다루는 것은 grid 이다. flex와 유사한 문법구조를 가지고 있다. grid를 설정하려면 flex와 비슷하게 display: grid; 혹은 display: inline-gird; 로 표현하면된다. 기본적으로 grid는 1개의 column을 가지고있다. 새로운 아이템을 추가할 때마다 새로운 row가 생성되게 된다. 그렇지만 이렇게 하면 당연히 공간이 부족하기 마련이고, 따라서 우리는 row와 column을 몇개로 할 것인지 지정을 해줘야만한다. column과 관련된 명령어 grid-template-columns 를활용하면 column의 갯수와 , 너비를 결정할 수 있다. grid-template-columns: 100px 200px ; 위의 예시를 보면 100px 너비..

Grids 우리말로 하면 격자라고 부를 수 있는데, 화면을 구획별로 나누어 놓는 것 자체를 의미하는 것 같다. 이렇게 구획으로 나누어서 얻을 수 있는 이점은 아래와 같다. 화면 배열이 용이해짐 디자인의 일관성에 도움이 됨(같은 간격의 배열) 따라서 유저가 웹사이트를 알아가는데 매우 도움이 됨(유저 친화적임) 우선 기본적인 개념이 크게 Colomn , Gutter , Margin 세가지가 있는데, 간단하게 도식으로 보면 다음과 같다. Column은 보통 12~16개 정도로 이루어져있고, 화면의 너비를 분할하는 수직형의 container라고 생각하면 된다. 각각의 칼럼을 부딪히지 않게 빈공간을 두는 것이 Gutter. 그리고 이용자의 환경에 따라 화면에 충돌하지 않게 공간을 남겨두는 것이 margin이라고 ..

Brand color 브랜드에서 중심적으로 사용되는 컬러로, 코카콜라의 붉은색 / 토스의 파란색 (물론 코드는 다르겠지만) 이 대표적인 예라고 할 수 있다. 각각의 브랜드를 연결하는 색으로 어떠한 색을 정하면 일관되게 그 색을 사용하는 것이 중요하다고 할 수 있다. 코드카데미에서는 , 그 서비스의 60% 이상을 기준으로 삼는다고 설명한다. 아래 참고란에 브랜드의 색상을 뽑아놓은 링크를 소개한다. Buttons / Forms 버튼이나 폼의 경우 버튼이 hover 되었을 때나, Form이 채워지지 않거나 조건을 만족하지 않았을 때 등 표현할 수 있는 방법이 여러가지 있다. Form은 대표적으로 Form을 형성하고 있는 border의 색을 바꾸는 방법이 있다. 또한 activate 상태와 disabled 상태..

UI(user interface)에 대한 이해와 그에 따른 CSS 용법을 배우게 된다. 이 단원을 통해 배우게 되는 것은 다음과 같다. 1) 와이어프레이밍이 무엇인지 2) 와이어 프레임을 만들어 보는 것(다양한 플랫폼에서 구동가능한) 3) 색상이론이나 활자 디자인 등의 UI이론등을 학습하는 것 Wireframe 이란? 일종의 '설계도면'이라고 생각하면 편하다. 우리가 어떠한 서비스를 개발할 때(웹페이지, 앱 etc.,) 실제 개발에 착수 하기전 어떠한 요소를 어디에 배치할 것이고 , 어느 형태로 디스플레이 할 것인지를 계획하는 단계를 말한다. 특징적으로 wireframe의 경우에는, 보다 단순하고 간단한 시각적인 레이아웃으로 이루어져있다. 페이지의 구조와 , 각 페이지별 연결 방식에 대해 이해하기 쉽게 ..

코드카데미 문제를 해결하다가 어려웠던 부분이 있어서 공부하는 겸 기록을 위해 남겨놓는 포스팅. 과제로 주어졌던 문제는, 주어진 inline CSS를 ruleset CSS로 옮기는 작업이었다. 근데 input element와 form element를 처음보다 보니 어떤 부분을 남겨야하고 어떤부분을 옮겨야 하는지 순간 멘붕이 왔었다. 차근차근 다시보니 input의 기본 구조만 남기고 style attribute에 적힌 것들만 옮기면 되는 일이었다. input 자체에 딸려있는 type 속성 덕분에 input은 강력한 기능을 발휘하게 된다. 다음 문제에서 막혔던 것은 Display를 활용한 도형의 배치. inline 과 inline-block 개념을 익히는 데 스트레스를 너무 많이 받았다 ㅠ

1차 2차 3차 색상이 있는데, 1차는 빨, 노, 파 / 2차는 1차를 섞어서 나오는 색상으로 초, 주, 보 가있고 / 3차는 다시 1차와 2차를 섞어 나오는 색상들로 아래와 같은 종류가 있다. Red-orange (Vermillion) Yellow-orange (Amber) Yellow-green (Chartreuse) Blue-green (Teal) Blue-purple (Violet) Red-purple (Magenta) 이전에도 서술되었듯이 , 색상을 표현하는 CSS의 방법에는 여러가지가 있다. 1. color name 2. HEX code 3. RGB 4. hsla 예를 들자면 h1 { color: Yellow; /*Keyword */ } h2 { color: #8FBC8F; /* Hex Cod..

헨젤과 그레텔이 빵조각을 쫓아 숲에서 길을 찾던 방식처럼, 우리가 웹페이지에서 어느 위치에 있고 어느 카테고리에 속해있는지를 알게 해주는 장치를 breadcrumb (빵부스러기) 라고한다. 이러한 breadcrumbs의 종류에 대해 다룬다. Location Attribute Path Location Based Breadcrumb: this shows the trail of current file location from the main directory. Like documents folder on your system. Attribute-Based Breadcrumb: this shows the trail of attributes of which your items fall into.Its analog..

CSS codecademy 프로젝트 summit 해결하다가 알게된 사이트 공유 CSS shadow 기능은 버튼 등을 만들 때 보다 유려한 디자인을 위해 그림자를 형성하는 기능이다. shadow-box : 형식으로 작성하게 된다. 아래는 CSS shadow를 적용한 여러 예시를 간편하게 복사할 수 있는 사이트인 getcssscan의 링크이다. https://getcssscan.com/css-box-shadow-examples

Transition 두 상태(state)를 자연스럽게 이어지게 만들어주는 속성이다. 바로 property를 받아들이게 하지 않고 그 사이에 설정된 만큼의 딜레이를 주거나 해서 자연스럽게 이어지는 애니메이션을 부여하게 해준다. 기본 문법은 다음과 같다. transition transition-delay transition-duration transition-property transition-timing-function transition은 shorthand property로 위에 네가지 property를 한 줄로 표현할 수 있다. 그렇게 했을 때의 문법은 다음과 같다. transition : propertyname(색깔, 배경 등등) duration(지속시간 단위는 s) transition-timing-..