HTML 및 CSS에 대한 초보자 가이드

오늘날 우리 사이트를 지원하는 다양한 기술을 찾을 수 있지만 전체 인터넷에서 가장 중요한 두 파일은 HTML과 CSS입니다. 예, 복잡한 것이 필요하면 더 많은 기술이 필요합니다. 하지만 간단한 개인 웹페이지를 만드는 것이라면 HTML과 CSS만 있으면 됩니다.

기본 소개

이것은 가능한 한 빨리 간단한 사이트를 만드는 방법을 보여주는 HTML 및 CSS에 대한 초보자 가이드입니다. 결과가 반드시 "표준을 준수"하는 것은 아닙니다. 그리고 당신이 그것을 더 조정하고 확장하고 싶다면 독자적으로 약간의 독서를 해야 할 것입니다. 그러나 그것은 사이트가 될 것이며 대부분의 브라우저에서 "당연히" 작동할 것입니다.

공간이 소중하기 때문에 웹 개발 및 디자인의 모든 측면에 대해 너무 깊이 파고들지는 않을 것입니다. 대신, 0에서 완전히 작동하는 웹페이지로 이동하는 단계를 안내하고 그 과정에서 모든 것이 무엇을 하는지 설명합니다.

필요한 파일 2개

최신 사이트는 많은 파일로 구성되어 있지만 HTML과 CSS 파일이 가장 중요합니다. HTML 파일은 페이지의 요소와 구조를 정의합니다. CSS 파일은 이러한 요소의 모양을 정의합니다.

둘 다 본질적으로 특별히 구조화된 텍스트를 포함하는 일반적인 텍스트 파일입니다. 그것들을 만들거나 조정하기 위해 특별한 유형의 프로그램이 필요하지 않습니다:모든 "단순한" 텍스트 편집기가 필요합니다. "단순"이란 어떤 식으로든 텍스트를 "풍부하게" 할 수 있는 LibreOffice의 편집기나 Microsoft Word와 같은 것이 아니라 일반적인 메모장 스타일의 응용 프로그램을 의미합니다.

첫 번째 단계는 바탕 화면에 두 개의 빈 텍스트 파일이 있는 새 폴더를 만드는 것입니다. 그 중 하나의 이름을 "index.html"로 지정하고 두 번째 이름을 "style.css"로 지정합니다.

HTML 및 CSS에 대한 초보자 가이드

작업 공간 설정

즐겨 사용하는 브라우저를 실행하고 "파일 -> 열기"를 선택하거나 창에 파일을 끌어다 놓아 HTML 파일을 로드합니다.

즐겨 사용하는 메모장 형식의 텍스트 편집기에서 HTML과 CSS 파일을 모두 엽니다.

세 개의 창을 동시에 볼 수 있는 것이 가장 편리한 작업 방법입니다. 펼칠 수 있는 두 개의 화면이 없는 경우 아래 그림과 같이 창을 배치하는 것이 좋습니다.

HTML 및 CSS에 대한 초보자 가이드

브라우저 창을 화면의 한쪽에 "붙여" (수직으로) 절반을 차지하도록 하고 2개의 메모장 창을 다른 쪽 아래에 하나씩 배치합니다.

구성 요소

HTML 파일로 메모장에 무언가를 쓰고 변경 사항을 저장하십시오. 그런 다음 F5 키를 눌러 브라우저 창을 새로 고칩니다. 작성한 텍스트가 브라우저 창에 나타나는 것을 즉시 볼 수 있습니다.

첫 번째 사이트를 설정하신 것을 축하합니다! 그리고 우리는 농담이 아닙니다. 인터넷의 첫 번째 사이트는 방금 만든 사이트와 모양이 크게 다르지 않았기 때문입니다. 당시 중요한 것은 콘텐츠 그 자체였습니다.

HTML을 사용하면 특정 "코드" 세트를 사용하여 "각 콘텐츠가 무엇인지 표시"할 수 있습니다. 가장 중요한 것은 다음과 같습니다.

