HTML 마크업

HTML 요소를 사용하면 특정 요소 유형에 대한 기본 스타일을 지정하고 대규모 요소 그룹을 동시에 사용자 정의하여 디자인 프로세스를 시작할 수 있습니다. 그런 다음 사이트 디자인을 진행하면서 이러한 기본 스타일을 클래스 및/또는 결합 클래스로 바꿀 수 있습니다.

유용한 힌트: Webflow의 서식 있는 텍스트 필드 내에서 요소를 사용자 정의하려면 HTML 요소를 활용하는 것이 중요합니다. 자세한 내용은 서식 있는 텍스트 필드에 대한 튜토리얼을 참조하세요.

이 튜토리얼 전체에서 다음 내용을 이해할 수 있습니다.

1. 스타일을 지정할 수 있는 요소
2. 본문(모든 페이지) 요소를 개인화하는 방법
3. 제목 요소를 사용자 정의하는 방법
4. 단락 요소의 스타일을 지정하는 방법
5. 링크 요소의 스타일을 지정하는 방법
6. 태그 중심 스타일 가이드를 설정하는 방법

스타일을 지정할 수 있는 요소

요소는 분홍색으로 표시되어 파란색 클래스 및 녹색 상태와 구별됩니다. 다음은 스타일 지정 가능한 요소가 포함된 요소 유형의 컴파일입니다.

• 본문(모든 페이지)
• H1 방향
• H2 방향
• H3 방향
• H4 방향
• H5 방향
• H6 방향
• 절
• 링크(텍스트 링크, 버튼, 링크 블록)
• 영상
• 순서가 없는 목록
• 주문목록
• 목록 항목
• 상표
• 강력(인라인 굵은 텍스트)
• Ems(인라인 기울임꼴 텍스트)
• 블록 인용
• 그림(서식 있는 텍스트)
• 그림 캡션(서식 있는 텍스트)
• 모든 코드

다른 모든 요소에는 다음을 사용하여 스타일을 지정해야 합니다. 클래스 및/또는 결합 수업.

본문(모든 페이지) 요소를 개인화하는 방법

타이포그래피 스타일 구성 본문(모든 페이지)요소 전체 사이트의 모든 타이포그래피로 흘러갑니다. 여기서 "본문"은 다른 모든 페이지 요소가 포함된 전체 사이트 페이지를 의미합니다. 기본 글꼴 모음, 글꼴 크기 및 줄 높이를 정의하는 것이 좋습니다. 본문(모든 페이지) 요소를 H1-H6 제목 요소에서 해당 스타일로 대체합니다.

스타일을 지정하는 방법에는 두 가지가 있습니다. 본문(모든 페이지) 요소:

• 선택 몸 요소를 선택하고 본문(모든 페이지)요소 ~로부터 선택기 필드 드롭다운 스타일 패널
• 요소를 선택하고 본문(모든 페이지)요소 상속 메뉴에서 스타일 패널 — 모든 요소는 본문(모든 페이지)요소

도달하려면 본문(모든 페이지) 요소:

1. 선택 몸 모든 페이지의 요소
2. 들어가다 선택기 필드 에서 스타일 패널
3. 선택하세요 본문(모든 페이지) 드롭다운의 요소

상속 메뉴를 사용하여 클래스가 적용된 요소에서 태그를 관찰하고 선택하려면 다음을 수행하세요.

1. 클래스가 있는 요소 선택
2. 위의 상속 메뉴 링크를 탭하세요. 선택기 필드 에서 스타일 패널  
3. 태그를 선택하세요(예: 모든 단락)
4. 스타일 적용

수정 사항 본문(모든 페이지) 태그와 클래스 사이의 뚜렷한 대조를 표시하는 출발점 역할을 합니다. 태그를 사용하면 요소 그룹화에 대한 기본 스타일을 결정할 수 있습니다. 

선택 본문(모든 페이지) 스타일 변경은 모든 새 요소와 기존 요소가 본문(모든 페이지) 요소. 그만큼 본문(모든 페이지) 글꼴, 글꼴 크기, 글꼴 색상, 줄 높이 및 기본 배경색과 같은 기본 스타일을 정의할 수 있습니다. 

클래스를 활용하여 사이트의 기본 스타일을 대체할 수 있습니다.

제목 요소를 사용자 정의하는 방법

삽입할 때 표제 사이트에 설정된 모든 스타일을 채택합니다. 본문(모든 페이지) 요소. (간과하지 마십시오. 위의 상속 메뉴를 사용하여 스타일 상속을 확인할 수 있습니다. 선택기 필드 에서 스타일 패널.)

각 제목에 해당 클래스를 추가하지 않고 스타일을 덮어쓰려면 선택기 필드 그리고 선택하세요 모든 H1 제목. 이는 예상되는 글꼴이 본문(모든 페이지)에서 여전히 상속되고 있음을 보여줍니다. 결과적으로 글꼴을 변경하면 모든 H1이 업데이트됩니다. 

예를 들어 기본 글꼴이 구성된 경우 글꼴 스타일을 Tahoma로 변경합니다. 본문(모든 페이지) 태그 모든 새로운 H1 제목에 자동으로 Tahoma를 적용합니다. 글꼴을 조정하면 모든 H1 제목 태그 Playfair로 이동하면 모든 H1 제목이 Playfair에 표시됩니다. 특정 H1 제목에 클래스를 추가하고 글꼴을 Raleway로 설정하면 해당 특정 H1(동일한 클래스를 사용하는 다른 항목과 함께)이 Raleway로 변경됩니다.

