웹 사이트를 코딩하는 방법

웹 사이트를 코딩하는 방법HTML 및 CSS를 사용하여 웹 사이트를 만드는 방법을 배우고 싶습니다?


당신은 바로 이곳에 있습니다. 이 가이드에서는 빈 화면에서 동시에 최적화되고보기 좋은 웹 사이트로 이동하는 모든 단계를 보여줍니다..

그러나 먼저 HTML과 CSS는 무엇입니까?

글쎄, 당신은 Wikipedia에서 두 용어를 모두 볼 수 있지만, 그 정의는 독자에게 친숙하지 않습니다. 조금 단순화시켜 봅시다 :

  • HTML (하이퍼 텍스트 마크 업 언어)는 웹 페이지의 구조와 내용을 정의합니다. 어디 일이 간다, 어떻게 그들은 배치되고 뭐야 페이지에서
  • CSS (Cascading Style Sheets)는 스타일링 / 프레젠테이션 웹 페이지 및 그 요소

하나는 다른 하나 없이는 가질 수 없습니다. 두 사람이 함께 협력하여 최종 웹 페이지, 디자인 및 그 위에있는 콘텐츠를 구성합니다..

노트; “웹 페이지”라고 할 때, 의미하는 바는 단일 HTML 문서 (웹 사이트의 일부인 단일 페이지)입니다. “웹 사이트”는 완전한 것입니다. 모든 개별 웹 페이지가있는 전체 사이트.

HTML 및 CSS를 사용하여 웹 사이트를 만드는 방법 (목차) :

  1. HTML의 기초를 배우십시오
  2. HTML 문서 구조 이해
  3. CSS 선택기 알아보기
  4. CSS 스타일 시트 정리
  5. 부트 스트랩 받기
  6. 디자인을 고르세요
  7. HTML 및 CSS를 사용하여 웹 사이트 사용자 정의
  8. 컨텐츠 및 이미지 추가
  9. 색상 및 글꼴 미세 조정
  10. 추가 페이지 만들기

웹 사이트를 만드는 총 시간 : 4-5 시간
기술 수준 : 중급

이것이 너무 복잡하다고 생각되면 WordPress를 사용하여 웹 사이트를 만들거나 웹 사이트 빌더 중 하나를 선택하는 것이 좋습니다. 웹 개발을 위해 선택된 최고의 IDE 목록을 확인할 수도 있습니다. 

Contents

시작하기 전에 리소스를 수집하십시오.

따라서 HTML 및 CSS를 사용하여 웹 사이트를 작성하기 전에 가장 먼저 필요한 것은 웹 서버 (호스팅)입니다. 하지만 걱정하지 마십시오. 당신은 당신의 자신의 기계를 구입할 필요가 없습니다. 많은 웹 호스팅 회사가 컴퓨터에서 간단한 호스팅 서비스를 판매합니다. ‘웹 호스팅’을 위해 Google을 선택하고 너무 비싸지 않은 것을 선택하십시오..

서버가 정렬되면 다음으로 필요한 것은 도메인 이름입니다. 도메인 이름은 웹 사이트에서 웹 사이트가 식별되는 이름입니다. 예를 들어이 사이트의 도메인 이름은 websitesetup.org.

도메인 이름과 서버가 모두 있으면 둘을 함께 연결할 수 있습니다.

전체 공개:이 안내서의 추천 링크를 통해 Bluehost를 구매하면 수수료가 발생합니다. 이를 통해 WebsiteSetup을 최신 상태로 유지하고 운영 할 수 있습니다. 당신의 지원에 감사드립니다.

어려움없이이를 정리하려면 다음과 같은 회사에 가입하는 것이 좋습니다. 블루 호스트.

그들은 당신을 위해 모든 설정을 처리합니다. 그들이 의미하는 것은 : (ㅏ) 당신을 위해 호스팅 계정을 설정, (비) 귀하를 대신하여 도메인 이름을 등록하십시오, (씨) 함께 작동하도록 모든 것을 구성하고 (디) 사용하기 쉬운 대시 보드에 액세스 할 수 있습니다.

계속해서 가입하십시오 블루 호스트, 기다릴게요 돌아와서 웹 서버를 구성하고 사용할 준비가되면 다음 단계로 스크롤하십시오..

추신 컴퓨터에서 HTML 웹 사이트를 실험하고 싶다면, 공개하지 않으려면 로컬 웹 서버 소프트웨어를 사용하십시오. 우리가 권장하고 사용하는 것을 XAMPP. Mac과 PC 용 버전이 있으며 사용하기 쉽습니다. 여기 가이드 컴퓨터에 설치하는 방법.

1. HTML의 기초를 배우십시오

HTML 구조의 주요 요소는 HTML입니다 꼬리표.

