Design #8 HOW WEB PAGES WORK

yonpark·2021년 5월 17일
0

Deisgn & Figma & Webflow

목록 보기
9/10
post-thumbnail

본 블로그의 포스팅 내용은 Udemy Vako Shvili의 "Complete Web Design: from Figma to Webflow to Freelancing" 강의 내용의 일부입니다.

HTML & CSS

HTML은 웹 페이지의 구조와 내용을 구성합니다.
CSS는 콘텐츠의 스타일을 지정합니다.

웹 사이트를 방문하면 브라우저(예 : Chrome)가 HTML 및 CSS 코드와 페이지 표시 방법을 장치에서 읽습니다.

Webflow는 이러한 HTML 및 CSS 코드를 작성합니다.
HTML 요소는 element panel에서 추가됩니다. 예를 들어, 제목 및 CSS 스타일은 Style pannel에서 적용됩니다.

Element Hierarchy

NESTING

모든 웹 페이지는 소위 박스 모델로 구성됩니다.
HTML에서 모든 요소는 상자입니다.

최종 모양과 내용에 관계없이 모두 상자로 시작합니다.
그리고 그 모든 상자는 다른 큰 상자 안에 있습니다.

다른 모든 것이 놓여있는 마지막 큰 상자 인 Body까지 내려갑니다.

한 개체를 다른 개체 안에 배치하는 것을 Nesting이라고합니다.

Nesting은 Navigator panel에서 가장 쉽게 볼 수 있습니다.

Section 내에 중첩되면 Container는 section의 하위 요소가됩니다.

요소의 중첩은 캔버스 또는 탐색기 패널에서 변경할 수 있습니다.
한 요소를 끌어서 다른 요소 안에 배치하기만 하면됩니다.

TEXT STYLE INHERITANCE

요소에 타이포그래피 스타일이있는 경우 이러한 스타일은 자식 및 손자 요소로 전달됩니다.

예를 들어 Body 요소의 글꼴 모음을 편집하면 페이지의 모든 글꼴이 해당 스타일을 상속합니다.

Orange labels와 아이콘은 스타일이 상위 요소 나 상위 클래스 또는 태그에서 상속되고 있음을 나타냅니다.

profile
👋 My name is Yonghun, I am a developer working at Droot My major is business administration📚, and I have been studying computer science💻 since 2020. I have project experience using Python(My most confident language)

0개의 댓글