웹사이트를 만드는 방법: 초보자용

항상 웹 사이트를 만들고 싶었습니까? HTML( HTML 이해 ) 및 CSS 자습서가 있지만 더 큰 프로젝트에서 이러한 언어를 사용하는 방법을 모릅니다.

오늘은 처음부터 완전한 웹사이트를 만드는 과정을 안내해 드리겠습니다. 어려운 작업처럼 보이더라도 걱정하지 마십시오. 모든 단계를 안내해 드리겠습니다.

---

---

jQuery를 터치하여 HTML, CSS 및 JavaScript를 사용하여 이 웹 사이트를 제작합니다( jQuery 가이드). 당신은 아무것도하지 않을 것입니다 진짜 최첨단이므로 이 코드는 대부분의 최신 브라우저에서 상당히 잘 작동합니다.

CSS에 대해 잘 모르는 경우 다음을 참조하십시오. CSS 가이드 ~에 W3Schools.com .

디자인

이 웹사이트의 디자인은 다음과 같습니다. 더 나은 모습을 원하면 고해상도 이미지를 살펴보십시오. 전체 프로젝트를 여기에서 다운로드하십시오.

나는 가상의 회사를 위해 이 웹사이트를 디자인했습니다. 어도비 포토샵 2017. 관심이 있는 경우 번들 다운로드에서 .PSD 파일을 가져와야 합니다. 다음은 Photoshop 파일에 있는 내용입니다.

PSD 내에서 그룹화되고 이름이 지정되고 색상으로 구분된 모든 레이어를 찾을 수 있습니다.

올바르게 보이려면 몇 가지 글꼴을 설치해야 합니다. 첫 번째는 글꼴 굉장 , 모든 아이콘에 사용됩니다. 나머지 두 글꼴은 PT 세리프 및 Myriad Pro(Photoshop에 포함됨). 글꼴 설치 방법을 잘 모르겠다면 가이드를 읽어보세요.

없으시더라도 걱정마세요 어도비 포토샵 , 진행하는 데 필요하지 않습니다.

초기 코드

디자인이 명확해지면 코딩을 시작하겠습니다! 좋아하는 텍스트 편집기에서 새 파일을 만듭니다(저는 숭고한 텍스트 3 ). 다른 이름으로 저장 index.html . 이것을 원하는 대로 부를 수 있습니다. 많은 페이지가 인덱스라고 불리는 이유는 웹 서버가 작동하는 방식 때문입니다. 대부분의 서버에 대한 기본 구성은 페이지가 지정되지 않은 경우 index.html 페이지를 제공하는 것입니다.

세부 사항을 배우고 싶지 않다면 다운로드에서 전체 코드를 가져오십시오.

필요한 코드는 다음과 같습니다.





Noise Media


/* CSS goes here, at the top of the page */





/* JavaScript goes here, at the bottom of the page */




이것은 여러 가지 작업을 수행합니다.

• 필요한 최소한의 HTML을 정의합니다.
• '노이즈 미디어'의 페이지 제목을 정의합니다.
• Google CDN( CDN이란)에서 호스팅되는 jQuery를 포함합니다.
• Google CDN에서 호스팅되는 Font Awesome이 포함되어 있습니다.
• 다음을 정의합니다. 스타일 CSS를 작성할 태그입니다.
• 다음을 정의합니다. 스크립트 JavaScript를 작성할 태그입니다.

파일을 다시 저장하고 웹 브라우저에서 엽니다. 당신은 아마 많은 것을 눈치채지 못할 것이고, 그것은 확실히 아직 웹사이트처럼 보이지 않을 것입니다.

페이지 제목이 어떻게 되는지 확인하세요. 소음 매체 . 이것은 내부의 텍스트에 의해 정의됩니다. 제목 꼬리표. 이것 가지다 안에 있기 위해 머리 태그.

페이스 북에서 사진 콜라주를 만드는 방법

헤더

헤더를 만들어 봅시다. 다음은 다음과 같습니다.

맨 위에 있는 작은 회색 부분부터 시작하겠습니다. 밝은 회색 아래에 약간 어두운 회색이 있습니다. 다음은 클로즈업입니다.

이 HTML을 신체 상단의 태그:

