HTML 및 CSS 초보자 가이드
오늘날 우리의 사이트를 구동하는 다양한 기술을 찾을 수 있지만, 전 세계 인터넷에서 가장 중요한 두 파일은 HTML과 CSS입니다. 복잡한 것이 필요하다면, 그에 맞는 더 많은 기술이 필요할 것입니다. 하지만 간단한 개인 웹페이지를 만들고 싶다면 HTML과 CSS만으로 충분합니다.
기본 소개
이것은 HTML과 CSS에 대한 초보자 가이드로, 가능한 한 빨리 간단한 사이트를 만드는 방법을 보여줍니다. 결과는 반드시 “표준 준수“가 아닐 수 있습니다. 추가로 조정하고 확장하고 싶다면 스스로 읽어야 할 것입니다. 하지만 그것은 사이트가 될 것이고 대부분의 브라우저에서 “작동해야” 합니다.
공간이 제한적이므로 웹 개발 및 디자인의 모든 측면을 깊이 파고들지는 않겠습니다. 대신, 우리는 제로에서 완전히 작동하는 웹페이지로 가는 단계를 안내하며, 그 과정에서 모든 것이 무엇을 하는지 설명할 것입니다.
두 개의 필수 파일
현대 사이트는 많은 파일로 구성되지만, 가장 필수적인 두 가지는 HTML 파일과 CSS 파일입니다. HTML 파일은 페이지의 요소와 구조를 정의합니다. CSS 파일은 이러한 요소의 모양을 정의합니다.
두 파일 모두 본질적으로 특정 구조화된 텍스트를 포함하는 일반 텍스트 파일입니다. 이를 생성하거나 수정하기 위해 특별한 프로그램이 필요하지 않습니다: “간단한” 텍스트 편집기면 충분합니다. “간단한”이란, LibreOffice의 편집기나 Microsoft Word와 같은 텍스트를 “풍부하게” 만들 수 있는 것이 아닌, 일반적인 메모장 스타일의 응용 프로그램을 의미합니다.
첫 번째 단계는 바탕 화면에 두 개의 빈 텍스트 파일이 있는 새 폴더를 만드는 것입니다. 하나의 파일 이름은 “index.html”로, 두 번째는 “style.css”로 지정합니다.
작업 공간 설정
가장 좋아하는 브라우저를 실행하고 HTML 파일을 로드합니다. “파일 -> 열기”를 선택하거나 파일을 창으로 드래그 앤 드롭하여 열 수 있습니다.
가장 좋아하는 메모장 스타일의 텍스트 편집기에서 HTML 파일과 CSS 파일을 모두 엽니다.
세 개의 창을 동시에 볼 수 있는 것이 가장 편리한 작업 방법입니다. 두 개의 화면이 없다면, 아래 그림처럼 창을 배치하는 것을 추천합니다.
브라우저 창을 화면의 한쪽에 “고정”하여 세로로 절반을 차지하게 하고, 다른 쪽에는 두 개의 메모장 창을 하나 아래에 하나씩 배치합니다.
빌딩 블록
메모장에서 HTML 파일에 무언가를 작성하고 변경 사항을 저장합니다. 다음으로, F5를 눌러 브라우저 창을 새로 고칩니다. 작성한 텍스트가 브라우저 창에 즉시 나타나는 것을 볼 수 있습니다.
첫 번째 사이트를 설정한 것을 축하합니다! 우리는 농담이 아닙니다. 인터넷의 첫 번째 사이트는 당신이 방금 만든 것과 비슷한 외관을 가지고 있었습니다. 그 당시 중요한 것은 콘텐츠 자체였습니다.
HTML은 “각 콘텐츠 조각이 무엇인지 마크업”할 수 있게 해줍니다. 특정한 “코드” 집합을 사용합니다. 가장 중요한 것 중 일부는 다음과 같습니다:
html: HTML 문서를 나타냅니다. 각 HTML 파일의 시작 부분에 있어야 합니다.body: 브라우저에서 보는 모든 콘텐츠는 이 body 태그에 포함됩니다. HTML 문서의 시각적 측면을 나타냅니다.p: 텍스트 단락img: 이미지a href: 웹 주소에 대한 링크div: CSS로 “스타일”을 지정할 수 있는 콘텐츠 조각 주위에 “상자”를 설정합니다.
콘텐츠 조각을 “정의“하려면, 일반적으로 약간의 차별화가 있는 동일한 코드로 둘러싸여야 합니다. 예를 들어, 텍스트 단락은 다음과 같이 정의됩니다:
“
”는 “다음은 단락입니다”를 나타내고, “
”는 “단락이 여기서 끝납니다”를 나타냅니다. 두 경우 모두 “p”를 “div”로 바꾸면, 콘텐츠를 “단락으로 표시”하는 대신 콘텐츠를 둘러싼 상자를 정의합니다.
이미지(img) 및 구분선(hr)과 같은 요소는 “닫는 코드”가 필요하지 않다는 점에 유의하십시오.
변경 및 새로 고침
HTML 파일의 모든 내용을 다음으로 교체합니다:
CONTENT
FOOTER
브라우저를 새로 고침(F5)하면 HEADER, CONTENT 및 FOOTER라는 단어가 하나 아래에 하나씩 나타나는 것을 볼 수 있습니다. 우리는 방금 세 개의 보이지 않는 자율 “div” 상자를 만들었습니다. 각 상자는 하나의 단어를 포함하고 있습니다.
CSS를 통해 그들의 모양을 정의할 수 있도록, 우리는 각 상자에 키워드, 즉 “정체성”(코드의 “id=name”)을 할당했습니다. 이는 그들의 콘텐츠에 해당합니다: header, content 및 footer. 웹페이지의 모든 요소는 “클래스” 또는 “id”로 설정된 별칭을 가질 수 있습니다. 클래스는 같은 웹페이지에 여러 번 나타나는 항목(단락, 링크 등)에 대한 별칭을 정의합니다. ID는 각 페이지에 한 번만 나타나는 요소(사이트 이름 또는 로고 등)에 대한 별칭을 정의합니다.
실제 콘텐츠
div 코드 사이의 “HEADER”라는 단어를 삭제하고 – 구조를 변경하지 않고 – 대신 사이트의 이름을 입력합니다.
“CONTENT”에 대해서도 동일하게 하되, 단순히 텍스트를 입력하는 대신, 앞서 본 것처럼 각 단락의 시작과 끝을 “마크”하는 것을 잊지 마십시오. “CONTENT”를 두세 개의 단락 텍스트로 교체합니다.
이제 링크에 대해서도 이야기할 시간입니다. 텍스트의 어떤 구문을 링크로 변환하려면, 다음과 같이 구조화합니다:
이것을 복사하여 붙여넣고 “ADDRESS”를 “링크가 가리키는 것”으로, “TEXT”를 사이트에 표시될 구문으로 교체할 수 있습니다. 우리는 푸터의 구문을 다음과 같이 우리 웹사이트에 연결했습니다:
마지막으로, “FOOTER”라는 단어를 당신의 이름, 사이트를 디자인하거나 소유한 사람을 나타내는 작은 문장 또는 원하는 다른 것으로 교체합니다.
변경 사항을 저장하고 브라우저를 새로 고쳐서 그곳에 표시되는 것을 확인합니다.
스타일이 생겼습니다 (.CSS)
모든 웹 페이지의 첫 번째 요소는 head입니다. 여기에는 일반적으로 사이트의 정체성, 이름, 제작자 및 언어를 정의하는 코드와 HTML 외에 사용되는 모든 기술이 포함됩니다. 대부분의 외부 JavaScript 및 CSS 파일에 대한 링크가 여기에 있습니다. 다음을 HTML 파일의 가장 위에, html 태그 바로 뒤에 삽입하여 사이트에 추가합니다:
웹페이지의 요소를 CSS로 스타일링하려면 HTML 내부에서 CSS 파일을 로드해야 합니다. 이는 “head”에 포함해야 함을 의미합니다. 다음은 HTML 페이지가 “스타일시트” 파일, 즉 “text/css” 유형의 “style.css”에 “연결”될 것임을 나타냅니다:
우리의 코드를 복사하여 붙여넣고, “head” 내부, 즉 “
” 아래와 “” 위에 위치시킵니다. 변경 사항을 저장하고 CSS 파일로 주의를 돌립니다. 거기에서 다음을 입력합니다:
body {}
#header, #content,#footer{}
#header,#footer{}
#header{}
#content{}
#footer{}
img {}
실제 사이트
CSS, 즉 Cascading Style Sheets는 웹 페이지의 특정 요소에 해당하는 표시 규칙 세트입니다. CSS를 사용하면 웹페이지에서 모든 것이 “어디에” 그리고 “어떻게” 나타날지를 스타일링할 수 있습니다.
이전 단계에서는 페이지의 모든 요소에 대한 빈 규칙 세트를 도입했습니다. 이제 그들의 모양을 정의할 매개변수를 추가하는 방법을 살펴보겠습니다.
웹사이트의 모든 것을 포함하는 body부터 시작합니다. 다음과 같이 수정합니다:
body {
width:100%;
position:relative;
margin:0;
padding:0;
}
위의 규칙은 사이트가 브라우저 창의 전체 너비를 차지하도록 하고(width: 100%), 브라우저 창의 가장자리에서 어떤 거리도 원하지 않으며(margin: 0), 주변에 빈 공간이 없도록(padding: 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”는 빨강-초록-파랑 색상 혼합 표준에 따라 색상을 설정합니다. 각 색상은 0에서 255까지의 값을 가질 수 있으며, 서로 다른 빨강, 초록 및 파랑 값의 조합으로 모든 색상을 표시할 수 있습니다. 마지막 숫자는 투명도를 나타냅니다. 따라서 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:010%;
}
모든 변경 사항을 다시 저장하고 브라우저 창을 새로 고쳐서 확인합니다.
이미지 스타일링
사이트에 이미지를 추가하려면 HTML 파일로 돌아가야 합니다. 거기에서 콘텐츠 내부, 첫 번째 단락 이전에 다음을 입력합니다:
여기서 “PATH”와 “FILE.JPG”는 온라인 또는 로컬에서 사용할 수 있는 이미지의 “위치“와 파일 이름이며, “TEXT”는 접근성 목적을 위한 설명입니다.
이 추가 후 변경 사항을 저장하고 확인하면 사이트가 변형된 것을 알 수 있습니다. 이 문제는 웹사이트에서 이미지가 어떻게 표시되어야 하는지에 대한 CSS 규칙을 생성하면 해결됩니다.
CSS 파일로 돌아가서 모든 이미지(img)가 다른 요소의 흐름을 따르며 왼쪽 정렬되도록 선언합니다( float: left 및 position: relative).
페이지 경계를 초과하지 않도록, 이미지의 너비가 페이지 자체의 최대가 되도록 지정합니다(width: 100%). 텍스트와 이미지가 닿지 않도록 위아래에 수직 여백을 추가합니다. 결과는 다음과 같아야 합니다:
img {
float:left;
position:relative;
width:100%;
margin:5px0;
padding:0;
}
또 다른 이미지를 추가하여 이번에는 왼쪽 또는 오른쪽에 정렬합니다. 이전과 마찬가지로, 먼저 HTML 코드로 돌아가서 이미지를 링크를 붙여넣습니다. 차이점은 “class”를 추가하여 요소에 식별자를 부여해야 한다는 것입니다. 그런 다음 CSS 표시 규칙을 통해 해당 클래스가 부착된 다른 요소에 대해 스타일을 지정합니다.
우리는 클래스 이름을 “alignright”로 지정했습니다. 왜냐하면 우리가 부착된 모든 객체가 페이지의 오른쪽에 표시되기를 원하기 때문입니다.
코드를 직접 작성해 보십시오. “style.css”에 .alignright {} 클래스를 추가하고, 스타일링할 규칙을 생성합니다. CSS 코드는 요소가 페이지의 오른쪽으로 떠 있도록 하고 너비를 46%로 설정해야 합니다(width: 46%). 이미지를 텍스트에 닿지 않게 하려면, 그 주위에 2%의 간격을 추가해야 합니다. 이는 1% 여백(다른 요소와의 거리)과 1% 패딩(요소 주위의 “여분의 빈 공간”)으로 나누어져야 합니다.
따라서 우리의 규칙은 .alignright 클래스가 부착된 모든 이미지가 페이지 너비의 46%를 차지하고, 각 측면에 1%의 여백과 1%의 패딩을 추가하도록 정의해야 합니다. 모두 합치면 50%가 되어 페이지 너비의 정확히 절반이 됩니다. 결과는 다음과 같아야 합니다:
img.alignright{
float:right;
width:46%;
margin:1%;
padding:1%;
}
다음 페이지
당신의 첫 번째 웹페이지가 준비되었고 완전히 작동합니다. HTML과 CSS에 대해 더 배우면 콘텐츠를 더욱 풍부하게 하고, 새로운 요소를 추가하며, 외관을 개선할 수 있습니다. 다음 단계로 HTML 파일을 복사하고 이름을 바꿔 내용을 수정하고 각 새 페이지를 서로 연결해 보십시오.
너무 어렵지 않게 들리죠? 웹 개발에 오신 것을 환영합니다: 서로 다른 페이지를 링크를 통해 복사하고 수정하고 연결함으로써 당신은 첫 번째 완전한 “적절한” 다중 페이지 사이트를 만들게 될 것입니다!
이미지 출처: Pluks kittens, Pluks kittens, IMG_20171124_142629
