깡뇽

★ 어떤 사용자도 웹 사이트의 모든 문장을 꼼꼼히 읽지 않을 것이다. 그러므로 사용자가 읽고 싶은 내용과 건너뛸 수 있는 내용을 쉽게 구분할 수 있도록해야한다. - 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 ..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.