예를 들어 태그는 다음과 같습니다.

어떤 것

여기, 우리는 꼬리표. 이건 굵게 여는 태그 사이에있는 텍스트 () 및 닫기 태그 (). 이 경우 해당 텍스트는 어떤 것.

그러나 몇 가지 이름을 지정하기 위해 다른 태그가 있습니다.

  • ... 여는 태그와 닫는 태그 사이에 텍스트를 기울임 꼴로 표시합니다
  • ... 밑줄을 긋습니다
  • ...

    텍스트의 단락입니다


  • ...

    페이지의 기본 헤더입니다

이러한 간단한 태그 외에도 더 복잡한 태그가 있습니다. 예를 들어 다음과 같은 목록을 작성하려는 경우 :

  • 항목 1
  • 항목 2
  • 항목 3

… 다음 HTML 코드를 사용하여이를 수행 할 수 있습니다.

  • 항목 1
  • 항목 2
  • 항목 3

또는 다음과 같이 다른 페이지에 대한 링크를 추가하려는 경우 :

홈페이지로 연결되는 링크입니다

… 다음 코드를 사용하여이를 수행 할 수 있습니다.

내 홈페이지에 대한 링크입니다

이것을 읽으려면 HTML 태그의 전체 목록. HTML 및 CSS로 웹 사이트를 만들 때 유용합니다.

2. HTML 문서 구조 이해

HTML 페이지를 레고로 제작 된 것처럼 생각하십시오. 주어진 더 큰 구조로 끝나기 위해 서로 다른 벽돌을 서로 위에 놓습니다..

그러나 레고 브릭 대신 HTML 태그를 얻습니다…

가장 간단한 HTML 문서 구조는 다음과 같습니다.





안녕, 세상!


안녕, 세상!

내 첫 웹 페이지.

위의 코드를 가져 와서 복사하여 새 파일에 붙여 넣고 문서를 다른 이름으로 저장하십시오. index.html, 완벽하게 유효한 HTML 페이지가 될 것입니다..

이 코드의 개별 부분을 설명하겠습니다 :

  • – 문서의 초기 선언
  • – 다른 선언; 앞으로 나올 것은 영어로 작성된 HTML 문서라고 말합니다.
  • – 시작을 표시합니다 머리 부분; 그만큼 머리 섹션은 페이지의 모든 기본 매개 변수가있는 곳입니다. 이들 중 대부분은 화면에 표시되지 않습니다. 그들은 단지 후드 아래에서 무슨 일이 일어나고 있는지 정의
  • – 문서를 작성하는 데 사용되는 문자 세트를 정의합니다. 이것에 너무 많은 시간을 할애 할 필요가 없습니다. 이 선언을 그대로 사용하십시오.
  • 안녕, 세상! – 페이지 제목; 사람들이 브라우저의 제목 표시 줄에 다음과 같이 표시됩니다.

HTML 및 CSS를 사용하여 웹 사이트를 만들 때 웹 브라우저에서 제목

  • – 시작을 표시합니다 신체 부분; 여기가 페이지의 모든 내용이있는 곳입니다. HTML 문서의 주요 부분입니다. 이 섹션에서는 페이지에 표시 될 모든 콘텐츠를 포함시킬 것입니다.

  • 안녕, 세상!

    – 페이지의 기본 헤더

  • 내 첫 웹 페이지.

    – 간단한 텍스트 단락

  • – 전체 HTML 문서의 닫는 태그

여기서 중요한 메모입니다. 기본 텍스트 앱 또는 MS Word와 같은 복잡한 텍스트 프로세서에서 HTML 파일을 작업하는 것은 좋은 경험이 아닙니다. 쉽게 작업 할 수 있도록 도구를 설치하십시오. 숭고한 텍스트. Mac 및 PC 용 버전이 있으며 무료입니다..

왜 더 낫습니까? 무엇보다도 HTML 파일의 구문을 채색합니다. 즉, HTML 태그를 텍스트 내용, 태그 매개 변수 및 기타 값과 시각적으로 구분합니다. 기본적으로 모두 읽을 수있게됩니다. Sublime Text에서 간단한 HTML 구조는 다음과 같습니다.

숭고한 구문은 HTML 및 CSS로 웹 사이트를 만들 때 좋습니다.

다시 주제로 돌아갑니다. 당신은 그 새로운 것을 취할 수 있습니다 index.html 파일을 복사하여 웹 서버의 기본 디렉토리에 복사 한 다음 웹 브라우저를 통해 해당 페이지로 이동하십시오. 하지만 너무 흥분하지 마십시오. 이 페이지는 다소 추악합니다 (아래 참조)..

이 페이지는 못 생겼다

좋아요, 그래서 페이지가 못 생겼습니다.?

3. CSS 선택기 알아보기

