하이퍼텍스트 마크업 언어 및 계단식 스타일 시트 소개

웹 개발 시 HTML(HyperText Markup Language)과 CSS(Cascading Style Sheets) 간의 연결을 이해하는 것이 중요합니다. HTML은 웹사이트의 프레임워크와 본질을 형성하는 반면 CSS는 웹사이트의 프레임워크와 본질을 형성합니다. 변형하다 내용. Webflow는 Designer 캔버스에서 제작/빌드할 때 이 코드를 생성합니다.

이 세션에서 귀하는 다음을 알게 될 것입니다:

1. 브라우저에서 코드를 렌더링하는 과정
2. 웹사이트 코드를 검사하는 방법
3. HTML과 CSS
4. Webflow가 깔끔한 코드를 생성하는 동안 디자인 만들기

브라우저의 렌더링 프로세스

웹사이트를 탐색하는 동안 브라우저는 코드를 해석하여 웹사이트의 콘텐츠와 구조를 화면에 표시합니다.

웹사이트 코드 탐색

웹 사이트의 코드를 뒤에서 검사하여 자세히 알아볼 수 있습니다. 대부분의 브라우저에서는 소스 코드를 검사하고 임시로 편집할 수 있습니다.

Chrome에서 웹사이트 코드를 검사하려면 다음 두 가지 옵션이 있습니다.

• 마우스 오른쪽 버튼을 클릭하고 선택하세요. 검사 상황에 맞는 메뉴에서
• 누르다 제어 + 옮기다 + 나 (Windows의 경우) 또는 명령 + 옵션 + 나 (맥에서)

검사기에서 코드를 수정하여 브라우저에 표시된 콘텐츠를 일시적으로 변경할 수 있습니다. 이러한 변화는 지역적입니다(즉, 당신의 브라우저) 페이지를 새로 고치면 다른 사이트 방문자가 볼 수 없도록 사라집니다.

HTML과 CSS

HTML은 웹사이트의 콘텐츠와 구조를 정의하는 반면 CSS는 콘텐츠의 모양을 지정합니다. 웹사이트를 거주지로 시각화합니다. HTML은 구조와 기반을 나타내고 CSS는 색상 구성표를 나타냅니다.

하이퍼텍스트 마크업 언어(HTML)

HTML은 웹 사이트의 콘텐츠를 관리하고 제목, 단락, 링크 및 이미지를 포함한 페이지 요소에 대해 브라우저에 알립니다.

초기에는 웹 디자이너가 인라인 스타일로 HTML 콘텐츠의 스타일을 한 줄씩 지정해야 했기 때문에 글꼴 모음이나 크기와 같은 사이트 전체 스타일을 업데이트하는 데 어려움을 겪었습니다. 그러나 이제는 CSS가 활용됩니다.

CSS(Cascading Style Sheet)

CSS는 웹사이트 콘텐츠의 모양(예: 색상, 테두리, 크기, 위치, 활자체 등)을 관리합니다. 이전에 인라인으로 적용되었던 스타일링 정보를 별도의 스타일 document로 통합하여 클래스를 통한 그룹 스타일링이 가능합니다. CSS 파일의 클래스 또는 HTML 태그에 대한 변경 사항은 연관된 모든 요소에 반영됩니다.

과제: 코드 복잡성 증가

초기 웹 시대에 디자이너는 기본 태그와 속성에 중점을 두었습니다. 기술이 발전함에 따라 개인화된 온라인 경험과 함께 웹 복잡성이 증가했습니다.

이러한 변화에 적응하려면 지속적인 교육이 필요했습니다. 웹 디자인 및 개발의 가능성이 확대됨에 따라 배경 환경은 더욱 복잡해졌습니다.

오늘날 웹 개발자는 브라우저 불일치, 장치 변형, 성능 향상, SEO 등과 같은 다양한 고려 사항을 해결하면서 여러 언어와 도구(예: HTML, CSS, JS, Java, 코드 라이브러리, GitHub와 같은 버전 제어 등)를 사용합니다. 끊임없이 확장되는 목록은 때때로 웹 개발을 어렵게 만들지 만 이것이 바로 Webflow가 개입하는 곳입니다.

Webflow가 깔끔한 코딩을 자동화하는 동안 개념 설계

HTML과 CSS 원칙을 이해하는 것은 웹 디자인의 핵심 프레임워크를 형성하기 때문에 중요합니다. 그럼에도 불구하고 Webflow 덕분에 수동 HTML 및 CSS 코딩은 과거의 일입니다.

Webflow를 사용하면 웹 디자이너와 개발자가 Webflow 캔버스에서 콘텐츠를 조작하여 웹 사이트의 제작 준비 코드인 HTML 및 CSS에 직접적인 영향을 주어 웹 사이트를 보다 효과적으로 만들 수 있습니다. Webflow Designer에서의 설계에 대해 자세히 알아보세요.