여기 있는 동안 이 문제를 해결해 보겠습니다. NS div 이것은 다른 물건을 담는 컨테이너와 같습니다. 이 '기타 물건'은 더 많은 컨테이너, 텍스트, 이미지 등 무엇이든 될 수 있습니다. 특정 태그에 들어갈 수 있는 항목에 대한 몇 가지 제한 사항이 있지만 div는 상당히 일반적인 것입니다. 그것은 가지고있다 ID NS 상단 바 . 이것은 CSS로 스타일을 지정하고 필요한 경우 JavaScript로 대상을 지정하는 데 사용됩니다. 특정 ID를 가진 요소가 하나만 있는지 확인하십시오. 고유해야 합니다. 여러 요소의 이름이 같도록 하려면 수업 대신 -- 그것이 그들이 설계한 것입니다! 스타일을 지정하는 데 필요한 CSS는 다음과 같습니다. 스타일 꼬리표):

html, body {
margin: 0;
padding: 0;
font-family: 'Helvetica', 'Arial'; /* initial fonts */
}
#top-bar {
width: 100%;
background: #F1F1F1; /* light gray */
border-bottom: 1px solid #D4D4D4; /* dark gray 'underline' */
height: 25px;
}

해시 기호(#, 해시태그, 파운드 기호)가 이름 앞에 어떻게 사용되는지 주목하십시오. 이는 요소가 ID임을 의미합니다. 클래스를 사용하는 경우 마침표(.)를 대신 사용합니다. NS HTML 그리고 신체 태그의 패딩과 여백은 0으로 설정됩니다. 이것은 원치 않는 간격 문제를 방지합니다.

이제 로고와 탐색 메뉴로 이동할 시간입니다. 시작하기 전에 이 콘텐츠를 담을 컨테이너가 필요합니다. 이것을 클래스로 만들어 보겠습니다(나중에 다시 사용할 수 있도록). ~ 아니다 반응형 웹사이트의 경우 너비를 900픽셀로 설정합니다.

HTML:




CSS:

.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}

코드를 완료할 때까지 무슨 일이 일어나고 있는지 알기 어려울 수 있으므로 (임시) 색상 배경을 추가하여 무슨 일이 일어나고 있는지 확인하는 것이 도움이 될 수 있습니다.

background: red;

이제 로고를 만들 차례입니다. 글꼴 굉장 아이콘 자체에 필요합니다. Font Awesome은 벡터 글꼴로 패키지된 아이콘 세트입니다. 위의 초기 코드는 이미 Font Awesome을 설정했으므로 모든 준비가 완료되었습니다!

이 HTML 추가 내부에 NS 일반 래퍼 div:





CSS:

.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}

디자인과 일치하지 않는 다른 글꼴에 대해 걱정하지 마십시오. 나중에 정리할 것입니다. 다른 아이콘을 사용하려면 글꼴 멋진 아이콘 페이지를 변경한 다음 볼륨 다운 사용하려는 아이콘의 이름에

탐색 모음으로 이동하면 순서가 지정되지 않은 목록( NS ) 이를 위해. 이 HTML 추가 ~ 후에 NS 로고 컨테이너 (하지만 여전히 내부 일반 래퍼 ):

• Home


• About


• Reviews


• Contact

NS href 다른 페이지로 연결하는 데 사용됩니다. 이 튜토리얼 웹사이트에는 다른 페이지가 없지만 여기에 이름과 파일 경로(필요한 경우)를 입력할 수 있습니다. 리뷰.html . 이것을 두 개의 큰따옴표 안에 넣어야 합니다.

CSS는 다음과 같습니다.

#navbar {
list-style-type: none; /* remove bullet points */
margin: 29px 0 0 0;
padding: 0;
float: right;
font-size: 16pt;
}
#navbar li {
display: inline; /* make items horizontal */
}
#navbar li a:link, #navbar li a:visited, #navbar li a:active {
text-decoration: none; /* remove underline */
color: #000000;
padding: 0 16px 0 10px; /* space links apart */
margin: 0;
border-right: 2px solid #B4B4B4; /* divider */
}
#navbar li a:link.last-link {
/* remove divider */
border-right: 0px;
}
#navbar li a:hover {
/* change color on hover (mouseover) */
color: #EB6361;
}