HTML에 태그가있는 것처럼 CSS는 선택기.

선택기는 주어진 요소가 모양에 따라 어떻게 동작해야하는지 설명합니다. CSS 선택기의 예는 다음과 같습니다.

p {
글꼴 크기 : 18px;
}

이 선택기는 모든 HTML이

문서 내의 태그의 글꼴 크기는 18px입니다..

그러나 CSS 선택기를 사용하는보다 실용적인 방법은 주어진 유형의 모든 태그를 특정 스타일로 제한하는 것이 아니라 다른“클래스”를 만들고 태그에 하나씩 할당하는 것입니다..

예를 들어 CSS의 클래스 선택기는 다음과 같습니다.

.일반 텍스트 {
글꼴 크기 : 18px;
}

점 (.) 클래스 이름 앞에 (일반 텍스트). “일반 텍스트”클래스를 정의하면 18px 크기의 특정 HTML 태그에 해당 클래스를 할당 할 수 있습니다..

예를 들면 다음과 같습니다.

이 텍스트는 18px입니다.

위의 CSS 코드 부분의 모든 요소를 ​​설명하는 데 1 분이 더 걸립니다.

  • .일반 텍스트 – 클래스 정의; 수업 이름 뒤에 그리고 여는 괄호와 닫는 괄호 사이의 모든 것 {} 이 클래스에 할당 된 요소의 모양을 정의합니다
  • 글꼴 크기 – CSS 속성 예
  • 18px – 속성에 할당 된 값

위의 것 외에도 많은 CSS 속성이 있습니다. 글꼴 크기. 여기에 완전한 목록 궁금하다면.

4. CSS 스타일 시트 정리

HTML 문서는 매우 구조적입니다. 모든 요소가 제 위치에 있으며 요소 순서는 해당 웹 페이지의 최종 구성 및 모양에 중요합니다. CSS 문서는 훨씬 적습니다..

CSS 문서는 종종 스타일 시트. 기본적으로 CSS 스타일 시트는 해당 HTML 문서에서 사용중인 모든 클래스 정의 목록입니다. 클래스 정의의 순서는 대부분 중요하지 않습니다 (적어도 단순한 디자인의 경우).

CSS 스타일 시트를 조합하는 방법은 각 클래스를 하나씩 정의한 다음 페이지 디자인의 결과가 원하는 것인지 테스트하는 것입니다..

이것은 지루한 작업처럼 들리며.

그러나 우리는 여러분을 더욱 쉽게 만들어 줄 것이며, 직접 HTML과 CSS 디자인을 배우도록 강요하지는 않을 것입니다. 처음부터 모든 것을 가르치는 대신, 우리는 살아있는 유기체를 취하고 그 요소를 해부합니다.

이것은 Bootstrap이라는 것이 작동하는 곳입니다..

5. 부트 스트랩 다운로드 / 설치

Bootstrap은 HTML 및 CSS로 웹 사이트를 만들기위한 오픈 소스 툴킷입니다.

일반 영어로, Bootstrap은 HTML 문서와 CSS 스타일 시트의 기본 구조를 관리합니다. 웹 페이지의 주요 스캐 폴딩이 추가 개발을 위해 준비되고 최적화되도록하는 프레임 워크를 제공합니다..

기본적으로 Bootstrap을 사용하면 처음부터 시작하지 않고 재미있는 부분으로 바로 이동할 수 있습니다. 이를 통해 HTML 및 CSS를 사용하여 웹 사이트를 만드는 초기 지루한 초기 단계에서 작업 할 필요가 없습니다..

취할 수있는 두 가지 경로가 있습니다.

  • 선택권 (ㅏ): Bootstrap 배우기 – Bootstrap 홈페이지로 이동하여 기본 Bootstrap 패키지를 다운로드하고 그 위에 빌드를 시작하십시오..
  • 선택권 (비): 바로 가기 – 멋진 디자인과 이미 구축 된 데모 웹 페이지로 부트 스트랩 용 스타터 팩을 받으십시오..

선택권 (ㅏ) 처음에는 학습 곡선이있을 수 있지만 HTML과 CSS를 사용하여 웹 사이트를 만드는 방법에 더 나쁜 방법은 아닙니다. 핵심 부트 스트랩 구조를 마스터하면 새 페이지를 작성하고 원하는대로 정확하게 표시하는 것이 더 쉬울 수 있습니다. 그만큼 부트 스트랩 문서 이 길을 시작하기에 좋은 곳입니다.

우리는 옵션과 함께 갈거야 (비) 이 가이드를 위해. 우리는 몇 가지 이유로이 작업을 수행하고 있습니다.

기성품 구조로 시작하면 HTML 문서의 기본 필요성을 파악하는 데 많은 어려움이 없습니다. 이를 통해 컨텐츠 배치 및보기 좋아하는 것과 같은 흥미로운 것들에 집중할 수 있습니다..