html :html 문서를 나타냅니다. 각 html 파일의 시작 부분에 있어야 합니다.
body :브라우저에서 보는 모든 콘텐츠는 이 body으로 묶여 있습니다. 꼬리표. HTML 문서의 시각적 측면을 나타냅니다.
p :텍스트 단락
img :이미지
a href :웹 주소 링크
div :콘텐츠 주위에 "상자"를 설정한 다음 CSS로 "스타일"을 지정할 수 있습니다.

콘텐츠를 "정의"하려면 일반적으로 시작과 끝에서 약간의 구분이 있는 동일한 코드로 묶어야 합니다. 예를 들어, 텍스트 단락은 다음과 같이 정의됩니다.

<p>Standard Text Paragraph</p>

"는 "다음에 단락이 있음"을 나타내고 "

"는 "단락이 여기서 끝남"을 나타냅니다. 두 경우 모두 "p"를 "div"로 바꾸면 "단락으로 표시"하지 않고 콘텐츠를 둘러싸는 상자를 정의할 수 있습니다.

예외가 있습니다. 이미지(img) 및 구분선(hr)과 같은 요소에는 "닫는 코드"가 필요하지 않습니다.

HTML 및 CSS에 대한 초보자 가이드

변경 및 새로고침

HTML 파일의 모든 항목을 다음으로 바꿉니다.

<html>
<body>
<div id="header">HEADER</div>
<div id="content">CONTENT</div>
<div id="footer">FOOTER</div>
</body>
</html>

브라우저를 새로고침(F5)하면 HEADER, CONTENT 및 FOOTER라는 단어가 아래에 하나씩 표시됩니다. 우리는 세 개의 보이지 않는 자율적인 "div" 상자를 만들었습니다. 그들 각각은 단어 중 하나를 포함합니다.

CSS를 통해 모양을 정의할 수 있도록 헤더, 콘텐츠 및 바닥글 콘텐츠에 해당하는 "ID"(코드의 "id=name")라는 키워드를 각각에 할당했습니다. 웹 페이지의 모든 요소는 "클래스" 또는 "id"로 설정된 별칭을 가질 수 있습니다. 클래스는 단락, 링크 등과 같이 동일한 웹페이지에 여러 번 나타나는 항목의 별칭을 정의합니다. ID는 사이트 이름이나 로고와 같이 각 페이지에 한 번만 나타나는 요소의 별칭을 정의합니다.

HTML 및 CSS에 대한 초보자 가이드

실제 콘텐츠

구조를 변경하지 않고 div 코드 사이에 있는 "HEADER"라는 단어를 삭제하고 대신 사이트에 사용할 이름을 입력하세요.

"CONTENT"에 대해서도 동일한 작업을 수행하되 텍스트를 입력하는 대신 이전에 본 것처럼 각 단락의 시작과 끝을 "표시"해야 합니다. "콘텐츠"를 두세 단락의 텍스트로 교체하십시오.

이제 링크에 대해서도 이야기할 때입니다. 텍스트의 문구를 링크로 변환하려면 다음과 같이 구성하십시오.

<a href="ADDRESS">TEXT</a>

이것을 복사하여 붙여넣고 "ADDRESS"를 "링크가 가리키는 대상"으로 바꾸고 "TEXT"를 사이트에 표시될 문구로 바꿀 수 있습니다. 바닥글의 문구를 다음과 함께 웹사이트에 연결했습니다.

<a href="https://www.maketecheasier.com">Make Tech Easier</a>

마지막으로, "FOOTER"라는 단어를 귀하의 이름으로 바꾸십시오. 누가 사이트를 설계하거나 소유했는지 나타내는 작은 문장 또는 기타 원하는 것이 있습니다.

변경 사항을 저장하고 브라우저를 새로고침하여 변경 사항을 확인하십시오.

HTML 및 CSS에 대한 초보자 가이드

스타일(.CSS)이 있습니다.

모든 웹 페이지의 첫 번째 요소는 헤드입니다. 여기에는 일반적으로 사이트의 ID, 사이트 이름, 작성자 및 언어와 여기에 사용된 HTML을 제외한 모든 기술을 정의하는 코드가 있습니다. 외부 JavaScript 및 CSS 파일에 대한 대부분의 링크가 있는 곳입니다. html 바로 뒤에 HTML 파일 맨 위에 다음을 삽입하여 사이트에 추가하십시오. 태그:

<head>
 
</head>

CSS로 웹페이지 요소의 스타일을 지정하려면 HTML 내부에서 CSS 파일을 로드해야 합니다. 그리고 이것은 그것을 "머리"에 포함시키는 것을 의미합니다. 다음은 HTML 페이지가 "text/css" 유형의 "스타일시트" 파일에 "링크"됨을 나타냅니다. "style.css"라는 이름:

<link rel="stylesheet" type="text/css" href="style.css">

머리 "안", 즉 "" 아래와 "" 위에 있는 것처럼 코드를 복사하여 붙여넣습니다. 변경 사항을 저장하고 CSS 파일에 주의를 기울이십시오. 거기에 다음을 입력하십시오:

body {}
#header, #content, #footer {}
#header, #footer {}
#header {}
#content {}
#footer {}
img {}

HTML 및 CSS에 대한 초보자 가이드

실제 사이트

CSS 또는 Cascading Style Sheets는 웹 페이지의 특정 요소에 해당하는 표시 규칙의 집합입니다. CSS를 사용하면 모든 것이 웹페이지에 표시되는 "위치"와 "방법"의 스타일을 지정할 수 있습니다.

이전 단계에서 우리는 페이지의 모든 요소에 대한 일련의 빈 규칙을 도입했습니다. 이제 모양을 정의할 매개변수를 추가하는 방법을 살펴보겠습니다.

웹사이트의 모든 것을 포함하는 본문으로 시작하십시오. 다음과 같이 수정합니다.

body {
width: 100%;
position: relative;
margin: 0;
padding: 0;
}

위의 규칙은 사이트가 브라우저 창의 전체 너비(너비:100%)를 차지하기를 원하고 브라우저 창의 가장자리(여백:0)에서 거리를 두지 않기를 원하며 주위에 빈 공간이 필요합니다(패딩:0).

요소에 대한 모든 규칙은 대괄호로 묶어야 하며 각 규칙은 ";"으로 끝나야 합니다. 다음과 같이:

#Element_ID {
RULE 1;
RULE 2;
RULE 3;
}

계속해서 "#header, #content, #footer" CSS를 다음으로 업데이트하세요.

#header, #content, #footer {
float: left;
position: relative;
}

이를 통해 세 가지 요소의 위치는 모두 몇 가지 공통 규칙을 따라야 한다고 말하는 것입니다. 각각은 이전 요소와 "상대적"이어야 하고 "따라야" 합니다(float: left ). 크기, 모양, 모양 또는 기타 요소에 관계없이 각각은 다음 요소를 "밀어내고" 절대 겹치지 않습니다.

웹페이지를 실제 사이트처럼 보이게 하려면 다음과 같이 #header, #footer를 업데이트하십시오.

#header, #footer {
width: 100%;
height: 100px;
background: rgba(0,0,0,0.9);
color: rgba(255,255,255,0.9);
text-align: center;
font-size: 12px;
}

위의 내용은 웹사이트의 머리글과 바닥글이 모두 너비 100%, 높이 100픽셀이 되도록 하고 표시되는 텍스트의 크기가 3em이고 중앙에 있도록 정의합니다.

배경 및 색상 규칙은 각각 전체 머리글 및 바닥글 "div 상자"의 색상과 그 안에 포함된 텍스트의 색상을 지정합니다. "RGBA"는 Red – Green – Blue 색상 혼합 표준에 따라 색상을 설정합니다. 각 색상은 0에서 255 사이의 값을 가질 수 있으며 다른 Red, Green 및 Blue 값의 조합으로 모든 색상을 표시할 수 있습니다. 마지막 숫자는 투명도에 해당합니다. 따라서 RGBA(255,0,0,0.5)는 반투명 빨간색을 제공하는 반면 RGBA(50,50,255,1)는 밝고 "단단한" 파란색을 제공합니다.

사이트의 기본 내용에 집중하여 마무리합니다. 다음과 같이 모양을 정의합니다.

#content {
width: 80%;
background: rgba(255,255,255,0.9);
color: rgba(0,0,0,0.9);
margin: 0 10%;
}

