Need help? Chat now!

Hostwinds 블로그

에 대한 검색 결과:


Hostwinds 자습서 : 사이트 구축 응용 프로그램없이 기본 블로깅 웹 사이트를 구축하는 방법 Pt. 삼 나타난 그림

Hostwinds 자습서 : 사이트 구축 응용 프로그램없이 기본 블로깅 웹 사이트를 구축하는 방법 Pt. 삼

으로: Hostwinds Team  /  12 월 28, 2018


호스트 와인드 코딩 블로그 시리즈의 제 3 부는 여기에 있습니다!부품 1과 2에서 HTML을 사용하여 HTML과 3 개의 웹 페이지를 사용하여 블로깅 웹 사이트의 홈페이지를 만들었습니다. HTML을 사용하여 3 개의 가상의 블로그 게시물을 사용합니다.CSS에!CSS는 귀하의 웹 사이트를 더욱 맞춤화하고 사용자 정의 할 수 있도록 HTML 코드와 함께 작동하는 프로그래밍 언어입니다.우리는 여기서 커버 할 수 있도록 너무 많은 것을 가지고 있습니다. 그래서 꽉 잡아!첫 번째 CSS 문서를 만들기 전에 CSS 문서를 HTML 문서에 연결하는 방법을 알 수 있습니다.그것은 쉽습니다!

아, 그리고 시작하기 전에 CSS 문서를 HTML 문서에 연결 하고이 블로그 시리즈의 파트 1,이 블로그 시리즈의 파트 2 및 이전 블로그 게시물의 형태로 치트 시트는 "HOSTWINDS HTML 과제 2 : 태그의 형태로 링크를 확인하십시오."그리고"hostwinds css 채팅 "을 말하십시오."

Hostwinds 자습서 : 사이트 구축 응용 프로그램없이 기본 블로깅 웹 사이트를 구축하는 방법 Pt.1

Hostwinds 자습서 : 사이트 구축 응용 프로그램없이 기본 블로깅 웹 사이트를 구축하는 방법 Pt. 2

Hostwinds HTML Hype 파트 2 : 태그 토크

Hostwinds CSS 채팅

추신이를 위해 다시 작성하는 블로깅 웹 사이트는 기본입니다.희망은 우리가 웹 사이트에 지속적으로 확장 할 수 있고 천천히 블로그 게시물로 더 아름답거나 동적 / 마법의 블로그 게시물을 만드는 것입니다.모든 의도와 목적을 위해이 블로그 시리즈는 웹 사이트 건물의 기본 사항을 제공하도록 설계되었습니다.좋아, 이제 다이빙 해 보자!

먼저 첫 번째 : CSS 문서를 HTML 문서에 연결하기

HTML 문서 4 개에서 열리고 닫는 태그 내에이 코드를 추가하십시오.

저장을 촉구하는 것을 잊지 마십시오!검토를 위해이 순간에 4 개의 HTML 문서가 그렇게 보입니다.

1. 웹 사이트 홈페이지 :

내 블로그 웹 사이트

내 블로그 웹 사이트

블로그 게시물 1 제목

원하는 경우 블로그 게시물의 간략한 개요를 배치 할 수 있습니다.

블로그 게시물 2 제목

원하는 경우 블로그 게시물의 간략한 개요를 배치 할 수 있습니다.

블로그 게시물 3 제목

원하는 경우 블로그 게시물의 간략한 개요를 배치 할 수 있습니다.

이 블로그 사이트를 방문해 주셔서 감사합니다!

2. 블로그 게시물 1 웹 페이지 :

내 블로그 웹 사이트 | 블로그 1

내 블로그 웹 사이트

블로그 게시물 1 제목

다음은 하루 동안 블로그 게시물에 추가 할 모든 텍스트를 배치 할 수있는 곳입니다.

이 블로그 사이트를 방문해 주셔서 감사합니다!

3. 블로그 게시물 2 웹 페이지 :

내 블로그 웹 사이트 | 블로그 2

블로그 게시물 2 제목

