반응형 IT/CSS21 Responsive Design 자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다. ⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️ SIZING ELEMENTS Relative Measurements Responsive Design을 통해 웹 사이트가 화면 크기에 관계없이 모든 장치에서 읽을 수 있고 시각적으로 호소력을 지닐 수 있다. Responsive design는 다음을 기반으로 웹 사이트의 콘텐츠를 크기 조정 및 재구성하는 기능을 말한다. 웹 사이트의 다른 콘텐츠 크기 웹 사이트를 보고 있는 화면 크기 웹 사이트에서 사용되는 픽셀 단위(px)를 사용하며, 픽셀은 콘텐츠의 크기를 정확한.. 2021. 5. 11. Secondary Navigation 자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다. ⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️ SECONDARY NAVIGATION Introduction What is primary vs secondary navigation? primary navigation system에는 일반적으로 사이트의 모든 페이지에 표시해야 하는 가장 중요한 링크와 버튼이 포함된다. secondary navigation 또는 breadcrumb navigation은 일반적으로 현재 페이지로 이어진 클릭 가능한 페이지 또는 속성 목록으로 구성된다. 사용자가 사이트의 범위와 현재.. 2021. 5. 8. Links and Buttons 자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다. ⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️ LINKS AND BUTTONS Browser Link Styles 기본적으로 브라우저에는 모든 웹 페이지에서 사용할 수 있도록 브라우저("user agnent")에 포함된 기본 스타일 집합인 user agent stylesheet이 포함되며, HTML5 규격은 콘텐츠를 렌더링하기 위한 기본 동작 집합을 정의한다. 이러한 스타일은 raw HTML 파일을 모든 사용자가 쉽게 읽을 수 있도록 스타일링하는 데 사용되며, user agent stylesheet는 hea.. 2021. 5. 8. Text Design 자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다. ⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️ TEXT DESIGN Differntiation Text: HTML Headers 어떤 사용자도 웹 사이트의 모든 문장을 읽지않기 때문에, 사용자가 읽고 싶은 내용과 건너뛸 수 있는 내용을 쉽게 구분할 수 있도록 하는 것이 디자이너의 역할이다. 제목과 자막과 같은 중요한 텍스트 조각을 구별하는 것은 이를 달성하는 효과적인 방법이다. heading, subheading, list(ordered or unordered)와 대비를 만들어 사용자를 사이트 전체로 안내할.. 2021. 5. 8. CSS: Color for UI 자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다. ⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️ COLOR FOR UI Contrast Constraints 대비(Contrast)는 페이지의 요소를 구별하는 좋은 방법이다. 그러나 모든 요소에 그렇게 함으로써 사용자에게 인지 과부하를 유발할 수 있다. 경쟁 요소가 많으면 모든 것이 그들의 관심을 끌기 위해 경쟁하고, 이는 페이지에서 우세한 것으로 이어질 수 없다. 색 사용을 통해 페이지 대비에 대해 생각하고 적용할 때는 전체적인 대비량을 제한하는 것이 중요하다. 이렇게 하면 디자이너는 사용자가 집중하고 수행.. 2021. 5. 7. CSS: Color Theory 자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다. ⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️ COLOR THEORY The Color Wheel color wheel: 예술가들과 디자이너들이 색깔 사이의 관계를 시각화하기 위해 사용하는 도구로 세 가지 색 그룹으로 구성되어 있다: primary, secondary, teriary Primary color(원색)은 빨강, 파랑, 노랑으로 구성 이것들은 삼각형을 이루면서 color wheel에서 서로 같은 거리에 있으며, wheel의 모든 다른 색깔들의 기초가 된다. Secondary color은 녹색, 주.. 2021. 5. 7. CSS: Display and Positioning 자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다. ⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️ DISPLAY AND POSITIONING Flow of HTML HTML에서 요소의 흐름(Flow of elements): 브라우저는 CSS가 없는 HTML 문서의 요소를 문서에 존재하는 것과 같은 순서로 왼쪽에서 오른쪽으로, 위에서 아래로 렌더링하는 것 스타일 HTML 요소에 제공하는 property 외에도, CSS는 브라우저가 요소를 배치(position)하는 방법을 변경하는 property를 포함한다. 이러한 property는 요소가 다른 요소 및 기타 .. 2021. 5. 7. CSS: Box Model -2 자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다. ⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️ CHANGING THE BOX MODEL Why change the Box Model? box model에는 box dimenstion과 관련한 제한이 있다. 이러한 제한은 예제로 가장 잘 설명된다. Hello World h1 { border: 1px solid black; height: 200px; width: 300px; padding: 10px; } 위의 예에서 heading 요소의 box에는 solid, black, 1 pixel thick border이.. 2021. 5. 4. CSS: Box Model -1 자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다. ⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️ THE BOX MODEL The Box Model 상자 모델(Box model)은 웹 페이지의 공간을 차지하는 요소의 일부를 정의하는 속성 집합으로 구성된다. 모델에는 content 영역의 크기(너비와 높이(width, height))와 요소의 padding, border, margin이 포함됩니다. 속성은 다음과 같습니다. 너비 및 높이(width, height): 내용 영역의 너비 및 높이 패딩(padding): 내용 영역과 테두리 사이의 공간 테두리(bor.. 2021. 5. 4. 이전 1 2 3 다음 728x90 반응형
