깡뇽

보호되어 있는 글입니다.

그리드(Grid)란? CSS Grid를 사용하여 전체 웹 페이지를 배치할 수 있다. Flexbox는 주로 1차원 레이아웃에 항목을 배치하는 데 유용하고, CSS 그리드는 2차원 레이아웃에 가장 유용하며 행과 열 모두에서 요소를 정렬하고 이동하는 데 사용할 수 있는 많은 도구를 제공한다. Grid 생성 그리드를 설정하려면 grid container와 grid items가 있어야 한다. 그리드 컨테이너는 그리드 항목을 자식으로 포함하고 전체적인 스타일과 위치를 적용하는 부모 요소이다. HTML 요소를 그리드 컨테이너로 전환하려면, 요소의 display속성을 grid(블록 수준 그리드의 경우) 또는 inline-grid(인라인 그리드의 경우)로 설정해야한다. 그런 다음 다른 속성을 할당해서 그리드를 배치해야 ..

그리드(Grid) 란? 그리드는 교차하는 수평선과 수직선으로 구성된다. ex) 지도 속 거리들 - 도시 레이아웃에 명확한 구조를 형성. 그리드 시스템은 디자인을 구성하는 데 도움이 되며 페이지의 요소를 적절하게 정렬하기 위한 일련의 지침을 제공한다. 그리드는 일관성을 촉진하여 디자인 전체에 적용할 반복 패턴을 구축할 수 있다. → 반복 사용을 통해 웹 사이트 사용에 대한 학습을 빠르게 할 수 있으므로 사용자가 콘텐츠를 명확하게 탐색하고 사용할 수 있다. 그리드 유형 원고 스타일 그리드(manuscript-style grid), 블록 그리드(block grid)와 같이 텍스트를 구조적으로 보이기 위한 그리드 유형이 있다. 웹 디자이너가 사용하는 가장 일반적인 그리드 유형은 열 그리드(column grid)..

보호되어 있는 글입니다.

반응형 웹 디자인 화면 크기는 기기에 따라 크게 다를 수 있으므로 웹 사이트에서 모든 크기의 화면에 가장 잘 맞도록 콘텐츠의 크기를 조정하고 재구성하는 것이 중요함. → 웹 사이트가 표시되는 화면의 크기에 반응하는 것을 반응형 웹 사이트라고 함. ⤷ 반응형 웹 디자인 설명 사이트 www.taniarascia.com/you-dont-need-a-framework/ Understanding the Fundamentals of Responsive Design Responsive web design is an approach to creating websites in which the layout adapts to fit the device's screen - whether it's a phone… www.ta..

반응형 웹사이트 디자인이란? 디자인과 개발이 화면 크기, 플랫폼 및 방향 같은 사용자의 행동과 환경에 반응하는 것을 말한다. → 웹사이트에 있는 다른 콘텐츠의 크기와 웹사이트를 보고 있는 화면의 크기를 기반으로 콘텐츠의 크기를 조정하고 재구성한다. Pixel(픽셀)은 고정된 하드 코딩 값. 즉, 화면 크기가 변하면 픽셀 크기의 요소가 너무 작게 보이거나 화면을 넘치게 된다. → CSS를 사용하여 하드 코딩 측정을 피하고 상대 측정을 사용해야 한다. ∴ 상대 측정을 통해 화면 크기나 레이아웃에 관계없이 웹 사이트의 비율을 유지시킬 수 있다. ⤷ 반응형 웹 디자인에 대해 자세히 설명하고 있는 사이트 www.smashingmagazine.com/2011/01/guidelines-for-responsive-we..

