깡뇽

반응형 웹사이트 디자인이란? 디자인과 개발이 화면 크기, 플랫폼 및 방향 같은 사용자의 행동과 환경에 반응하는 것을 말한다. → 웹사이트에 있는 다른 콘텐츠의 크기와 웹사이트를 보고 있는 화면의 크기를 기반으로 콘텐츠의 크기를 조정하고 재구성한다. 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..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

- Box(상자) 모델 : 웹 페이지에서 공간을 차지하는 요소의 일부를 정의하는 속성 집합 -> 콘텐츠 영역의 크기(너비 및 높이) & 패딩 & 테두리 & 여백 ① 높이와 너비 : height와 width 속성을 사용하여 크기를 수정할 수 있다. ex) px 즉, 픽셀을 사용하면 요소 상자의 정확한 크기를 설정할 수 있다. -> 모든 기기에서 동일한 크기 p { height: 30px; width: 120px; } ② 테두리 : 프레임과 같이 요소를 둘러싸는 선, 테두리는 border 속성을 사용하여 설정할 수 있다. ▷ 설정1) width : 테두리의 두께. thin, medium, thick 중에 선택 가능. ▷ 설정2) style : 테두리의 디자인. none, dotted, solid와 같은 10..

① 이미지 둥글게 바꾸기 ex) border-radius를 50%로 하면 원이 된다. 50%보다 작게하면 사각형에서 모서리가 조금 둥글게 된다. img { height: 150px; margin: 0 auto; border-radius: 50%; } ② 위치 바꾸기 : position을 이용해서 위치를 바꾸줄 수 있다. ex) id가 box인 녀석을 position: absolute를 하여 절대적으로 윗공간이 7px가 되는 위치에 배치시켰다. #box { position: absolute; top: 7px; } ⤷ 더 많은 위치 변경 정보를 배울 수 있는 사이트 developer.mozilla.org/en-US/docs/Web/CSS/position position - CS..

- 글꼴 특징 스타일 시트에 지정된 글꼴이 사용자의 컴퓨터에 설치되어 있어야 한다. 서체를 지정하지 않으면 "Times New Roman"이 기본으로 적용된다. 서체의 이름이 둘 이상의 단어로 구성되는 경우 큰 따옴표로 묶어야 한다. - 글꼴 두께 font-weight : 텍스트를 굵게 지정할 수 있다. 숫자로 지정할 경우 100부터 900 사이 숫자 사용. ex①) font-weight: bold; -> 굵게 / font-weight: normal; -> 보통 ex②) font-weight: 400; -> 기본 굵기 / font-weight: 700; -> 굵게 / font-weight: 300; -> 얇게 - 글꼴 font-style : 텍스트를 이탤릭체로 바꿀 수 있다. ex) font-style:..

☆ CSS에서 색상을 표현하는 방법 ① 색상 이름(Named colors) : 색상을 묘사하는 영어 단어 ② RGB : 빨강, 초록, 파랑의 혼합을 표현하는 숫자 값 ③ HSL : 색조, 채도, 밝기의 혼합을 표현하는 숫자 값 - 전경 vs 배경 color : 전경색 변경 background-color : 배경색 변경 - 16진수 ex) color: #000000; 색상표 참고 사이트 developer.mozilla.org/en-US/docs/Web/CSS/color_value - CSS: Cascading Style Sheets | MDN The data type is specified using one of the options listed below. Note: Although values are ..