다음은 하루 동안 블로그 게시물에 추가 할 모든 텍스트를 배치 할 수있는 곳입니다.

이 블로그 사이트를 방문해 주셔서 감사합니다!

4. 블로그 게시물 3 웹 페이지 :

내 블로그 웹 사이트 | 블로그 3

블로그 게시물 3 제목

다음은 하루 동안 블로그 게시물에 추가 할 모든 텍스트를 배치 할 수있는 곳입니다.

이 블로그 사이트를 방문해 주셔서 감사합니다!

중요 알림 : 이 블로그 게시물에 삽입 한 코드 덩어리가 너무 길어서 창에 맞지 않는 경우 해당 영역 위로 마우스를 가져 가면 해당 코드의 맨 아래에 작은 스크롤 막대가 나타납니다. 스크롤 막대를 오른쪽으로 밀어 전체 코드를 볼 수 있습니다.

이제 우리는이 전체 CSS 상황을 단계별로 취할 것입니다.

CSS 문서를 처음 설정하는 방법

1 단계: 동일한 폴더 및 텍스트 편집기 내에서 새 폴더를 만듭니다 (Part 1에서 index.html을 넣을 것 같은 폴더 및 텍스트 편집기).폴더의 이름을 "CSS"라는 이름을 지정하십시오.그런 다음 해당 폴더 내에 새 파일을 만들고 "Style.css"파일 이름을 지정하십시오. CLOSSS 문서는 모든 HTML 문서를 수정합니다.

2 단계: 이제 우리는 다음과 같이 수정하고자하는 모든 태그를 참조 (또는 "대상") 할 수 있습니다.

본체 {} H3 {} H4 {} P {} 버튼 {} 버튼 : {} 바닥 글 {} div {} .readnext {} #thankyou {}

단지 알림 : 3 단계로 이동하기 전에 해당 경기장에서 아직 잘 정통되지 않은 경우 CSS 선택기, 속성, 속성 값 및 일반 구문에 관한 블로그 게시물을 검토하십시오.

3 단계 : 우리는 홈페이지 및 웹 페이지의 배경을 전체 페이지를 차지하는 이미지로 원합니다.당신은 당신의 배경을 당신의 배경으로 좋아하는 이미지를 선택할 수 있지만,이 튜토리얼에 대한 배경 이미지 "your_background_image.png"의 이름을 지정할 수 있습니다.또한 우리는 우리의 배경에서 구름의 아름다운 이미지를 만들 것입니다.이 이미지를 웹 페이지의 웹 페이지의 배경 페이지로 만들고 각 웹 페이지의 전체 페이지를 차지하도록 만들려면 "Body"선택기 내의 "배경 이미지"및 "배경 크기"속성을 매우 삽입합니다.문서의 맨 위로.

참고 : CSS (및 해당 문제에 대한 HTML)는 페이지에서 먼저 발생하는 요소가 먼저 발생하고 그다음에 두 번째로 발생하는 순서 여야합니다.

또 다른 참고 사항 : "왜"/ image/your_background_image.jpg 앞에 두 개의 기간이 있습니까? "좋은 catch!이 블로깅 시리즈의 1 부에서 상대 파일 경로와 관련하여 우리가 가진 토론을 기억할 수 있습니다.우리는이 블로그 게시물의 시작 부분에 CSS를 호출하기 위해 상대적인 파일 경로를 사용하여 "/css/style.css"참조를 사용하여 "/css/style.css"참조를 사용했습니다. 이는 "CSS"폴더가 동일하기 때문입니다.우리의 index.html 파일. 우리가 브라우저가 우리의 스타일의 .css 문서가있는 "CSS"폴더에서 브라우저를 시작하도록 말하기 때문에 브라우저가 "/ images/your_background_image.jpg"앞에 두 개의 기간이 있습니다."CSS"폴더는 "이미지"라는 이름의 다른 폴더로 이동 한 다음 "your_background_image.jpg"라는 이미지 파일을 잡습니다.