모든 변경 사항을 다시 저장하고 브라우저 창을 새로고침하여 변경 사항을 확인하십시오.

이미지 스타일링

HTML 및 CSS에 대한 초보자 가이드

사이트에 이미지를 추가하려면 HTML 파일로 돌아가야 합니다. 내용 "내부"에서 첫 번째 단락 앞에 다음을 입력합니다.

<img src="/PATH/FILE.JPG" alt="TEXT">

여기서 "PATH" 및 "FILE.JPG"는 온라인 또는 로컬에서 사용할 수 있는 모든 이미지의 "위치" 및 파일 이름이며 "TEXT"는 접근성을 위해 이미지가 나타내는 내용에 대한 설명입니다.

HTML 및 CSS에 대한 초보자 가이드

이 추가 후 변경 사항을 저장하고 확인하려고 하면 사이트가 변형된 것을 알 수 있습니다. 웹사이트에 이미지가 표시되는 방식에 대한 CSS 규칙을 생성하면 문제가 해결됩니다.

CSS 파일로 돌아가서 다른 요소(float:left 및 position:relative)의 흐름에 따라 모든 이미지(img)를 왼쪽 정렬하는 방법을 선언합니다.

HTML 및 CSS에 대한 초보자 가이드

페이지 경계를 초과하지 않도록 너비를 페이지 자체의 최대값(너비:100%)으로 지정할 방법을 지정합니다. 이미지가 텍스트에 닿지 않도록 하려면 상단과 하단에 약간의 수직 여백을 추가하십시오. 결과는 다음과 같아야 합니다.

img {
float: left;
position: relative;
width: 100%;
margin: 5px 0;
padding: 0;
}

HTML 및 CSS에 대한 초보자 가이드

이번에는 왼쪽 또는 오른쪽에 정렬된 다른 이미지를 추가하여 완료합니다. 이전과 마찬가지로 먼저 HTML 코드로 돌아가서 앞서 본 것처럼 이미지에 대한 링크를 붙여넣어야 합니다. 차이점은 요소에 식별자인 "클래스"를 추가해야 한다는 것입니다. 그런 다음 CSS 표시 규칙을 통해 동일한 클래스가 "첨부된" 다른 요소 및 요소를 지정합니다.

객체가 연결된 위치에 있는 모든 객체가 페이지 오른쪽에 표시되기를 원하기 때문에 클래스 이름을 "alignright"로 지정했습니다.

코드를 직접 만들어 보십시오. .alignright {} 추가 "style.css"에 클래스를 만든 다음 스타일을 지정하는 규칙을 만듭니다. CSS 코드는 요소가 페이지의 오른쪽에 뜨고 너비가 46%(너비:46%)가 되도록 지정해야 합니다. 이미지가 텍스트에 닿는 것을 원하지 않으므로 이미지 주위에 2% 간격을 추가하고 1% 여백(다른 요소와의 거리)과 1% 패딩(일부 "요소 주변의 여분의 공백 공간)"으로 분할해야 합니다. ").

따라서 우리 규칙은 .alignright가 있는 모든 이미지가 첨부된 클래스는 페이지 너비의 46%, 각 면의 1% 여백, 각 면의 1% 패딩을 차지합니다. 모두 합하면 페이지 너비의 정확히 절반인 50%가 됩니다. 결과는 다음과 같아야 합니다.

img.alignright {
float: right;
width: 46%;
margin: 1%;
padding: 1%;
}

다음 페이지

첫 번째 웹페이지가 준비되었으며 완전히 작동합니다. HTML과 CSS에 대해 더 많이 배우면 콘텐츠를 더욱 풍부하게 만들고, 새로운 요소를 추가하고, 모양을 개선할 수 있습니다. 다음 단계로 HTML 파일을 복사하고 이름을 바꾸고 내용을 수정하고 각각의 새 페이지를 다른 페이지에 연결해 보십시오.

너무 어렵게 들리지 않습니까? 웹 개발에 오신 것을 환영합니다. 링크를 통해 다른 페이지를 복사, 수정 및 연결하면 첫 번째 완전한 "적절한" 다중 페이지 사이트를 만들 수 있습니다!