요컨대, 이런 식으로 학습하면 더 나은 결과를 더 빨리 얻을 수 있습니다..

6. 디자인을 고르세요

HTML 및 CSS가 포함 된 웹 사이트를 만들 때 원하는 부트 스트랩 템플릿을 자유롭게 사용할 수 있습니다. 그들은 모두 비슷하게 작동해야합니다.

그러나이 가이드에서는 템플릿 중 하나를 사용하여 부트 스트랩 시작. 그들은 최적화되고 문제없이 작동하며 매우 잘 디자인 된 무료 템플릿을 다양하게 갖추고 있습니다..

우리가 사용할 테마는 창의. 우리가하려는 마지막 효과는 다음과 같습니다.

HTML 및 CSS로 웹 사이트를 만든 후 최종 홈페이지

광고 소재 템플릿으로 시작하려면 무료 다운로드 오른쪽에있는 버튼 ( 이 페이지) 및 zip 패키지를 데스크탑에 저장.

패키지의 압축을 풀고 내용을 로컬 웹 서버 또는 웹 호스팅 계정의 기본 디렉토리로 옮깁니다..

이제 웹 브라우저를 통해 해당 위치를 엽니 다. 템플릿의 기본 버전이 표시됩니다.

부트 스트랩 템플릿 시작

이미보기 좋았지 만 이제 HTML과 CSS를 사용하여 원하는대로 정확하게 만드는 방법을 배울 차례입니다..

7. HTML 및 CSS를 사용하여 웹 사이트 사용자 정의

먼저 디자인 홈페이지에서 작업 해 봅시다. 그래픽, 텍스트를 대체하고 일반적으로 모든 것을 조정하는 방법을 보여줍니다..

위의 HTML 문서의 헤드 섹션에 대해 간략하게 설명했습니다. 여기에서 좀 더 깊이 살펴 보겠습니다.

당신이 열 때 index.html Sublime Text의 Bootstrap 사이트 파일에 다음과 같은 헤드 섹션이 표시됩니다 (명확성을 위해이 코드에서 중요하지 않은 사항은 모두 제거했습니다).






크리에이티브-부트 스트랩 테마 시작





* 위와는 별도로, 페이지에 표시되는 이미지를위한 Google Fonts, Font Awesome 아이콘 및 라이트 박스 모듈을로드하는 코드도있었습니다..

우리가 이미 알고있는 대부분의 선언은 몇 가지 새로운 선언이 있습니다.

  • 우선, 사이의 모든 것 괄호는 HTML 주석입니다. 최종 페이지에 표시되지 않습니다.
  • – 이것은 부트 스트랩 자체 선언 태그 중 하나입니다. 웹 사이트의 뷰포트 크기를 정의합니다.
  • –이 줄은 Creative 템플릿의 CSS 스타일 시트를로드하고 기본 스타일 시트 인 Bootstrap도 포함합니다..

마지막 작업 (CSS를로드하는 줄)을 수정하여 나중에보다 쉽게 ​​작업 할 수 있도록하겠습니다..

해당 줄을 다음과 같이 변경하십시오.


이것은 작은 차이 일뿐입니다. 단축되지 않은 버전의 동일한 CSS 시트를로드합니다. 이 버전은 수정하기가 더 쉽습니다..

이제 맨 아래로 스크롤하십시오. index.html 파일. 폐장 직전에 다음 줄을 볼 수 있습니다 신체 꼬리표:

        

디자인의 시각적 상호 작용을 처리하는 JavaScript 파일을로드해야합니다. 예를 들어 상단 메뉴의 링크를 클릭하면 같은 페이지의 about 블록으로 원활하게 이동합니다. 특히 JavaScript를 통해 수행됩니다. 지금이 코드를 이해하는 데 어려움을 겪지 않아도됩니다. 이것을 다른 시간 동안 남겨 두자.

대신 페이지에 자체 콘텐츠를 추가하는 작업을하겠습니다.

8. 컨텐츠 및 이미지 추가

가장 먼저 할 일은 페이지 제목을 변경하는 것입니다.

1. 제목 변경

찾기 표제 헤드 섹션에 태그를 지정하고 태그 사이의 텍스트를 자신의 것으로 대체하십시오.

내 HTML 사이트

2. 영웅 섹션을 사용자 정의

영웅 섹션은이 블록이라고합니다.

영웅 섹션

내부에 자체 내용이 있으면 좋을 것입니다. 이 블록을 수정하려면 index.html 파일을 찾고이 섹션을 찾으십시오.

...


...

더 찾아 봐

이 전체 코드 블록은 영웅 섹션의 내용을 제어합니다..