명심하세요: 요소는 계층 구조에서 가장 가까운 스타일 정보를 찾습니다.

H1과 같은 요소에는 스타일을 지정하는 클래스가 있을 수 있습니다. 클래스에 특정 스타일링 세부 사항이 부족한 경우 H1은 다음 레벨을 참조하고 클래스의 스타일링 단서를 채택합니다. 모든 H1 제목 태그, 이는 차례로 다음의 스타일을 따릅니다. 본문(모든 페이지) 태그.

기억하다: 태그는 기본 스타일을 정의하는 데 도움이 되는 반면 클래스는 이러한 기본값을 재정의할 수 있습니다.

유용한 힌트: 제목의 타이포그래피 스타일은 일반적으로 단락 스타일과 다릅니다. 모든 제목 태그(H1-H6)에 동일한 글꼴 모음을 사용하는 것이 일반적인 관행입니다.

단락 태그를 사용자 정의하는 방법

특정 클래스 없이 임의의 단락을 선택하고 모든 단락 태그 에서 스타일 패널 스타일을 조정합니다.

예를 들어 다음과 같이 줄 높이를 수정할 수 있습니다.

1. 액세스 키 아래 필드 타이포그래피
2. 값 조정(예: 1.6)
3. 하이픈을 입력하거나 단위 드롭다운에서 하나를 선택하여 단위 없는 값으로 변환

전문가 팁: 단위 없음은 줄 높이가 글꼴 크기에 비례하여 조정되도록 합니다.

당신은 사용할 수 있습니다 모든 단락 태그 키보드에서 "Return" 또는 "Enter"를 누르는 효과와 유사하게 단락 사이에 공백을 삽입합니다. 줄 높이는 텍스트가 줄에서 줄로 병합되는 것을 방지하는 반면 하단 여백은 단락 사이의 세로 간격을 허용합니다.

링크 태그를 개인화하는 방법

추가하려면 링크 웹사이트에서 다음을 수행할 수 있습니다.

• 에서 선택하세요. 요소 추가 패널
• 캔버스에 있는 기존 텍스트를 두 번 클릭합니다.
• 연결하려는 텍스트를 강조 표시하고 중첩된 텍스트 링크를 만듭니다.

링크의 기본 스타일을 변경하려면:

1. 액세스 선택기 필드
2. 다음을 선택하세요. 모든 링크 꼬리표
3. 텍스트 장식 또는 글꼴 색상 수정

추가된 모든 새 링크는 다음에 정의된 기본 스타일을 상속합니다. 모든 링크 태그.

비판적인: 에 적용된 스타일 모든 링크 태그 텍스트 링크를 넘어 다양한 링크 유형에 영향을 미칩니다. 예를 들어, 글꼴 색상을 변경하면 모든 링크 태그 와 더불어 호버 상태 활성화되면 버튼과 같이 연결된 모든 요소에 영향을 미칩니다. 필요한 경우 버튼 클래스에서 이러한 가리키기 상태 스타일을 재정의해야 할 수도 있습니다.

태그는 전역 기본값을 설정하는 데 유용하지만 주의 깊게 관리하지 않으면 광범위한 영향을 미칠 수 있습니다. 태그 기반 스타일 조정의 영향을 받는 요소를 시각적으로 검토하는 것을 잊지 마세요.

태그 기반 스타일 가이드를 고안하는 방법

스타일 가이드를 사용하면 디자인 프로세스 초기에 기본 사이트 스타일을 설정할 수 있습니다. Webflow는 태그 기반 스타일 가이드 세련된 스타일 가이드를 사용하여 새 웹사이트를 시작하기 위해 복제할 수 있습니다.

메모: 스타일 가이드의 콘텐츠를 비공개로 유지하고 온라인에서 검색할 수 없도록 하려면 스타일 가이드의 콘텐츠를 보호하거나 검색 엔진이 콘텐츠를 색인화하지 못하도록 해야 합니다.

단순한 스타일 가이드 템플릿을 만드는 방법

스타일 가이드는 기본 스타일을 쉽게 미리 볼 수 있도록 공통 요소를 구조화하고 스타일을 지정하는 전용 페이지 역할을 합니다. 스타일 가이드 템플릿을 만들어 새로 만드는 웹사이트마다 스타일 가이드를 신속하게 생성할 수 있습니다.

스타일 가이드 템플릿을 생성하려면:

1. 단일 페이지 사이트 구축
2. 페이지에 섹션 포함
3. 스타일 지정을 위해 HTML 태그가 포함된 각 요소의 인스턴스를 하나 이상 추가하세요.
4. 이러한 요소에 클래스를 적용하지 마세요.

새 사이트에서 이 템플릿을 활용하려면:

1. 새 사이트에서 새 페이지를 개발하세요.
2. 페이지 이름 지정(예: '스타일 가이드')
3. 페이지를 초안으로 저장
4. 템플릿 사이트로 이동
5. 섹션을 선택하고 복사하세요.
6. 새 사이트의 '스타일 가이드' 페이지에 붙여넣으세요.
7. 각 요소를 선택하고 그에 따라 HTML 태그 스타일을 지정합니다.

필수적인: 스타일링도 간과하지 마세요 본문(모든 페이지) 태그 — 페이지 본문을 복제/붙여넣을 수 없으므로 새 사이트의 "스타일 가이드" 페이지에서 스타일을 설정해야 합니다. 본문(모든 페이지) 태그. Body 요소에 대한 추가 세부정보를 참조하세요.