이 CSS는 순서 없는 목록 . 그런 다음 다음을 사용하여 글머리 기호를 제거합니다. 목록 스타일 유형: 없음; . 링크는 약간의 간격을 두고 있으며 링크 위에 마우스를 가져가면 색상이 지정됩니다. 작은 회색 구분선은 각 요소의 오른쪽 테두리이며 다음을 사용하여 마지막 요소에 대해 제거됩니다. 마지막 링크 수업. 다음은 다음과 같습니다.

이 섹션에 남은 것은 빨간색 수평 강조 표시뿐입니다. 다음에 이 HTML을 추가하십시오. 일반 래퍼 :

CSS는 다음과 같습니다.

#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}

완성된 상단 부분입니다. 다음과 같이 생겼습니다. 디자인과 꽤 비슷하지 않나요?

주요 콘텐츠 영역

이제 주요 콘텐츠 영역인 '스크롤 없이 볼 수 있는 부분'으로 이동할 차례입니다. 이 부분은 다음과 같습니다.

이것은 매우 간단한 부분입니다. 왼쪽에는 텍스트가 있고 오른쪽에는 이미지가 있습니다. 이 지역은 느슨하게 대략적으로 3분의 1로 나누어 황금비율 .

이 부분에 대한 샘플 이미지가 필요합니다. 다운로드에 포함되어 있습니다. 이 이미지는 너비가 670픽셀이며 Panasonic Lumix DMC-G80/G85 Review에서 가져온 것입니다.

HTML 추가 ~ 후에 NS 탑 컬러 스플래쉬 요소:

Welcome!

Noise Media is a technology company specialising in tech reviews.

We’re very good at what we do, but unfortunately, we are not a real company.

Make sure you visit makeuseof.com for the full tutorial on how to build this website.

타임머신에서 백업을 삭제하는 방법

Alternatively, check out our review of the Panasonic G80 shown on the right!

어떻게 일반 래퍼 요소가 반환되었습니다(클래스 사용의 기쁨입니다). 이미지( 이미지 ) 태그가 닫히지 않습니다. 이것은 자체 닫는 태그입니다. 슬래시( /> ) 태그를 닫아야 하는 것이 항상 의미가 있는 것은 아니므로 이를 나타냅니다.

CSS:

.one-third {
width: 40%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
margin-top: 20px;
}
.two-third {
width: 60%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
padding-left: 40px;
text-align: right;
margin-top: 20px;
}
.featured-image {
max-width: 500px; /* reduce image size while maintaining aspect ratio */
}
.no-margin-top {
margin-top: 0; /* remove margin on things like headers */
}

여기서 가장 중요한 속성은 상자 크기: 테두리 상자; . 이렇게 하면 요소의 너비가 항상 40% 또는 60%가 됩니다. 기본값(이 속성 없음)은 지정한 너비에 패딩, 여백 및 테두리를 더한 것입니다. 이미지 클래스( 나타난 그림 )가 있다 최대 너비 NS 500픽셀 . 한 치수(너비 또는 높이)만 지정하고 다른 치수를 비워두면 CSS는 종횡비를 유지하면서 이미지 크기를 조정합니다.

견적 영역

견적 영역을 만들어 보겠습니다. 다음은 다음과 같습니다.

이것은 또 다른 간단한 영역입니다. 흰색 중앙에 텍스트가 있는 짙은 회색 배경이 포함되어 있습니다.

이 HTML 추가 ~ 후에 이전 일반 래퍼 :

makeuseof is the best website ever

Joe Coburn

그리고 이 CSS:

#quote-area {
background: #363636;
color: #FFFFFF;
text-align: center;
padding: 15px 0;
}
h3 {
font-weight: normal;
font-size: 20pt;
margin-top: 0px;
}
h4 {
font-weight: normal;
font-size: 16pt;
margin-bottom: 0;
}

여기에서 많은 일이 벌어지고 있지 않습니다. 크기 조정은 글꼴 크기, 간격 등 필요한 주요 조정입니다. 이제 전체 모습입니다. 웹사이트처럼 보이기 시작했습니다!

아이콘 영역

계속 눌러봅시다 -- 거의 다 끝났습니다! 다음은 생성이 필요한 영역입니다.

이 부분은 여러 클래스를 활용합니다. 세 개의 아이콘은 내용을 제외하고 대부분 동일하므로 ID 대신 클래스를 사용하는 것이 좋습니다. 이 HTML 추가 ~ 후에 이전 견적 영역 :