여기에 몇 가지 새로운 태그가 있습니다.


  • – 이것은 전체 섹션이 페이지의 헤더임을 정의하는 태그입니다. 이 태그에는 몇 가지 형제 자매가 있습니다.
    태그
    꼬리표
  • – 다음에 나오는 내용이 별도의 섹션임을 나타내는 일반적인 CSS 태그입니다 (일명 분할) HTML 문서에서; 이를 사용하면 페이지의 개별 섹션을 시각적으로 쉽게 구별 할 수 있습니다.

또한 이미 알고있는 다른 태그 중 일부는 여러 CSS 클래스가 할당되어있어 좀 더 복잡해 보입니다. 예를 들면 다음과 같습니다.

...

에 할당 된 수업

여기에 태그가 있습니다 텍스트 대문자 텍스트 흰색 글꼴 가중치.

이 클래스는 Bootstrap과 Creative 테마 개발자가 만들었습니다. 좋은 소식은 HTML과 CSS로 웹 사이트를 만들 때 자유롭게 사용할 수 있다는 것입니다.

솔직히, 당신은 클래스의 수를 할당하여 페이지 구조에 추가하는 태그를 사용자 정의 할 수 있습니다.

사용 가능한 클래스의 전체 목록을 보려면 메인을 열 수 있습니다 creative.css 에있는 파일 CSS Creative 테마의 하위 디렉토리.

이 모든 클래스를 이해하는 것은 처음에는 위협적인 것처럼 보일 수 있지만 실제로는보기보다 훨씬 쉽습니다..

예를 들어, 클래스 중 하나는 index.html 파일은 폰트 웨이트 라이트. 당신이 뛰어들 때 creative.css 파일과 Ctrl + F 해당 클래스 이름을 찾으면 글꼴 무게 매개 변수는 다음과 같습니다.

.글꼴 가중치 표시 등 {
폰트 가중치 : 300;
}

에서 기본 텍스트 수정 index.html 파일은 매우 간단합니다. 수정하려는 태그를 찾고 여는 태그와 닫는 태그 사이의 내용을 변경하기 만하면됩니다..

예를 들어 기본 헤드 라인을 변경하려면 다음을 변경하십시오.

좋아하는 ...

다음과 같은 것 :

내 HTML 웹 사이트에 감탄!

페이지의 모든 단락 및 기타 태그에 대해 동일한 작업을 수행 할 수 있습니다.

중요한 것은 새 단락을 자유롭게 추가 할 수도 있다는 것입니다. 예를 들어 이미 페이지에있는 단락을 가져 와서 복사하여 원래 단락 바로 아래에 붙여 넣을 수 있습니다. 이렇게 :

부트 스트랩 시작 ...

단락 2

이제 텍스트를 처리 한 후 백그라운드에있는 이미지를 바꾸겠습니다..

CSS 스타일 시트 파일로 이동하여 수정해야하기 때문에이 작업은 좀 더 복잡합니다. 보시다시피 HTML 코드에서 볼 수 있듯이 발행인란 섹션에서 태그는 어떤 방식으로도 이미지를 페이지에 포함하는 것을 나타내지 않습니다. 이것은 모두 CSS를 통해 이루어집니다.

코드를 처리하는 전체 블록을 다시 살펴보면 발행인란 섹션에서라는 클래스에 할당 된 것을 볼 수 있습니다. 발행인란. 이 코드 줄은 클래스 할당을 처리합니다.

그만큼 발행인란 class는 전체 블록의 배경에 이미지를 넣는 클래스입니다..

우리를 열어 보자 creative.css 다시 파일을 작성하고 “masthead”클래스를 찾으십시오.

header.masthead {
패딩 탑 : 10rem;
안쪽 여백 : calc (10rem-72px);
배경 : 선형 그라디언트 (아래로, rgba (92, 77, 66, 0.8) 0 %, rgba (92, 77, 66, 0.8) 100 %), url ( "../ img / bg-masthead.jpg" );
배경 위치 : 중심;
배경 반복 : 반복 없음;
배경 부착 : 스크롤;
배경 크기 : 덮개;
}

이 코드는 오버레이, 음영 등을 추가하는 등 이미지에 모든 종류의 멋진 작업을 수행하지만 중요한 부분은 다음과 같습니다. url ( "../ img / bg-masthead.jpg"). 이것은 배경 이미지를 찾을 위치를 나타내는 선입니다. 그것은에있을거야 img 서브 디렉토리.

이 배경 이미지를 변경하려면 자신의 이미지를 가져 와서 img 하위 디렉토리를 찾은 다음 원래 이름 대신 해당 이름을 복사하여 붙여 넣기 bg-masthead.jpg 파일. 요컨대, 이것을 바꾸십시오 : url ( "../ img / bg-masthead.jpg") 이에: url ( "../ img / YOURFILE.jpg").

