본문 바로가기

Web19

[디자인] 색상이 주는 지각적 효과와 감정적 효과의 종류와 예시 디자인에서 색상에 따라 주는 지각적 효과와 감정적 효과의 종류와 예시에 대해서 알아봅니다. [ Contents ]  1. 지각적 효과 (Perceptual Effect)사용자가 무엇을 보고, 어떻게 인식하는지에 관련된 효과  사용자가 시각 정보를 어떻게 처리하는지에 대한 방식이나 효과를 설명합니다. 흔히 크고 색이 강하면 중요하다는 느낌을 받고, 작고 색이 연하면 중요하지 않다는 느낌을 받는 것처럼 사용자가 지각하는 효과를 다룹니다.  1) 동화현상인접 색에 가까운 것으로 느끼는 현상   주변 색깔에 동화되어, 가까운 색으로 느끼는 현상입니다.  2) 잔상효과자극 생긴 후 상이 그대로 남아 있는 현상  오랫동안 응시하다가 다른 곳을 보면, 원래 보던 것에 잔상이 남는 현상입니다. 예전에 착시효과가 한창 .. 2025. 4. 5.
[디자인] RGB와 CMYK 차이, 감산혼합 인쇄용 색상 조합 빛의 3원색인 RGB와 달리, 실제 인쇄할 때에는 CMYK라는 색상 조합을 사용합니다. 이 글에서는 CMYK를 사용하는 이유와 그 색상 조합에 대해서 알아봅니다. [ Contents ]  1. RGB와 CMYK 모니터 화면은 RGB 3종류의 LED 조명에 따라 색깔이 결정됩니다. 빛의 3원색을 그대로 따르죠. 하지만 A4용지에 인쇄될 때는 다릅니다. 물감을 덧칠하면 점점 색이 어두워지는 것처럼, 인쇄도 감산혼합 방식을 따릅니다. 프린터 잉크는 CMYK, 4가지 색으로 이루어져 있으며 이는 아래에서 알아보겠습니다.  2. CMYK 색상조합C: CyanM: MagentaY: YellowK: (Key) Black  프린터에 들어가는 잉크 조합입니다. 특별히 많이 쓰이는 검정은 Blue와 헷갈리지 않기 위해서 .. 2025. 4. 5.
[디자인] 게슈탈트 법칙 개념 및 원리와 패턴: 근접, 유사, 연속, 폐쇄 디자인의 기본 원리로 자주 불리우는 게슈탈트 법칙의 개념과 주요 패턴을 알아봅니다. [ Contents ]  1. 게슈탈트 법칙(Gestalt Laws)인간이 시각적인 정보를 인지하고 해석하는 방식에 대한 심리학적 원리  게슈탈트 법칙은 20세기 초 독일 심리학자들이 제안한 법칙으로, 전체적인 구조나 패턴을 먼저 인식하려는 경향을 갖습니다. 인간이 시각적인 정보를 인지하고 해석하는 방식에 대한 심리학적인 원리에 따라, 아래와 같은 대표적인 법칙들을 내세웁니다.  2. 대표적인 게슈탈트 법칙1) 근접의 법칙(Law of Proximity)서로 가까이 있는 요소들은 하나의 그룹으로 인식  인간은 자연스레 가까운 요소끼리 그룹지어 보려는 경향이 있습니다. 예를 들어 메뉴와 아이콘은 하나의 덩어리로 생각하며, .. 2025. 4. 5.
[HTML] 웹페이지에 이미지, 사운드, 비디오 삽입하기 (img, audio, video) 웹페이지에 이미지, 사운드, 비디오를 삽입하는 멀티미디어 태그를 알아보겠습니다. [ Contents ] 1. 이미지 태그 img 태그는 이미지를 삽입하는 인라인 태그입니다. src 속성에 이미지 경로를 입력하고, width와 height 속성으로 가로 세로의 크기를 조정합니다. alt 속성값은 이미지가 나오지 않을 때, 대신 출력하는 문구입니다. 보통 이미지에 대한 설명을 alt 속성값으로 지정합니다. 이미지가 나오지 않는 이유는 대부분 '잘못된 경로' 때문이며, 이미지의 확장자(png, jpg 등)와 상대주소를 정확히 명시해야 합니다. 절대 주소로 해도 되지만, 폴더 계층구조가 바뀌면 모든 경로를 수정해야 하므로 대개 상대 주소로 적습니다. 루트 폴더는 html 파일이 있는 폴더이고, 보통 './src.. 2022. 5. 27.
[HTML] 테이블 td, th 셀 수평 수직 정렬하기 (왼쪽, 오른쪽, 위, 아래, 가운데 정렬) Table 태그에서 셀들을 수평 또는 수직으로 정렬하는 방법을 소개합니다. [ Contents ] 제목1제목2 내용1내용2 정렬을 알아보기 전에, 먼저 th와 td태그의 속성을 살펴봅시다. th 태그는 표 제목을 주로 나타내며, bold 체와 가운데 정렬이 기본값입니다. 반면 td 태그는 기본 셀로, 왼쪽 정렬되어 있습니다. 1. 셀 수평 정렬하기 Align 내용1내용2 align 속성을 사용하면 셀의 내용을 수평 정렬할 수 있습니다. 기본값인 왼쪽 정렬은 'left', 오른쪽 정렬은 'right', 그리고 가운데 정렬은 'center'입니다. 가운데 정렬을 가장 많이 사용하며, middle과 혼동하기 쉬우니 유의해야 합니다. 2. 셀 수직 정렬하기 Valign 내용1내용2 valign (vertical.. 2022. 5. 26.
[HTML] Table 표에 시맨틱 태그 사용해서 구조화하기 (caption, thead, tbody) 지난 시간에 Table 태그로 표를 만들고 행열을 병합하는 과정을 배웠습니다. 이번에는 시맨틱 태그를 사용해서 표를 구조화하는 방법을 알아보겠습니다. 2022.04.27 - [Web] - [HTML] 시맨틱 태그, 웹페이지의 구조를 알려주는 주석 시맨틱 태그가 무엇이고, 왜 사용해야 하는지는 위 글에서 참조하실 수 있습니다. [ Contents ] 1. 표 제목 태그 표 제목 제목1제목2 내용1내용2 내용 caption 태그는 표의 제목을 달아줍니다. 표 제목 만약 표 제목을 아래에 달아주고 싶다면, css를 사용해서 bottom으로 변경합니다. 2. 제목 행 태그 표 제목 제목1제목2 내용1내용2 내용 thead 태그는 주로 1행의 th태그를 감싸줍니다. 표의 제목행을 나타내는 시맨틱 태그로, 별다른 .. 2022. 5. 25.
[HTML] 테이블 표, 행, 열 만들고 (<table>, <tr>, <th>, <td>) 행열 병합하기 table 태그를 이용해서 표를 만드는 방법을 알아보겠습니다. [ Contents ] 1. 기본적인 테이블 구조 제목1제목2 내용1내용2 내용1내용2 은 'table row'의 약자로 표의 가로 행을 나타냅니다. 태그 안에 한 행에 담을 셀을 넣을 수 있습니다. 는 'table header'의 약자로 표의 제목 셀을 나타냅니다. 주로 1행에서 column 명을 나타낼 때 사용하며, td 태그와 달리 bold 처리와 가운데 정렬이 되어 있습니다. 는 'table data'의 약자로 셀을 나타냅니다. td 태그를 추가하면 하나의 셀이 추가되며, 열이 길어지는 효과도 있습니다. 제목1제목2 내용1내용2내용3 내용1 만약 행마다 셀의 개수가 다르다면, 가장 많은 셀을 가진 행을 기준으로 표의 열이 결정됩니다. .. 2022. 5. 24.
[HTML] 블록, 인라인 시맨틱 태그: figure, details, summary, mark, time, meter, progress 시맨틱 태그는 크롤봇에게 단서를 알려주는 '주석'입니다. 문서의 구조(header, section, article, footer) 외에도 시맨틱 태그를 통해서 어떤 내용을 담고 있는지 알려줄 수 있습니다. 2022.04.27 - [Web] - [HTML] 시맨틱 태그, 웹페이지의 구조를 알려주는 주석 [HTML] 시맨틱 태그, 웹페이지의 구조를 알려주는 주석 웹 페이지의 구조를 잡을 때 사용하는 '시맨틱 태그'에 대해서 배워보겠습니다. [ Contents ] 1. 시맨틱 태그란? 시맨틱 태그(Semantic Tag): 문서의 구조와 의미를 전달하는 태그 시맨틱 태그는 웹 페 star7sss.tistory.com 시맨틱 태그에 대한 자세한 설명은 위 글을 참조해주세요. [ Contents ] 1. 블록 시.. 2022. 5. 11.
[CSS] 스타일이 적용되는 우선순위 (cascading, overriding) 한 태그에 여러 스타일이 적용될 때, CSS는 우선순위에 따라 스타일이 지정됩니다. 이러한 CSS의 캐스케이딩(cascading)과 오버라이딩(overriding)에 대해 알아보겠습니다. [ Contents ] 1. 스타일 캐스케이딩(Style Cascading)과 오버라이딩(Overriding) Cascading은 '위에서 아래로 흐르는' 또는 '상속하는'이라는 뜻을 갖고 있습니다. 하나의 태그에 다양한 스타일이 지정되었을 경우, CSS는 우선순위에 따라 하나씩 적용합니다. 맨 마지막에 적용되는 스타일이 가장 우선순위가 높으며, 해당 스타일로 덮어쓰게 됩니다. (또는 우선순위가 낮은 스타일은 무시되기도 합니다.) 2. 스타일 우선순위 1) 나중에 적용한 속성값의 우선순위가 높음 p {color: blu.. 2022. 5. 2.

티스토리툴바