YouTube

Checkout our YouTube channel for more tech reviews, tutorials and giveaways!

Reviews

If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.

Buying Guides

At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.

이 세 가지 아이콘도 멋진 글꼴 . HTML은 다시 한 번 일반 래퍼 수업. CSS는 다음과 같습니다.

.icon-outer {
box-sizing: border-box; /* ensure padding and borders do not increase the size */
float: left;
width: 33.33%;
padding: 25px;
margin: 0;
text-align: center;
}
.icon-circle {
background: #EEEEEE;
color: #B4B4B4;
width: 200px;
height: 200px;
border-radius: 200px; /* make rounded corners */
margin: 0 auto;
border: 2px solid #D6D6D6;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
font-size: 75pt;
padding: 30px 0 0 0;
cursor: pointer;
}
.icon-circle:hover {
/* change color on hover (mouseover) */
color: #FFFFFF;
background: #EB6361;
}
h5 {
margin: 15px 0 10px 0;
font-size: 20pt;
}

CSS에서 몇 가지 새로운 일이 진행 중입니다. 둥근 모서리는 다음으로 설정됩니다. 테두리 반경: 200px; . 이 값을 너비와 동일하게 설정하면 완벽한 원이 됩니다. 모서리가 둥근 사각형을 더 선호하는 경우 이 값을 줄일 수 있습니다. 호버 작업이 div에 적용되는 방식에 주목하세요. 링크에만 국한되지 않습니다. 이 섹션은 다음과 같습니다.

바닥글

마지막으로 할 일은 바닥글입니다! 이것은 텍스트가 없는 회색 영역이기 때문에 정말 간단합니다. 아이콘 영역 뒤에 이 HTML을 추가하십시오. 일반 래퍼 :

CSS는 다음과 같습니다.

#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}

참조 - 정말 간단한 것들.

피자치즈 추가

이렇게 하면 코딩이 완료됩니다! 당신은 절대적으로 물건을 그대로 둘 수 있습니다. 그것은 완성 된 웹 페이지입니다. 그러나 당신은 그것이 보이지 않는다는 것을 눈치 챘을 것입니다. 바로 그거죠 디자인처럼. 그 주된 이유는 사용된 글꼴입니다. 정리해보자.

대부분의 제목에 사용되는 글꼴은 다음과 같습니다. 무수한 프로 . 이것은 함께 제공됩니다 어도비 벽돌 클라우드를 만들지만 웹 글꼴로 사용할 수 없습니다. 현재 웹페이지에서 사용하고 있는 글꼴은 헬베티카 . 괜찮아 보이므로 그대로 둘 수 있지만 PT 산스 웹 글꼴로 사용할 수 있습니다. 모든 텍스트에 사용된 글꼴은 PT 세리프 , 웹 글꼴로 사용할 수 있습니다.

Webfonts는 간단한 프로세스입니다. 컴퓨터에 새 글꼴을 로드하는 것처럼 웹 페이지는 요청 시 글꼴을 로드할 수 있습니다. 이를 수행하는 가장 좋은 방법 중 하나는 구글 폰트 .

더 나은 글꼴로 전환하려면 이 CSS를 추가하세요.

@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
h1, h2, h4, h5, h6 {
font-family: 'PT Sans', 'Helvetica', 'Arial';
}

이제 새 글꼴을 사용하도록 html 및 body 요소를 수정합니다.

font-family: 'PT Serif', 'Helvetica', 'Arial';

h3 요소가 목록에 포함되지 않는 방법에 주목하세요. 기본값은 다음과 같습니다. PT-세리프 대신에 PT-산스 .

마지막으로 약간의 아름다움으로 JavaScript를 사용하여 세 가지 다른 특징 이미지를 스크롤해 보겠습니다. 필요할 것이예요 이미지_2 그리고 이미지_3 이 부분은 선택 사항입니다. 이 기능이 없어도 웹사이트는 이 시점에서 완전히 작동합니다. 다음은 다음과 같습니다(속도 향상).

3개의 추천 이미지를 포함하도록 HTML을 수정합니다. 이 중 두 가지가 CSS 클래스를 갖는 방법에 주목하십시오. 숨겨진 . JavaScript가 각 이미지를 독립적으로 타겟팅할 수 있도록 각 이미지에 ID가 지정되었습니다.