그런 다음 탐색 막대에서 링크 텍스트 ( "블로그 홈")의 글꼴을 변경하고 링크 텍스트를 모두 대문자로 만듭니다.따라서 지금까지 문서는 그렇게 나타나야합니다 :

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;}

4 단계 : 우리는 모든 제목의 글꼴을 변경하고, 텍스트를 모두 대문자로 만들고, 제목 텍스트를 중앙에 배치하고, 텍스트 색상을 진한 파란색으로 변경하려고합니다.

그런 다음 이미지가 모두 가운데가 있고, 너비를 바꾸고, 테두리를 주위에 넣고 테두리를 측면에서 둥글게 만듭니다.이러한 추가 기능을 사용하면 문서가 다음과 같습니다.

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;}

5 단계 : 오른쪽으로 움직입니다!단락의 글꼴과 색상을 변경하면서 텍스트 단락을 중심으로합니다.

그 후, 우리는 홈페이지의 버튼을 수정할 것입니다.가운데를 사용하여 다음 속성을 사용할 것입니다.

display: block;margin-left: auto;margin-right: auto;

배경색을 변경하려면 텍스트를 대문자로 만들려면 글꼴 패밀리 및 글꼴 크기를 변경하여 단추 내의 텍스트를 가운데 버튼의 측면과 단추 내의 텍스트 사이에 공백을 추가하여 버튼을 제공합니다.단단한 검은 색 테두리와 버튼의 모서리를 둥글게하려면 다음 코드를 생성합니다.

background-color: #bee5eb;text-transform: uppercase;font: 27px 'Cinzel', serif;text-align: center;padding: 20px 30px;border: 3px solid black;border-radius: 25px;

이제 문서가 다음과 같이 나타납니다.

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;}

6 단계 : 이 부분은 멋지다!홈페이지 버튼의 색상을 변경하고 누군가가 마우스를 가로 지르는 사람을 가리킬 때 거의 볼 수있게 만드는 것처럼 거의 볼 수 있습니다. 다음 코드를 입력합니다.

button:hover { background-color: #00a1f5; opacity: .5;}

이제 우리의 바닥 글과 최종 Div 태그를 수정합시다.우리는 바닥 글의 텍스트 (일명은 글꼴 가족, 글꼴 크기, 글꼴 색상, 텍스트 정렬), 바닥 글의 배경색을 변경 하고이 CSS 코드를 입력하여 바닥 글과 해당 지역 사이에 공백을 추가합니다.

footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;}

태그가 작동하는 방법을 더 잘 이해하려면 Part 1에서 생성 한 하나의 태그를 수정합니다.우리는 index.html 페이지의 개폐 태그 간의 콘텐츠의 배경을 3 가지 색상의 그라디언트로 만들 것입니다.이렇게하면 개폐 태그 사이에 코드 덩어리를 중첩하는 것을 볼 수 있습니다.여기에, 사람들은 우리 홈페이지에 슈퍼 미학적으로 즐겁게 보이지 않기 때문에 사람들과 함께 곰.우리는 우리 가이 그라데이션 배경을 만들 수 있도록 스타일 .css 문서의 맨 아래에 다음 CSS 코드를 추가 할 것입니다.

div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);}

7 단계 : 전체 CSS 문서를 살펴보고 멋지게 보이는지 확인하세요.

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;} button:hover { background-color: #00a1f5; opacity: .5;} footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;} div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);}

8 단계 : 이 블로그 시리즈의 2 부에서 이것을 회상 할 수 있지만, "블로그 게시물 2"또는 "블로그 게시물보다"블로그 게시물을 "블로그 게시물"보다는 "블로그 게시물 1"사이의 표제와 닫는 태그 사이의 텍스트 부분을 제외하고3 ") Blog Post 하나의 웹 페이지와 블로그 게시물 2와 3에 대한 웹 페이지 사이에 후자의 웹 페이지에는 사용자가 다음 블로그 게시물을 볼 수있는 링크가 포함되어 있습니다 (블로그 게시물의 웹 페이지는 필요하지 않습니다)이 링크는 현재 현재 블로그 게시물입니다.)2 부에서는 블로그 게시물 2와 3 개의 HTML 문서의 바닥 글 내의 태그에 "Readme"클래스를 추가했습니다.이제이 CSS 문서 에서이 클래스를 대문자로 만들어 "다음 블로그 게시물 읽기"링크의 문자 사이에 공백을 추가하고 "이 블로깅 사이트를 방문 해 주셔서 감사합니다!""기본적으로 다음과 같은) 링크가 아닌"다음 블로그 게시물 "링크 옆에 있습니다.

