코딩을 배워야 하는 이유(조금): HTML 및 CSS 소개
게시 됨: 2021-08-15이 온라인 상점을 시작하는 것이 더 쉽습 적이 없었는데. Shopify와 같은 플랫폼 덕분에 몇 시간 만에 테마를 구매하고 제품을 업로드하고 고객에게 판매할 수 있습니다! 진입장벽이 낮아 누구나 할 수 있다.
시작하기는 쉽지만 그 단순함을 당연하게 여기는 것만큼이나 쉽습니다. 결국, 당신은 당신의 상점에 무언가를 추가하거나 변경하기를 원할 것이고 당신의 테마가 그것을 지원하지 않는다는 것을 깨닫게 될 것입니다. 개발자는 저렴하지 않으며 마지막으로 하고 싶은 일은 스스로 할 수 있는 일에 대해 다른 사람에게 비용을 지불해야 하는 것입니다.
웹사이트 작동 방식에 대한 기본 사항을 배우기 위해 약간의 시간을 할애할 수 있고 앞으로 시간 과 비용을 절약할 수 있다고 말하면 어떨까요?
이 기사가 끝나면 HTML 및 CSS의 기본 사항을 알고 자신의 상점에서 땜질을 시작할 수 있을 만큼 충분히 알고 있어야 합니다.
그러니 잠시 시간을 내어 준비하고 시작해 봅시다!
HTML 및 CSS란 무엇입니까?
HTML은 Hypertext Markup Language의 약자입니다. 웹에서 가장 오래되고 중요한 기본 언어 중 하나입니다. 바로 이 페이지에서 콘텐츠를 구성하고 표시하는 역할을 합니다!
CSS는 Cascading Style Sheets의 약자입니다. HTML의 스타일과 서식을 제공하는 역할을 합니다.
함께, 이들은 모든 웹사이트의 필수 구성 요소입니다. 이 기사에서는 기본 사항을 안내하고 첫 번째 웹 페이지를 코딩하고 스타일을 지정하는 방법을 보여 드리겠습니다.
나는 Bill Murray의 열렬한 팬이기 때문에 (그렇지 않은) Bill을 위해 웹에 우리 자신의 신사를 만들 것입니다.
하지만 먼저 HTML과 CSS에 대해 더 깊이 파고들어 이들의 힘과 능력에 대한 전체적인 이해를 얻도록 합시다.
웹사이트의 구조
HTML과 CSS를 집의 구조적 부분과 비교하여 함께 작동하는 방식을 쉽게 이해할 수 있습니다.
모든 집의 벽 뒤에는 그 구조를 담당하는 프레임이 있습니다. HTML을 집 프레임과 같이 생각하십시오. 웹사이트의 구조를 담당합니다.
우리 집에 비유하자면 CSS는 페인트 색상, 식당 크기, 나무 바닥 색상, 식탁의 모양과 스타일 등을 담당합니다.
몇 가지 기본 HTML 마크업을 살펴보고 한 줄씩 살펴보겠습니다.
문서 유형
<!DOCTYPE html> 태그는 브라우저가 작업하려는 문서 유형이 HTML임을 알 수 있도록 도와줍니다.
머리
<head> 태그 내부에는 문서의 모든 메타데이터가 저장됩니다. 이 데이터에는 제목, 스타일(CSS), 설명 등이 포함됩니다. 이 데이터는 최종 사용자에게 표시되지 않지만 브라우저는 이를 사용하여 문서의 제목을 지정하거나 최종 사용자에게 문서를 표시할 때 사용해야 하는 스타일을 결정합니다.
광고
HTML 페이지 의 <head> 에 있는 다른 요소 에는 작성자 정보, 페이지 설명 또는 파비콘(브라우저 탭의 작은 아이콘)에 사용되는 이미지에 대한 링크가 포함될 수 있습니다.
몸
<body> 태그에는 웹사이트에 대한 모든 마크업(코드)이 포함됩니다. 이것은 최종 사용자가 당사 사이트를 볼 때 보게 되는 유일한 코드입니다.
웹사이트 구축에 필요한 도구
HTML 작성을 시작하려면 고급스럽고 값비싼 소프트웨어가 필요하다고 생각할 수 있지만 그렇지 않습니다. 사실, 당신은 이미 당신이 필요로 하는 것을 가지고 있습니다.
PC를 사용하는 경우 메모장 프로그램을 엽니다. Apple Mac을 사용하는 경우 TextEdit를 엽니다.
이제 텍스트 편집 프로그램을 열었으므로 위의 기본 HTML 마크업을 확장하는 동안 저를 따라오세요. 다음 코드를 복사(Windows의 경우 Ctrl + C / Mac의 경우 Cmd + C)하고 텍스트 편집기에 다음 코드를 붙여넣습니다(Windows의 경우 Ctrl + p / Mac의 경우 Cmd + P).
<!DOCTYPE HTML>
<html>
<머리>
<title>페이지 제목</title>
</head>
<본체>
<h1>안녕하세요!</h1>
<p>첫 번째 단락입니다.</p>
</바디>
</html>
이 파일을 바탕 화면에 저장하고 웹 브라우저에서 엽니다. 이제 코드가 브라우저에 의해 번역되거나 렌더링된 것을 볼 수 있으며 다음과 같아야 합니다.
제목 요소(<h1>)
<h1> 태그는 특정 텍스트에 주의와 정의를 주고 싶을 때 사용됩니다. 이 경우 "Hello World!"라는 텍스트가 필요합니다. 다음 텍스트보다 더 크고 눈에 띄게 표시됩니다.
기본적으로 HTML에는 h1, h2, h3, h4, h5 및 h6의 6가지 다른 제목 태그가 있습니다.
글꼴 크기는 "한 단계 아래로" 내릴 때마다 작아집니다. H1이 가장 크고 H6이 가장 작습니다. 기본적으로 페이지의 다른 요소와 구분하고 사용자에게 시각적 계층 구조를 제공하기 위해 약간의 여백(또는 주변 공간)이 있습니다.
잠시 시간을 내어 제목, 제목 및/또는 단락 태그를 변경해 보십시오. 변경한 후에는 저장하고 브라우저를 새로 고칩니다. 축하합니다. 처음으로 HTML을 수정했습니다!
지루해 보이죠?
페이지에 스타일 을 추가하고 CSS의 진정한 힘에 대해 자세히 알아보겠습니다.
이러한 HTML 요소에 고유한 스타일을 추가 하려면 문서 의 <head> 내부에 <style> 태그 를 추가해야 합니다 .
이 태그는 모든 CSS를 감쌉니다. <style> 태그 내부에 있는 내용을 브라우저의 스타일 가이드로 생각하십시오.
새 줄 의 <title> 태그 아래에 다음 과 같은 스타일 태그를 추가합니다.
<title>페이지 제목</title>
광고
<스타일>
</스타일>
스타일 태그 내부에는 모든 선언을 입력할 수 있습니다. CSS 선언은 속성 과 값으로 구성 됩니다.
<h1> 의 색상이 가장 중요하고 눈에 띄기를 원하기 때문에 나머지 텍스트와 다르게 합시다 . <style> 태그 사이에 다음을 추가하고 파일을 저장하고 브라우저를 다시 새로 고칩니다.
<스타일>
h1 { 색상: 파란색; }
</스타일>
이제 다음과 같은 모습을 볼 수 있기를 바랍니다! "Hello World!" 텍스트는 이제 파란색입니다. 간단하죠?
거기, 해냈어! CSS를 사용하여 HTML 요소의 스타일을 성공적으로 변경했습니다. 우리 아직 재미있어?
페이지에 이미지 추가
페이지에 포함할 수 있는 다른 요소가 많이 있지만 모든 웹사이트에서 가장 눈에 띄는 요소 중 하나는 전능한 이미지입니다. 다음을 포함하여 이미지를 쉽게 추가할 수 있습니다. 다음과 같이 태그를 지정합니다.
<img src= “https://www.fillmurray.com/400/500” >
참고: 데모를 위해 www.fillmurray.com이라는 이미지 자리 표시자 서비스를 사용하고 있습니다. 원하는 경우 로컬 컴퓨터의 이미지를 사용할 수 있습니다.
웹사이트에서 이미지를 가져오는 대체(프로 팁) 방법: 웹사이트에서 사용하려는 이미지를 찾아 마우스 오른쪽 버튼으로 클릭합니다. 이미지 주소 복사를 클릭하면 해당 이미지의 URL이 클립보드에 저장됩니다. 브라우저에 따라 문구가 약간 다를 수 있습니다. 저는 구글 크롬을 사용하고 있습니다. 핫링크를 남용하는 것은 권장하지 않지만 이 데모에서는 큰 문제가 아닙니다.
이 이미지 요소를 복사하여 붙여넣고 단락 태그 아래에 배치하여 전체 코드 블록이 내 것처럼 보이도록 합니다.
<!DOCTYPE HTML>
<html>
<머리>
<title> 페이지 제목 </title>
<스타일>
h1 { 색상 : 파란색;}
</스타일>
</head>
<본체>
<h1> 헬로월드! </h1>
<p> 이것은 우리의 첫 번째 단락입니다. </p>
<img src= “ https://www.fillmurray.com/400/500 ” alt=”Bill Murray의 이미지” >
</바디>
</html>
파일을 저장하고 브라우저를 다시 로드하면 다음과 같은 내용이 표시됩니다.
주의를 기울이고 있다면 <img> 태그에서 alt=”image of Bill Murray”라는 또 다른 속성을 발견했습니다 . 브라우저는 코드를 해독하고 나와 같은 렌더링된 출력을 볼 수 없기 때문에 표시되는 내용의 컨텍스트를 알 수 있는 방법이 필요합니다.
광고
이미지에 ALT 태그(대체 텍스트)를 추가하면 이미지의 주제가 무엇인지 브라우저에 알릴 수 있습니다.
이는 SEO(검색 엔진 최적화)에도 매우 중요하며 더 중요한 것은 이 텍스트가 스크린 리더를 사용하는 시각 장애인 사용자를 위해 소리 내어 읽혀진다는 것입니다.
하지만 링크는 어떻습니까?
링크를 포함하지 않고는 HTML/CSS에 대한 소개가 완료될 수 없습니다! 웹사이트를 구축할 때 외부 소스로 연결하든 웹사이트 내의 다른 내부 페이지로 연결하든 상관없이 링크할 수 있는 기능을 원할 것입니다.
앵커 요소에 대해 이야기합시다. 앵커 요소의 진정한 매력은 실제로 href 속성입니다. Bill의 Wikipedia 페이지에 대한 링크를 추가하여 앵커 태그의 구조를 보여줍시다.
<a href= “www.google.com” > Wikipedia 항목 읽기 </a>
이 코드는 사용자가 "Wikipedia 항목 읽기"라는 텍스트를 클릭하면 www.google.com으로 이동하도록 브라우저에 지시합니다.
머리글 요소 바로 아래에 이 코드를 추가하여 코드 블록이 다음과 같이 보이도록 합시다.
<!DOCTYPE HTML>
<html>
<머리>
<title> 페이지 제목 </title>
<스타일>
h1 { 색상 : 파란색;}
</스타일>
</head>
<본체>
<h1> 헬로월드! </h1>
<a href= “https://en.wikipedia.org/wiki/Bill_Murray” > Wikipedia 항목 읽기 </a>
<p> 이것은 우리의 첫 번째 단락입니다. </p>
<img src= “https://www.fillmurray.com/400/500” alt= “빌 머레이의 이미지” >
</바디>
</html>
저장을 누르고 브라우저를 새로 고치면 내 것과 같기를 바랍니다.
결승선을 건너기
저는 Bill Murray에게 약간의 경의를 표하는 스타일을 지정했고 이것이 제 최종 결과입니다. 아래에서 추가된 스타일 중 일부를 살펴보겠습니다.
드럼롤 주세요...
이제 이것이 집에 쓸 내용이 아니라는 것을 알 수 있지만 이는 의도된 것입니다. 이것은 이 페이지가 어떻게 보이거나 스타일이 지정될 수 있는지에 관해서는 빙산의 일각에 불과합니다. 아래의 각 스타일링 방법이 무엇을 하는지 이해할 수 있도록 간단하게 유지하고 싶었습니다.
광고
여기까지 오기 위해 추가해야 했던 작은 CSS로 넘어가 보겠습니다.
바디 스타일링:
먼저 페이지 본문에 다음을 추가했습니다.
몸 {
배경색: #ee;
글꼴 패밀리: Helvetica, Arial, sans-serif;
텍스트 정렬: 가운데;
여백: 25px;
}
배경색
16진수 색상 값 #eee를 사용하여 페이지의 배경색을 매우 밝은 회색으로 설정했습니다. 여기에 대해 자세히 알아보고 MOZ에서 몇 가지 예를 볼 수 있습니다.
글꼴 패밀리
Times New Roman 브라우저에서 사용하는 기본 글꼴에서 글꼴을 변경하고 싶었습니다. 이를 위해 첫 번째 선택으로 Helvetica를 선택했으며(사용자가 해당 글꼴을 컴퓨터에 설치한 경우) Arial을 두 번째 선택으로(사용자에게 Helvetica가 없는 경우 기본적으로 Arial로 설정됨) 최종 백업으로 선택했습니다. , 기본 산세리프 글꼴입니다.
텍스트 정렬
내 페이지의 모든 텍스트를 가운데 정렬하도록 선택했습니다. 왼쪽 및 오른쪽과 같은 값에 대한 몇 가지 다른 옵션이 있지만, 저는 이것이 중앙에 가장 잘 보인다고 생각했습니다.
여유
문서 본문에 약간의 여백을 추가하여 약간의 호흡 공간을 제공했습니다.
이미지 스타일링:
마지막으로 Bill의 아름다운 얼굴에 스타일을 지정했습니다. 어, 이미지 요소를 의미합니다.
이미지 {
테두리: 10px 솔리드 #41bcd6;
상자 그림자: 2px 5px 5px #999;
패딩: 10px;
테두리 반경: 5px;
}
나는 별로 하지 않았지만 Bill의 사진에 페이지에 약간의 존재감을 주고 싶었습니다.
국경
이미지 주위에 10px 테두리를 추가했습니다. #41bcd6은 연한 파란색을 렌더링하는 또 다른 16진수 색상 값입니다(내 비밀 잠정적인 Steve Zissou 색상 테마의 일부).
상자 그림자
이미지에 입체감을 주고 싶어서 밝은 그림자를 넣었습니다. box-shadow 속성은 그림자의 길이, 흐림 및 색상을 나타내는 픽셀 및 색상 값을 허용합니다. box-shadow 선언에 대해 더 배우기 위해 Moz는 여기에서 잘 분해합니다.
심
이미지를 액자처럼 보이게 하기 위해 이미지와 테두리 사이에 10px의 패딩을 추가했습니다.
경계 반경
CSS의 멋진 기능 중 하나를 설명하기 위해 border-radius를 사용하여 이미지의 모서리를 둥글게 만들었습니다. 내가 웹사이트를 만들기 시작했을 때 웹사이트와 같은 것은 없었고 웹에서 둥근 모서리를 만드는 것은 실제로 꽤 어려웠습니다. 그 이후로 우리는 먼 길을 왔고 지금은 오히려 간단합니다. px 또는 ems와 같은 값을 허용하며 여기에서는 값을 5px로 설정하여 알 수 있을 정도로 반올림하기로 했습니다.
결론
이 기사를 통해 우리는 웹사이트의 기본 구조를 배우기 위해 함께 작업했습니다. 우리는 또한 한 세대의 가장 위대한 배우 중 한 명에게 궁극적으로 아주 놀라운 작은 한 페이지 찬사로 바뀌는 몇 가지 간단한 HTML과 CSS를 배웠습니다.
하지만 진지하게, 나는 당신이 나와 함께 따라하고 첫 번째 기본 웹 사이트를 구축할 수 있기를 바랍니다. 이제 Bill Murray가 가장 좋아하는 배우가 아닌 경우 이 코드를 편집하여 좋아하는 배우, 밴드 또는 원하는 모든 것을 선보일 수 있습니다.
언제든지 이 코드를 참조해야 하는 경우 돌아와서 이 기사를 읽거나 편의상 여기 CodePen에 올려 놓았습니다.
HTML + CSS 만으로 할 수 있는 재미있는 일들이 너무 많습니다. 학습을 확장할 수 있는 몇 가지 유용한 리소스는 다음과 같습니다.
광고
- 코드 아카데미: HTML/CSS 과정 100% 무료 소개
- CSS Zen Garden: 웹에서 실제로 "클릭"한 첫 번째 예는 모두 동일한 HTML 마크업을 사용하는 100개의 다른 모양의 웹사이트를 가질 수 있다는 사실을 깨닫는 데 도움이 됩니다.
- CSS 애니메이션
- CSS만을 사용한 모나리자
- CSS만 사용하는 애니메이션 허스키 강아지
- CodePen: CodePen은 HTML, CSS 및 JavaScript 코드를 라이브 테스트하고 보여주기 위한 온라인 도구입니다.
우리는 이 기사의 표면만을 심각하게 긁었을 뿐이므로 더 많이 읽고, 온라인 과정을 수강하고, 지식을 계속 발전시키길 권합니다!