주요 내비게이션 vs 보조 탐색 주요 내비게이션은 일반적으로 사이트의 모든 페이지에 표시되어야 하는 가장 중요한 링크와 버튼을 가지고 있다. 보조 탐색은 일반적으로 현재 페이지로 연결되는 클릭 가능한 페이지 또는 속성으로 구성된다. 보조 탐색 보조 탐색(Secondary navigation or breadcrumb navigation)은 헨젤과 그레텔 이야기에서 길을 잃은 아이들이 돌아갈 길을 찾을 수 있도록 해 준 "빵 부스러기"의 의미를 가진다. Breadcrumbs를 사용하면, 사용자가 사이트의 어느 위치에 있는지 빠르게 파악하고 사이트의 범위를 예측할 수 있음. 이동 경로는 일반적으로 페이지의 가로 형태로 표시되며 최소한의 공간을 차지함. 사용자는 헤더, 왼쪽 부분, 주요 내비게이션 아래 등에서 ..

브라우저 링크 스타일 일반적으로 파란색 텍스트와 밑줄을 사용하여 일반 텍스트와 구별하고 사용자의 주의를 끔. 아직 열리지는 않았지만 클릭한 링크는 빨간색 텍스트, 이전에 방문한 링크는 보라색 텍스트 스타일로 지정. + css 스타일링) 텍스트 밑줄 : text-decoration: underline; ⤷ text-decoration 정보 developer.mozilla.org/en-US/docs/Web/CSS/text-decoration 링크 스타일링 ★ 링크를 주변 텍스트와 구별해야 한다! 기본 파란색 텍스트는 밑줄 링크 스타일이 CSS 속성을 사용하여이 차별화를 수행 : color와 text-decoration. 링크의 텍스트 자체인 태그 안에 Anchor text는 링크 된 리소스를 설명함. }◎ ..

★ 어떤 사용자도 웹 사이트의 모든 문장을 꼼꼼히 읽지 않을 것이다. 그러므로 사용자가 읽고 싶은 내용과 건너뛸 수 있는 내용을 쉽게 구분할 수 있도록해야한다. - HTML 헤더 제목 및 부제목과 같은 중요한 텍스트 부분을 구별해 보여줌. ex) HTML요소 — 제목에 사용. 페이지 당 하나의 헤더만 존재. — 제목에 사용. 사용자가 주로 주목해야 하는 주요 섹션. — 부제목에 사용. → 시각적 계층 구조를 생성. - 글꼴 텍스트를 구분하는 데 유용한 역할을 함. 그러나 각 단락을 새 글꼴로 구분하거나 모든 제목을 다른 글꼴로 사용하면 페이지가 혼란스럽고 읽기 어려움. 대부분의 텍스트를 serif 글꼴로 만든 다음 sans-serif 글꼴로 제목이나 부제목과 대비를 만드는 것이 일반적임. 글꼴의 스타일,..

UI는 무엇일까? 사용자 인터페이스(영어: user interface, UI)는 사람(사용자)과 사물 또는 시스템, 특히 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 뜻한다. 사용자 인터페이스는 사람들이 컴퓨터와 상호 작용하는 시스템이다. ... 출처: 위키백과 → 즉, 웹 사이트를 만들 때는 적절한 색상을 적용하여 사이트의 UI를 개선하려고 노력해야 한다. - 대비 : 페이지의 요소를 구별하는 좋은 방법. 그러나 모든 요소에 대비를 사용하면 지배적인 요소가 없도록 만들고, 사용자들이 인지할 때 과부하가 발생할 수 있음.즉, 웹 페이지에서 사용할 대비를 고려하여 전체적인 대비 정도를 제한하는 것이 중요함. +) neu..

☆ 색상 바퀴 or 색상환(The Color Wheel) 기본 색상은 빨간색, 파란색, 노란색으로 구성. 2차 색상은 녹색, 주황색, 자주색처럼 두 가지 기본 색상을 혼합해 생성. 3차 및 최종 색상은 기본과 보조 색상을 혼합해 생성. → 이름이 2개의 단어로 이루어짐. ex) 3차 및 최종 색상 • Red-orange (Vermillion) • Yellow-orange (Amber) • Yellow-green (Chartreuse) • Blue-green (Teal) • Blue-purple (Violet) • Red-purple (Magenta) - 색상환과 HSLA 16진수 코드와 RGB 값은 직관적으로 조정하기 어렵다. (색이 조금 더 밝아야 한다거나,, 등의 경우에서 표현이 힘듦) HSLA는 C..

보호되어 있는 글입니다.