추가 추천 이미지를 숨기는 데 필요한 CSS는 다음과 같습니다.

.hidden {
display: none;
}

이제 HTML과 CSS가 처리되었으므로 JavaScript로 전환해 보겠습니다. 이 부분에 대한 DOM(문서 개체 모델)을 이해하는 것이 유용하지만 필수 사항은 아닙니다.

찾기 스크립트 페이지 하단의 영역:


/* JavaScript goes here, at the bottom of the page */


내부에 다음 JavaScript를 추가하십시오. 스크립트 꼬리표:

/* JavaScript goes here, at the bottom of the page */
$(document).ready(function() {
// run once the page is ready
var time = 2500;
// get the image containers
$im1 = $('#f-image-1');
$im2 = $('#f-image-2');
$im3 = $('#f-image-3');
setInterval(function(){
// call function every x milliseconds (defined in time variable above)
changeImage();
}, time);
var currentImage = 1;
function changeImage(){
switch(currentImage) {
case 1:
// show image 2
$im1.hide();
$im2.show();
$im3.hide();
currentImage = 2;
break;
case 2:
// show image 3
$im1.hide();
$im2.hide();
$im3.show();
currentImage = 3;
break;
default:
// show image 1
$im1.show();
$im2.hide();
$im3.hide();
currentImage = 1;
}
}
});

여기에서 몇 가지 일이 일어나고 있습니다. 코드는 내부에 포함되어 있습니다 $(문서).ready() . 이것은 브라우저가 페이지 렌더링을 완료하면 실행된다는 것을 의미합니다. 이것은 좋은 방법입니다. NS 세트간격() 함수를 호출하는 데 사용됩니다. 이미지 변경() 밀리초(1000밀리초 = 1초) 단위로 미리 정의된 간격으로 정기적으로 작동합니다. 이것은 시각 변하기 쉬운. 이 값을 늘리거나 줄여 스크롤 속도를 높이거나 낮출 수 있습니다. 마지막으로 간단한 case 문을 사용하여 다른 이미지를 표시하고 현재 표시되는 이미지를 추적합니다.

코딩 챌린지

그게 다야! 그 과정에서 많은 것을 배웠기를 바랍니다. 도전을 좋아하고 새로 발견한 기술을 테스트하고 싶다면 다음 수정 사항을 구현해 보십시오.

바닥글 추가: 바닥글에 일부 텍스트를 추가합니다(힌트: 일반 래퍼 그리고 1/3/2/3 클래스.).

이미지 스크롤 개선: JavaScript를 수정하여 이미지 변경 사항에 애니메이션 효과 주기(힌트: jQuery 점점 뚜렷해지다 그리고 생기 있는 ).

여러 인용문 구현: 따옴표를 수정하여 여러 다른 따옴표 중 하나를 변경합니다(힌트: 시작점에 대한 이미지 스크롤 코드 참조).

서버 설정: 서버를 설정하고 웹페이지와 서버 간에 데이터를 전송합니다(힌트: JSON 및 Python 가이드 읽기).

윈도우10 메일알림 끄기

JavaScript 사용에 익숙하거나 Ruby에 대한 경험이 있다면 GatsbyJS 또는 Jekyll과 같은 정적 웹 사이트 빌더를 사용하여 웹 사이트를 만들어 볼 수 있습니다.

공유하다 공유하다 트위터 이메일 Windows 10 데스크탑의 모양과 느낌을 변경하는 방법

Windows 10을 더 멋지게 만드는 방법을 알고 싶으십니까? 이러한 간단한 사용자 지정을 사용하여 Windows 10을 나만의 것으로 만드십시오.

다음 읽기 관련 항목

• 프로그램 작성
• HTML
• 웹 디자인
• CSS

저자 소개 조 코번(136건의 기사 게재)

Joe는 영국 링컨 대학교에서 컴퓨터 공학을 전공했습니다. 그는 전문 소프트웨어 개발자이며 드론을 날리거나 작곡을 하지 않을 때 종종 사진을 찍거나 동영상을 제작하는 모습을 볼 수 있습니다.

조 코번이 참여한 작품 더보기

뉴스레터 구독

뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!

구독하려면 여기를 클릭하세요.