3. 페이지에서 다른 블록을 사용자 정의

당신이 통해 index.html 파일에 이미 페이지에 다른 섹션이 많이 있음을 알 수 있습니다. 우리는 항해, 과 블록, 일부 서비스, ㅏ 포트폴리오, ㅏ 행동을 요구하다, ㅏ 접촉 블록과 보행인.

이 섹션마다 내용이 다르지만 섹션 자체는 구조가 비슷합니다. 그것들은 모두 거의 동일한 HTML 태그 세트를 가지고 있습니다-단지 다른 CSS 클래스가 할당되어 있습니다..

필요에 맞게 페이지를 수정하는 가장 좋은 방법은 블록을 하나씩 살펴보고 주변을 변경하여 실험하는 것입니다..

텍스트를 수정하는 것 외에도 전체 섹션을 이동할 수 있습니다 (

태그). 물론, 요소를 자르고 붙여 넣는 방식으로 손으로해야하지만 여전히 간단합니다..

이미 말했지만 아직 이야기하지 않은 두 가지 기본 수정 사항이 있습니다. 다음에이 내용을 다루겠습니다.

9. 미세 조정 색상 및 글꼴

HTML 및 CSS에서 색상이나 글꼴을 변경하는 것은 매우 쉽습니다. 가장 간단한 방법은 인라인 스타일을 HTML 태그에 할당하는 것입니다. 예를 들면 다음과 같습니다.

빨간색 텍스트

HTML에서 색상은 16 진수 값으로 표시됩니다. “# FF0000”은 빨간색입니다. 다른 모든 테이블은 다음과 같습니다. 표준 색상.

색상을 할당하는 더 좋은 방법은 CSS 스타일 시트를 통해 색상을 지정하는 것입니다. 예를 들어 위의 코드와 동일한 효과를 얻으려면 CSS 스타일 시트에 다음을 입력하십시오.

p.red {
색상 : # FF0000;
}

그런 다음 기본 문서에서 다음 HTML 코드를 사용하십시오.

빨간색 텍스트

두 번째 방법은 기본적으로 부트 스트랩에서 작업이 수행되는 방식입니다.

페이지의 텍스트 색상을 변경하려면 먼저 해당 텍스트의 스타일을 지정하는 태그를 찾은 다음 스타일 시트로 이동하여 해당 클래스를 수정하거나 새 클래스를 만듭니다..

예를 들면 다음과 같습니다. “At Your Service (서비스에서)”라는 머리글의 색상을 변경한다고 가정합니다. 현재는 검정색이며 처리하는 코드입니다.

당신의 서비스에

색상을 바꾸려면 가장 좋은 방법은, .텍스트 오렌지 색상 값을 다음과 같이 설정하십시오.

.텍스트 오렌지 {
색상 : # f4623a! 중요;
}

* !중대한 이 색상 설정이 이전의 다른 색상 설정을 덮어 씁니다..

이제 헤더로 돌아가서 코드를 다음과 같이 변경할 수 있습니다.

당신의 서비스에

이러한 변경으로 헤더는 이제 주황색이됩니다.

오렌지 h2

글꼴과 크기를 변경하려면 매우 비슷한 작업을 수행 할 수 있습니다. 그러나 먼저 CSS에서 글꼴 정의 블록이 어떻게 보이는지에 대한 예는 다음과 같습니다.

.수강생 {
폰트 패밀리 : "Merriweather", Roboto, sans-serif;
글꼴 크기 : 18px;
}
  • 글꼴로드 메리웨더, 로보 토, 그리고 시스템 기본값 산세 리프 글꼴 (웹 안전 글꼴에 대해 알아 보려면이 항목을 읽으십시오)
  • 글꼴 크기를 18px로 설정하십시오.

이러한 종류의 정의는 색상 정의와 마찬가지로 모든 CSS 클래스에 배치 할 수 있습니다. 실제로 글꼴 및 색상 정의는 종종 동일한 클래스 선언에서 찾을 수 있습니다..

이전 예제로 돌아가서 “At Your Service”라는 헤더의 글꼴 크기를 변경하려면 먼저 다음과 같은 클래스를 만들 수 있습니다.

.text-xxl {
글꼴 크기 : 50px;
}

그런 다음이 클래스를 헤더에 할당하십시오.

당신의 서비스에

�� Bootstrap에서 만든 템플릿에서 색상이나 글꼴을 변경할 때는 먼저 CSS 스타일 시트를 통해 대체 크기 나 색상을 제공 할 수있는 클래스를 찾으십시오. 가능한 경우 사용하십시오.

10. 추가 페이지 작성

홈페이지를 맞춤 설정 했으므로 이제 추가 페이지 작업을 시작한 다음 홈페이지에 연결해야합니다..

