반응형 eSTRELLa177 Responsive Design - II 자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다. ⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️ MEDIA QUERIES Responsive Web Design 화면 크기는 장치마다 크게 다를 수 있으므로 웹 사이트에서 모든 크기의 화면에 가장 잘 맞게 콘텐츠를 크기 조정 및 재구성하는 것이 중요하다. 웹 사이트가 자신이 보는 화면의 크기에 반응할 때 이를 Responsive website라고 한다. 웹 사이트는 수천 개의 다양한 화면 크기로 표시될 수 있기 때문에 화면 크기 변화에 대응할 수 있어야 하고 사용자가 액세스할 수 있도록 콘텐츠를 조정할 수 있.. 2021. 5. 16. 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. 엘리스 AI 트랙 도레미 파이썬 06. 함수와 메서드 자료의 출처는 엘리스 AI 트랙(https://aitrack.elice.io/courses/) '도레미 파이썬' 이며, 학습 후 정리한 내용입니다. ⚡️올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다.⚡️ 수강 목표 함수가 무엇인지 이해한다. 내장 함수를 사용하고, 함수를 직접 만들 수 있다. 메서드와 함수의 차이를 이해한다. 함수와 메서드 함수 프로그래밍의 기본 틀 컴퓨터에게 정보를 입력하고 컴퓨터가 작업을 하고 컴퓨터가 작업 결과를 출력 함수 특정 기능을 수행하는 코드(들의 모임) 함수의 구조 len(): 자료를 넣으면 그 자료의 길이를 알려준다 int(): 자료를 넣으면 정수형으로 변환해서 알려준다. str(): 자료를 넣으면 문자열로 변환해서 알려준다. 함수의 종류 내장 함수 파이.. 2021. 5. 6. 이전 1 ··· 14 15 16 17 18 19 20 다음 728x90 반응형