이러한 수정을 달성하기 위해 CSS 문서의 맨 아래에 다음 코드를 추가합니다.

#ReadNext { text-transform: uppercase; letter-spacing: 3px; float: left;}

9 단계 : index.html 문서에서 우리의 열리고 닫는 태그 사이에 태그에 그 ID를 추가했을 때 기억하십시오.우리는 이렇게했습니다. 그래서 우리는 IDS가 어떻게 작동하는지과 CSS에서 그들을 표적하는 방법을 더 잘 이해할 수있었습니다.여기에 우리가 간다!먼저 STYLE.CSS 문서의 맨 아래에 다음 코드를 입력 해 봅시다.

#ThankYou { text-transform: uppercase; color: #0b053f;}

자, 내가 설명 할거야.우선, "Thankyou"앞의 해시 태그는 브라우저가 ID라는 것을 알려줍니다.만을 주면서

index.html의 태그는 "Thankyou"를 찍고 CSS에서 해당 특정 단락의 텍스트를 모두 대문자와 해군 파란색으로 만드는 해당 ID를 타겟팅하면 홈페이지의 바닥 글의 단락 만 변경 될 수 있습니다.블로그 게시물 1, 2 및 3의 웹 페이지 바닥 글에있는 동일한 단락은 대문자가 아니며 해당 해군 파란색이 아닙니다.위의 코드를 STYLE.CSS 페이지에 추가 한 후에이 구별을 보려면 웹 페이지를 확인하고 웹 페이지를 확인하십시오.

이제 CSS 문서는 다음과 같습니다.

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;} button:hover { background-color: #00a1f5; opacity: .5;} footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;} div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);} .ReadNext { text-transform: uppercase; letter-spacing: 3px; float: left;} #ThankYou { text-transform: uppercase; color: #0b053f;}

10 단계로 넘어갑니다!

오, 잠깐!첫째, "P."

추신나는 이것을 충분히 강조 할 수 없다 :보다 복잡한 웹 사이트에서, 클래스, 태그 및 ID는 중요하며 매우 자주 사용됩니다.

자, 이제 10 단계로 넘어갑니다!

10 단계 : 업데이트 된 웹 사이트 및 웹 페이지를 테스트하십시오!파일 탐색기로 이동하여 "index.html"파일을 마우스 오른쪽 단추로 클릭하고 "열기"를 클릭하십시오.다음으로 원하는 인터넷 브라우저를 선택하십시오 (Google 크롬 추천 권장)."블로그 게시물 읽기"버튼을 클릭하고 CSS를 사용하여 웹 페이지의 변경 사항을 확인하십시오.

홈페이지

블로그 게시물 1 웹 페이지

블로그 게시물 2 웹 페이지

블로그 게시물 3 웹 페이지

CSS 다채로운 캔버스

폐쇄에서 CSS는 웹 사이트를보다 미해상으로 즐겁게하고 역동적으로 만듭니다. 우리는 당신이 지금 까지이 튜토리얼 블로그 시리즈에서 이익을 얻을 수 있기를 바랍니다. 미래의 블로그 게시물 에서이 웹 사이트를 계속 개발하기를 희망합니다. 이 계획은 우리가 앞으로 나아갈 때 우리의 웹 사이트를 더욱 상호 작용하고 고상하게 보이는 것입니다. Spoiler Alert : 우리는 조금 자바 스크립트를 믹스에 던지기도 할지도 모릅니다. 우리는 당신이 일주일 동안 나머지를 즐기기를 바랍니다.

작성자 Hostwinds Team  /  12 월 28, 2018