HTML 및 CSS를 사용하여 웹 사이트를 만들 때 원하는 수의 하위 페이지를 만든 다음 모두 연결할 수 있습니다.

대부분의 웹 사이트에 필요한 공통 페이지는 다음과 같습니다.

  • 페이지 정보
  • 접촉
  • 포트폴리오
  • 제품 / 서비스
  • 정책 (프라이버시 정책, 조건 등)

1. 레이아웃으로 시작

새 웹 페이지를 작성할 때 가장 먼저 결정해야 할 것은 레이아웃을 원하는 것입니다..

HTML 및 CSS를 사용하여 웹 사이트를 만들 때 아무것도 제작하지 못합니다. 도대체 무엇이 원하는 레이아웃. 유일한 어려움은 실제로 그것을 조립하는 것입니다.

빈 화면에서 시작할 때 HTML과 CSS를 다루기가 어려울 수 있으므로 여기에서도 부트 스트랩을 사용할 것입니다. 먼저 레이아웃을 만드는 몇 가지 원칙을 보여주고 Bootstrap을 사용하여 레이아웃을 만드는 방법을 보여 드리겠습니다..

웹 페이지의 레이아웃을 생각할 수있는 방법은 웹 페이지의 레이아웃을 개별 블록의 시퀀스로 간주하는 것입니다. 이와 같은 것 (네 개의 별개의 블록에 주목) :

HTML과 CSS로 웹 사이트를 만들 때의 레이아웃

Bootstrap의 가장 큰 장점은 기본 레이아웃 원칙과 모양 세부 사항을 처리하여 해당 블록을 올바른 위치에 배치하는 데 집중할 수 있다는 것입니다.

이 가이드 섹션에서는 새로운 ‘정보’페이지를 만들겠습니다..

먼저 레이아웃의 매우 기본적인 프로젝트를 만들겠습니다. 위의 것과 같은 것.

  • 상단에 탐색 메뉴가 있습니다,
  • 메뉴 아래의 전폭 헤드 라인 블록,
  • 화면 중앙에 상자가있는 가운데의 주 내용 섹션 (전폭 아님),
  • 바닥 글.

이제이 레이아웃을 HTML로 작성하겠습니다.

2. 새로운 페이지를 구축

새 페이지에서 작업을 시작하는 가장 쉬운 방법은 기존 페이지를 복제하여 템플릿으로 사용하는 것입니다. 그게 우리가 할 일입니다.

의 사본을 만듭니다 index.html 파일 이름을 바꾸고 이름을 바꿉니다. about.html.

이 초기 단계에서 페이지를 쉽게 구별 할 수 있도록 새 페이지를 편집하십시오. about.html 파일을 작성하고 </code> 꼬리표. 예를 들어, <code><title>나에 대해서.

이제 파일을 한 줄씩 살펴보고 무엇을 제거하고 무엇을 제거할지 결정하겠습니다.

  • 그만큼 항해 메뉴 (아래 ). 모든 페이지에서 탐색 환경을 균일하게 유지하기 위해이 섹션을 그대로 유지하고 싶을 것입니다..
  • 그만큼 주요 영웅 섹션 (아래 ). 이것은 레이아웃 프로젝트에 따라 필요하지 않습니다. 계속해서 전체 섹션을 지울 수 있습니다..
  • 그만큼 섹션 (아래 ). 이 섹션을 기본 제목 블록으로 재사용하겠습니다.
  • 그만큼 서비스 부분, 포트폴리오 부분, 행동을 요구하다 섹션 접촉 섹션 (사이의 모든 것) ). 이 섹션은 전혀 필요하지 않습니다. 계속해서 지울 수 있습니다.
  • 그만큼 보행인 섹션과 그 아래의 모든 것 (아래) ). 이것을 유지해야합니다.

이것은 현재 코드를 매우 간단하게 만듭니다. 기본적으로 이것은 다음과 같습니다.



























우리가 여기서 놓친 것은 메인 콘텐츠 부분. 이를 구축하기 위해 about 섹션을 재사용 할 것입니다..

계속해서 about 섹션을 복사하십시오. 이 하나:

...


...

이제 처음 두 줄을 다음과 같이 변경하십시오.

우리는 필요하지 않기 때문에

거기에 헤더

요소를 제거하면됩니다. 이 전체 블록 안에 남은 것은 텍스트 단락이 될 것입니다. 이렇게 :

텍스트 단락.

파일을 저장하고 브라우저를 통해 파일을 탐색하면 기본적으로 동일한 색 배경을 가진 두 개의 매우 유사한 블록이 하나 아래에 있음을 알 수 있습니다.

페이지 헤드 정보

기본 콘텐츠 섹션에 흰색 배경을 사용하는 것이 좋습니다. 그것을 바꾸려면, 우리가해야 할 유일한 것은 bg- 기본 메인에서 수업

꼬리표. 즉, 태그를 다음과 같이 만드십시오.

그게 낫다:

페이지 헤드 2 정보

더미 단락을 페이지에 추가하여 페이지를 채우고 하위 제목을 추가해 보겠습니다.

Lorem ipsum dolor 앉은 자세, conditetur adipiscing elit...

Proin fermentum, felis tempor pharetra lobortis, 마그나 콰드 헨 드레 리트 돌 로르...

소제목

Lorem ipsum dolor 앉은 자세, conditetur adipiscing elit...

페이지에서 다음과 같이 나타납니다.

약 1 절

텍스트를 중앙에 배치하지 않으려면 텍스트 센터 중 하나에서 수업

태그.

약 2시

이 텍스트 블록에 더 많은 감각을 부여하려면 이전과 같이 새로운 CSS 클래스를 만들어 블록의 단락에 지정할 수 있습니다. 또는 현재 스타일 시트를 살펴보고이 목적을 위해 어떤 클래스가 있는지 확인할 수 있습니다. 여기에 할당 된 것들이 있습니다.

태그 :

Lorem ipsum dolor 앉은 자세...

Proin fermentum, felis tempor pharetra lobortis, 마그나 콰드 헨 드레 리트 돌 로르...

소제목

효과는 다음과 같습니다.

3 절쯤

여기서해야 할 또 하나의 일은 페이지 어딘가에 이미지를 추가하는 것입니다.

HTML의 이미지 태그 예는 다음과 같습니다.


상당히 간단 하죠? 유일한 매개 변수는 이미지 파일의 경로입니다. 일을 잘 정리하기 위해 이미지를 img 디렉토리를 다시 한 번 (그 배경에서 한 것처럼). 이 경우 이미지 태그는 다음과 같습니다.


말하자면,이 특정 구성에서의 이미지 태그는 상당히 제한적이다. 좀 더 세련되게하기 위해 부트 스트랩 클래스를 할당 해 보겠습니다. 특별히:


이 두 클래스는 이미지의 둥근 모서리를 제공하며 이미지의 크기가 앉은 블록의 크기를 초과하지 않도록합니다..

정보 페이지의 기본 콘텐츠 섹션에서 이와 같은 태그를 추가 할 수 있습니다. 예를 들면 다음과 같습니다.

Lorem ipsum dolor 앉은 자세...

Proin fermentum, felis tempor pharetra lobortis, 마그나 콰드 헨 드레 리트 돌 로르...

소제목

다음은 페이지에 대한 최종 효과입니다.

약 4 절

영광스러운 페이지에 대한 정보는 다음과 같습니다.

페이지 완성에 대하여

3. 새 페이지로 연결

새 페이지가 완성되면 이제 홈페이지에서 페이지를 연결해 보겠습니다 ( index.html 파일). 당연히이 링크를 추가하는 가장 좋은 장소는 탐색 메뉴 (아래)에 있습니다. ).

특히 다음 줄을 찾으십시오.

이를 다음과 같이 변경하겠습니다.


이것은 우리가 아직 이야기하지 않았지만 태그는 HTML의 링크 태그입니다. 그것을 사용하면 페이지의 주소를 제공하여 모든 웹 페이지에 연결할 수 있습니다 href 매개 변수. 링크의 클릭 가능한 부분 인 링크의 텍스트는 시작과 끝 사이의 텍스트입니다. 태그.

홈페이지를 새로 고침하면 정보 페이지를 가리키는 새 링크가 표시됩니다.

추가 자료 :

이 단계에서는 기본적으로 두 페이지로 구성된 간단한 웹 사이트를 구축했습니다. 홈페이지 그리고 페이지.

이제해야 할 일은 새 페이지를 만들고, 조정하고, 내용을 추가 한 다음 탐색 메뉴에서 모든 내용을 연결하여 헹구고 반복하는 것입니다..

이 단계를 수행하면서 수행 할 가치가있는 다른 작업은 HTML 및 CSS 원칙을 자세히 배우고 점검 목록을 살펴보고 Bootstrap 및 해당 구조와 클래스를 배우는 것입니다. 이를위한 몇 가지 리소스 :

  • HTML5 치트 시트
  • CSS 치트 시트
  • 자바 스크립트 치트 시트
  • HTML 튜토리얼
  • 부트 스트랩 튜토리얼
  • 부트 스트랩 치트 시트

HTML 및 CSS를 사용하여 최적화되고 아름다운 웹 사이트를 구축하는 데 가장 적합한 경로 인 Mastering Bootstrap.

HTML 및 CSS를 사용하여 웹 사이트를 만드는 방법에 대해 궁금한 점이 있으면 언제든지 의견을 보내주십시오..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map