갠홈을 위한 HTML 입문
야매독학으로도 홈페이지를 만들 수 있다
최근 html을 무료로 호스팅할 수 있는 귀여운 서비스 나루(naru.pub)가 런칭되어
갠홈, 그리고 html에 새로 관심이 생긴 분들이 많은 것 같아요.
홈페이지는 어떻게 만드는 것인지, 어디서부터 시작해야 하는지에 대해 헤매는 분들을 위해 소소하게 가이드를 작성해봅니다.
html로 작성한 문서를 호스팅하는 방법은 여러 가지가 있습니다. 꼭 나루를 이용하지 않으셔도 홈페이지를 만드는 것이 가능합니다.
이 글은 호스팅 자체가 아니라 호스팅을 위한 데이터 작성법을 공유하는 글이에요.
다만, 나루는 파일 업로드가 쉽고 호스팅이 간단한 편이기에 이쪽 방법은 글 후반부에 소개해두겠습니다.
쉽게 작성하려고 했으나, 궁금한 부분이 있다면 질문을 남겨주세요.
댓글 등은 잘 확인하지 않기에 트위터나 메일을 이용해주시면 감사하겠습니다.
twt: @NANAGOM_7 / mail: nana_gom@naver.com
목차
들어가기에 앞서
HTML과 CSS 그리고 JavaScript
HTML 문서를 만들어보기
3-2. 나는 그대의~ <div><a> <div><a>
3-3. 절대경로와 상대경로CSS로 꾸미기
4-2. 여백 만들기 - padding, margin
4-3. 요소의 위치 잡기 - position
4-4. 레이아웃 정돈 - flex와 gridJS로 기능 추가하기
5-2. JS예시나루를 이용한 간단한 호스팅
1. 들어가기에 앞서
먼저 저는 코딩을 배운 바 없고, 문법을 공부한 적도 없으며, 구글 서치로 헤딩하면서 써와서
용어가 정확하지 않고 / 코드가 효율적이지 않을 수 있음을 밝혀둡니다.
어디까지나 야매입니다.
또한 이 글은 개인 서버 없이, 입력한 데이터를 정직하게 출력하는 ‘정적 웹사이트’를 만들고 싶은 분들을 위한 가이드입니다.
여기에서 ‘정적 웹사이트’란, 서버와 소통하지 않는 웹사이트를 의미합니다.
예를 들어, 일반적인 블로그와 같은 ‘동적 웹사이트’는 관리자가 게시판에 새 글을 작성하면 그 글을 서버가 받아 저장하고 게시판 목록에 글을 출력합니다. 하지만 ‘정적 웹사이트’는 게시판의 글 내용을 관리자가 ‘직접‘ ’코드로 삽입하여‘ ’웹사이트 폴더에 올려두어야‘ 합니다.
따라서 새 글을 올리거나, 레이아웃을 수정하거나, 배너를 넣거나, 색을 바꾸거나… 아무튼 웹사이트의 어떤 부분이라도 수정하거나 새로 업로드하기 위해서는 무조건적으로 코드를 수정해야 합니다. 예쁜 레이아웃의 글쓰기 기능, 보기 쉬운 디자인 선택 기능, 스킨 삽입 같은 것은 불가능합니다.
때문에 사이트의 모든 빌드, 모든 코드를 직접 작성하는 RE:제로부터 시작하는 코딩이 됩니다. 글씨의 크기, 정렬, 게시판의 형태, 사진 사이즈, 버튼을 누르면 뭐가 나오는지, 링크는 어떻게 거는지 전부 직접 작성합니다. 시간이 어마무시하게 걸리고, 코드에 익숙하지 않으면 엄청나게 머리가 아픕니다. 이렇게까지 하고 싶지 않으시다면 역시 아보카도 에디션을 추천합니다. 남이 만들어 둔 스킨을 가져올 수 있다는 건 정말 좋은 기능입니다. 직접 코딩할 시간에 수정을 하면 훨씬 좋은 것들이 나올 거예요. (이게 더 쉬울 거고요.)
하지만… 그래도… 직접 만드는 것은 즐겁습니다.
비효율적인 것들을 하고 싶으니까 하시는 분들을 응원합니다.
2. HTML과 CSS 그리고 JavaScript
우리는 이 3개의 언어로 홈페이지를 만들어야 합니다. 따라서 저 이름들이 각각 무엇인지를 먼저 설명하겠습니다.
HTML(HyperText Markup Language)이란 웹사이트를 위한 기본적인 언어입니다. 사이트 안에 들어가는 콘텐츠를 작성하는 언어이기 때문입니다. 사이트의 뼈대가 된다고 할 수 있겠네요.
CSS(Cascading Style Sheet)는 우리가 집어넣은 콘텐츠에 ‘스타일’을 부여하는 언어입니다. 글씨 정렬, 색, 박스의 크기 등을 지정해주는 디자인 언어입니다.
그리고 JavaScript, 흔히 JS라고 부르는 언어는 기능을 위한 언어입니다. 콘텐츠가 작동하는 방식을 정의하는 ‘프로그래밍 언어’죠. 상호작용을 통해 움직이는 대부분의 기능들은 JS로 구현됩니다.
설명이 기네요. 정리하자면,
우리가 HTML로 ‘MENU’ 라고 쓰고 CSS로 그 글씨에 색을 입혔다면, JS는 ‘MENU’를 눌렀을 때 메뉴를 열어줍니다.
HTML과 CSS는 상당히 단순한 구조를 가지고 있습니다. 조금만 다뤄 보면 손에 익습니다.
하지만 JS는… 저는 잘 모릅니다. 사실상 오래된 티스토리와 코드펜에 의존해서 코드를 누덕누덕 기워 기능을 만들어내고 있습니다.
해서 HTML와 CSS의 기본 구조는 설명할 예정이지만(이해하지 않으면 빌드 자체가 어려워짐) JS는 주로 쓰는 코드를 예시로 설명하는 수준일 것 같습니다.
3. HTML 문서를 만들어보기
다시 말하지만, HTML은 사이트의 뼈대입니다.
꾸미지 않아도(CSS), 기능이 없어도(JS) 사이트는 만들어지겠지만, 내용(HTML)이 없으면 아무것도 안 되겠죠.
그래서 사이트를 만들 때 가장 먼저 만드는 것이 HTML 문서입니다. 이것을 만들어봅시다.
* 저는 Sublime Text라는 무료 프로그램을 이용하고 있습니다.
프로그램은 여러가지이니 취향껏 씁시다. 사실 메모장에다가 써도 잘 작동합니다.
HTML은 기본적으로 ‘태그’라는 덩어리를 이용하며,
머리(head)와 몸통(body)으로 이루어져 있습니다.
머리 태그에는 사이트의 정보, 즉 제목이나 폰트의 종류처럼 실질적인 내용이 아닌 것들을 넣고
몸통 태그에는 실제로 사이트에 띄우는 데이터를 넣습니다.
또, <>로 태그를 열고 </>로 태그를 닫습니다.
이게 무슨 말이냐… 예시 HTML 문서를 직접 살펴봅시다.
보시면, DOCTYPE로 html임을 선언해준 뒤, <html 어쩌구저쩌구>이라는 코드로 html을 엽니다.
그리고 코드 가장 하단에 보면 </html>이 써있는데, 이게 열린 html을 여기에서 닫겠다는 뜻입니다.
<html>은 HTML 파일 전체를 구성하는 태그이기 때문에, <head>나 <body>등의 태그는 전부 <html> 태그 안으로 들어가게 됩니다.
* <html>이 아니라 <html 블라블라>인건, <html>을 열 때 속성을 부여해주는 것입니다. 이후로도 태그의 시작 부분에 태그 이름 외의 다른 것들이 같이 들어있는 것을 자주 보게 될 거예요. 태그에 무언가를 부여해주는 부가 텍스트라고 생각해주세요.
태그를 열고 닫는 것은 중요합니다.
한 번 태그를 연 다음 닫지 않으면, 이 태그가 어디에서 끝나는지, 어디에 속하는지 알 수 없기 때문입니다.
단, <img> <br> <input>등 예외적으로 닫지 않아도 단일로 동작하는 태그가 있긴 합니다.
아무튼 이렇게 쓴 문서를 index.html로 저장하고, 한 번 웹사이트를 열어봅시다.
head에 쓴 사이트 제목은 탭 제목으로 표시되고, body에 쓴 사이트 내용은 웹사이트 안에 잘 표시되는 걸 알 수 있습니다.
사이트의 기본은 이것이 전부입니다. 이것으로 우리는 이미 1개의 페이지를 완성했고, 이 index.html을 호스팅하면 웹사이트로도 쓸 수 있습니다.
홈페이지는 결국 이 간단한 HTML의 연장선입니다. <body></body>안에 얼마나 많은 내용을 넣느냐가 다를 뿐이죠.
body 안에 이미지를 넣으면 화면에 이미지가 생기고, MENU를 넣으면 MENU가 생기고, 그런 것입니다.
생각보다 간단한 구조죠?🙂
3-2. 나는 그대의~ <div><a> <div><a>
하지만 사이트를 만들 때
그래서 소분류 태그들을 body 안에 넣게 됩니다.
밈으로 유명한 <div>와 <a>도 그러한 분류 안에 들어가는 태그의 일종입니다.
태그들은 크게 블록 요소(Block element)와 인라인 요소(Inline element)로 나뉩니다.
<div>는 블록, <a>는 인라인입니다. 정말 좋은 밈이네요.
이름에서도 알 수 있듯, 블록 요소는 직사각형 블록의 형태로 만들어집니다. 가로와 세로 너비를 지정할 수 있고, 여백을 주는 등 레이아웃을 지정하는 게 가능합니다. 각각이 블록처럼 쌓이므로, 이걸 삽입하면 기본적으로는 줄바꿈이 됩니다.
<div>, <p>,<table>, <video>같은 태그들이 블록 요소에 속합니다.
인라인 요소는 말그대로 라인 안에 들어가는 요소입니다. 너비는 기본적으로 안에 든 콘텐츠의 길이로 정해지므로, 가로와 세로 값을 지정할 수 없습니다. 대신 텍스트를 줄글로 길게 적었을 때 행간 정도는 지정이 가능합니다. 한개의 줄 안에서 왼쪽에서 오른쪽으로 쌓입니다.
<span>, <a>,<img>,<button>같은 태그들이 인라인 요소에 속합니다.
그림으로 살펴봅시다.
이렇게 됩니다.
코드로는
이런 식으로 구성됩니다. 위의 그림과 번갈아서 보면 대충 구조가 보일 거예요.
div와 span은 각각 블록과 인라인 요소의 대표 태그라고 할 수 있겠는데요.
아무 설정값을 가지지 않고 단순히 블록 값과 인라인 값만 갖고 있기 때문입니다.
기능을 부여하지 않고 그냥 ‘요소를 넣고만 싶을 때‘ div와 span을 이용합니다.
html을 짤 때 그래서 가장 많이 이용하는 것이 div 태그입니다.
너비, 색, 스타일 등을 마음대로 부여할 수 있는 백지와도 같은 태그니까요.
반면, 설정값을 가지는 태그들은 어떨까요?
a는 링크 태그로,
이런 식으로 쓰이고, 기본적으로 클릭하면 이동하는 기능을 가지고 있습니다.
button은 버튼 태그로, <button>버튼</button> 이렇게 쓰면 기본적인 버튼 레이아웃인 테두리와 배경색 등이 자동 부여됩니다.
img는 <img src=“이미지 주소”>로 쓰면 이미지를 불러옵니다. (닫지 않는 대표적인 태그입니다.)
ul은 리스트를 생성해서 나열해주고요.
이런 태그들은 명확한 목표나 기능이 있을 때 쓰이게 됩니다.
html에는 다양한 태그들이 있고, 필요한 기능으로 검색하면 예시가 정말 잘 나오니까… 그때그때 검색해서 써봅시다!
지금 기억해둬야 하는 것은, 우리는 보통 블록 요소로 레이아웃을 나누고, 안에 또다른 블록이나 인라인 요소를 넣어 콘텐츠를 생성한다는 것 정도입니다.
3-3. 절대경로와 상대경로
html에 콘텐츠를 삽입할 때, 신경써야 하는 것이 있습니다.
이미지나 오디오 등의 코드가 아닌 콘텐츠를 html에 넣으려면 파일의 ‘주소’를 텍스트로 따와서 넣어야 하는데요.
여기에서 중요해지는 것이 그 주소의 경로입니다.
img 태그를 예시로 들어봅시다.
아까 img는 <img src=“”>로 쓴다고 했었죠.
여기서 src는 source의 줄임말입니다. 이미지를 넣을 건데, 이 이미지의 소스를 어디에서 가져올지 지정한다는 의미입니다.
그런데 이 src를 작성하는 데에는 2가지 방법이 있습니다.
뭐가 다른지 보이시나요?
하나는 img라는 폴더 안에 있는 image.png를 불러오는 ‘상대경로’로 쓰여 있고,
하나는 웹상에 업로드된 이미지 주소를 따온 ‘절대경로’로 쓰여 있습니다.
상대경로로 이미지를 삽입한다는 것은, 지금 index.html이 존재하는 폴더에 대한 상대적 위치로 파일을 찾아내는 방식니다.
index.html이 있는 폴더 안에 img라는 이름의 폴더가 또 있고, 그 안에 image.png가 존재한다고 쓴 것입니다.
“./image.png“ 라고만 쓴다면 index.html과 같은 폴더에 image.png가 있다는 뜻이 됩니다.
따라서 호스팅을 할 때, 이 image.png 파일을 적절한 위치에 함께 업로드해주어야만 정상적으로 불러와집니다.
반면 절대경로는 말 그대로 index.html이 어디에 있든간에 변하지 않는 경로입니다. 웹상에서 어떤 이미지를 우클릭하면 ‘이미지 주소 복사’가 뜰 겁니다. 이게 바로 그 이미지의 절대경로입니다. 웹사이트상에 업로드된 주소를 따오는 것이기 때문에, 우리가 image.png를 폴더에 갖고 있지 않아도 언제든 불러올 수 있습니다. imgur나 티스토리에 업로드해서 주소를 긁어오는 방식이 절대경로라고 할 수 있겠습니다.
개인 홈페이지 호스팅을 할 거라면, 절대경로를 쓰는 게 좋습니다. 상대경로를 쓸 경우 호스팅 서버에 그 이미지들을 전부 업로드해둬야 하고, 페이지를 로드할 때마다 서버에서 이미지를 불러오므로 트래픽도 잡아먹기 때문입니다. 하지만 절대경로를 긁어오는 것도 결국 어딘가에 이미지를 업로드해야 가져올 수 있는 것이기 때문에… 사이즈가 크지 않다면 이미지와 html을 함께 업로드하고 상대 경로를 쓰는 게 간단하긴 합니다.
이미지에만 이런 경로가 쓰이는 것은 아닙니다.
예를 들어 페이지 이동 링크를 넣는다고 했을 때,
위는 상대경로, 아래는 절대경로입니다.
상대경로는 이미지와 마찬가지로 nextpage.html이라는 이름의 파일이 index.html 파일과 같은 곳에 있어야 동작합니다.
하지만 네이버 주소는 늘 네이버 주소니까… 다른 파일이 필요하지 않겠죠.
자~ 그럼 여기까지 이해하셨으면 html의 기본 구조는 파악하셨다고 봐도 됩니다! 와와^_^
이제 콘텐츠를 넣고, css로 꾸며주는 파트로 넘어가봅시다.
4. CSS로 꾸미기
HTML만으로 작성한 콘텐츠는… 뭐랄까, 못생겼습니다.
뭔가를 넣긴 했는데 이미지는 왼쪽에 그냥 붙어있고, 텍스트들도 전부 뭉쳐 있습니다.
대충 이렇게 생겼죠. 웹사이트라고 하기에는 상당히 초라합니다.
사이트 제목은 사이즈를 좀 크게 하고 싶고, 이미지는 줄이고 싶고, 배경은 다른 색으로, 메뉴는 차례대로 나열하고 싶은데…
이런 것을 해주는 언어가 CSS입니다.
단순히 ‘예쁘게 하는 것’ 이상으로, 사이트의 시각적 구조와 가독성을 결정하기에 정말 중요합니다.
CSS는 HTML과 다른 언어이기에, 다른 방식으로 작성합니다.
기본 구조는 이렇습니다.
선택자 { 속성1:속성값; 속성2:속성값; }
예시를 봅시다.
box라는 이름을 가진 요소는 가로가 500 세로가 200이고, 배경색은 노란색이다.
box2라는 이름을 가진 요소는 가로가 200 세로가 100이고 배경색은 빨간색이다.
라는 뜻입니다.
여기에서 #box와 .box2 부분이 선택자, 즉 요소에 부여된 이름입니다.
그리고 중괄호를 열고 닫는 것으로 그 선택자의 속성을 정의합니다.
width, height는 속성입니다. 500px, 300px은 그 속성에 대한 값입니다.
앞에서부터 차근차근 설명해볼게요.
선택자 부분은 왜 그냥 box가 아니고 #box, 혹은 .box2일까요?
CSS는 단독으로 작동하는 게 아니라, HTML 안에 이미 존재하는 요소에 색이나 크기 등을 부여하는 스타일 언어라고 했었죠.
그래서 HTML 안의 요소를 CSS가 인식하도록 ‘선언’해주어야 적절하게 CSS가 적용됩니다.
그런데 이 선언에는 종류가 있습니다. ‘id’와 ‘class’입니다.
부여할 때는 이런 식으로 부여하고, css에서 불러올 때 id는 #을, class는 .을 붙여 표기합니다.
html에 id와 class를 부여하고 → css로 사이즈를 지정해주면 → html이 영향을 받아 사이즈가 변하는 것입니다.
css는 html 문서 내부에 작성할 수도, 다른 문서로 저장한 뒤 html에 불러와서 사용할 수도 있습니다만…
쉬운 이해를 위해 단일 html 내에 css를 함께 써서 보여드릴게요.
css를 html 내부에 직접 작성할 경우,
사이트 안에 직접 드러나는 데이터가 아니라 html을 꾸며주는 정보값이므로 head 안에 넣어 씁니다.
그리고 <style>태그로 가둬주시면 html 안에서도 css로 인식하게 됩니다.
이렇게 작성했다고 했을 때,
index.html을 켜보면 이렇게 됩니다.
아까 지정한 너비와 배경색이 잘 적용되어 있습니다.
이외에도 color로 글씨의 색을 지정할 수도 있고, border로 테두리를 넣거나, box-shadow로 그림자를 줄 수도 있습니다.
외관을 지정하는 것만도 다양한 속성이 있고, hover를 이용해 마우스를 올리면 바뀌게 하거나 animation 속성으로 움직이게도 할 수 있어 찾아보시면 정말 재밌답니다.
{속성:속성값을 작성한 뒤에는 꼭 ;를 넣어주셔야 다음 속성과 구분이 돼요.
그런데 id와 class는 이렇게 보면 둘 다 속성을 부여할 뿐 별 차이는 없는 것처럼 보입니다.
둘의 차이는 ‘중복 부여 여부’인데요.
예를 들어,
이렇게 하면 class box와 class outline이 둘 다 적용됩니다.
하지만
이렇게 작성한다면? id box와 id outline 전부 적용되지 않습니다. id는 한 요소에 1개만 부여할 수 있기 때문이에요.
그래서 사실 id는 속성 부여보다는 ‘이름’을 붙이는 행위에 더 가깝습니다.
보통 css로 꾸미는 용도일 때는 class를 많이 쓰고, ‘이름을 정의’하는 것이 중요한 js를 작업할 때 id요소를 많이 갖다 씁니다.
예를 들자면, 색을 빨간색으로 넣는 것 / 테두리를 주는 것 / 글씨를 기울이는 것으로 css를 나눠 놓았다고 치면 필요할 때 2개 혹은 3개를 불러와 적용시킬 수 있는 편이 코드를 짜기에 편하니까요.
이후의 css 가이드는 class로 선언한 것을 기본값으로 두고 예시가 작성될 예정이니 참고해 주세요.
참고로
이런 식으로 class와 id를 각각 적용하는 것도 가능합니다.
이외에도 id도 class도 아닌 속성에 css를 적용할 수 있는데요.
이런 것입니다. 앞에 온점도 해시태그도 없이 작성하는 경우 html 내에서 해당하는 모든 ‘태그‘에 해당 CSS가 적용됩니다.
html로 작성하는 경우 html 전체 폰트 사이즈가 15pt가 되고,
button으로 작성하는 경우 html 안에 있는 모든 <button></button>의 텍스트 꾸밈이 없어지는 식입니다.
<a>로 작성된 모든 링크 텍스트는 글씨 색이 파란색이 되겠죠.
.button 은 button 이라는 이름을 가진 class고,
button은 <button>태그를 단 모든 것을 의미하므로
각각 다른 선택자라고 할 수 있습니다.
앞에 점을 찍는 것을 잊지 맙시다.
이를 적절하게 이용하여 요소에 디자인을 부여하는 것이 CSS의 기본 골자입니다.
4-2. 여백 만들기 - padding, margin
CSS의 모든 속성을 이 글에서 소개하기는 어려우므로, 중요성이 높고 자주 쓰는 속성들 위주로 소개하려고 합니다.
padding, margin은 둘 다 여백을 주는 속성입니다.
padding은 요소의 안쪽에, margin은 요소의 바깥쪽에 적용된다는 것이 다른 점입니다.
빨간색 선을 박스의 크기라고 가정해봅시다. padding을 5px만큼 주면 사방 5px만큼 안쪽부터 텍스트가 쓰여지기 시작합니다.
margin을 10px만큼 주면, 안에 있는 텍스트에는 변화가 없지만 다른 박스와 붙었을 때 사방 10px만큼의 거리가 생깁니다.
이렇게 작성해봅시다.
아까의 class 예제와 다르게 글씨가 약간 안쪽으로 들어가있고, 박스 사이에 간격이 생겼습니다.
만약 위쪽과 아래쪽의 padding이나 margin값을 다르게 주고 싶다면 어떻게 해야 할까요?
padding: 30px 0px 0px 10px;
이런 식으로 사방의 마진값을 부여하면 됩니다. 차례대로 위, 오른쪽, 아래쪽, 왼쪽으로 시계방향으로 돌아가는 규칙을 갖고 있습니다.
위의 규칙대로 padding을 줬다면 위쪽 여백은 30px, 왼쪽 여백은 10px이 되므로
이렇게 위쪽 여백이 왼쪽 여백보다 넓은 형태가 됩니다.
또,
text-align 속성을 center로 줬을 경우 중앙정렬이 되는데요.
아까 padding을 위쪽과 왼쪽에만 부여했으므로, 왼쪽에서 5px만큼 떨어진 곳부터 시작해서 중앙으로 정렬됩니다.
그러므로 중앙 정렬을 하면서 padding 값을 주고 싶다면 왼쪽과 오른쪽에 같은 padding 값을 주는게 좋습니다!
4-3. 요소의 위치 잡기 - position
html의 인라인 요소는 왼쪽에서 오른쪽으로 추가되고, 블록 요소는 위에서 아래로 추가됩니다.
이렇게 규칙을 가진 요소들의 규칙을 깨고, 원하는 레이아웃을 만들기 위해 쓰는 css값이 몇 개 있습니다.
positon, flex, grid 같은 것들이 그 예시입니다. (이외에도 있지만, 제가 자주 쓰는 것을 소개하겠습니다.)
먼저 position에 대해 알아봅시다. 이렇게 작성합니다.
이것은 ‘이 box는 원래대로 쌓였을 때(static)을 기준으로 위에서 50px, 왼쪽에서 70px만큼 떨어진 곳에 위치한다‘를 의미합니다.
top, left, right, bottom을 통해 위치의 값을 지정할 수 있습니다.
예를 들어 이 박스가 원래는 왼쪽 위에 딱 붙어 있었다면, 거기에서 50px, 70px 이동하는 것입니다.
하지만 ‘원래 배치됐어야 할 곳 기준으로‘ 이동하는 것은 얼마나 이동하는지 짐작하기 어렵죠.
그래서 이 속성을 더 많이 씁니다.
absolute는 원래의 규칙을 무시하고, 자신의 부모 요소를 기준으로 배치됩니다.
이게 무슨 뜻이냐 하면, (현재는 box의 부모 요소를 따로 지정하지 않았으므로) box가 속해있는 body-즉 전체 화면을 기준으로 위에서 50px, 왼쪽에서 70px 떨어진 곳에 위치한다는 뜻입니다.
다른 요소가 어떻게 있든 상관없이 고정된 위치를 가집니다.
부모 요소란 1.현재 요소를 감싸는 상위 개체이고 2. position이 static(기본값)이 아닌 요소를 의미합니다.
box-cover에 position relative 값을 주고, box에 position absolute를 넣어서
html에 작성할 때 box-cover div 안에 box div를 넣으면 이 box는 box-cover를 부모 요소로 인식합니다.
즉, box-cover div를 기준으로 OO만큼 떨어진 곳에 위치하게 되는 것입니다.
이런 결과물이 나옵니다. 코드를 읽어보면서 비교해보세요.
position에는 fixed라는 값도 있는데요.
absolute와 동일하게 기존 규칙을 무시하고 배치되는데 다른 점이 하나 있습니다.
absolute는 스크롤을 내리면 스크롤과 함께 움직이지만, (페이지 기준으로 고정)
fixed는 스크롤에 관계없이 화면상 위치에 늘 떠있습니다. (화면 기준으로 고정)
스크롤을 내려도 늘 같은 자리에 보여야 하는 상단바와 같은 요소에 씁니다.
그리고 하나 더!
기본 배치는 요소가 차례대로 배치되기 때문에 겹치는 일이 없죠.
하지만 position을 쓰면 요소가 겹칠 수도 있습니다.
이때 어떤 요소가 위로 올라오고 아래로 올라올지 정해주는 것이 z-index 값입니다.
화면상의 z축, 즉 깊이를 정해주는 값입니다.
이런 식으로 작성하고, 높을수록 위에 있게 됩니다.
top/left/right/bottom과 z-index값은 position이 지정되지 않았을 경우 동작하지 않으니 주의하세요!
이건 positon relative, absolute, fixed와 z-index를 한 눈에 확인할 수 있도록 작성한 간단한 코드입니다.
다운로드 후 열어보면 대략 이런 화면이 나오는데요.
크롬 등으로 실제 구현된 창을 열어두고 / 서브라임 텍스트로 코드를 열어서, 실제로 값을 만져보면서 어떻게 움직이는지 확인해보세요.
+
추가로, position 등으로 요소를 배열할 때는 사실 px보다는 vh, vw와 같은 유동적 단위를 쓰는 게 좋습니다.
vh는 화면의 높이(height)를 기준으로 하는 %단위이고, vw는 화면의 너비(width)를 기준으로 하는 %단위입니다.
70vh라고 쓰면 전체 높이의 70%만큼을 지정한다는 뜻으로, 다른 컴퓨터나 패드에서 볼 때처럼 화면의 전체 사이즈가 달라지더라도 일정한 비율을 가지고 너비가 지정됩니다.
예를 들어 box의 가로폭을 20vw로 하고, 여백을 left:40vw(남는 80vw의 반)로 주었다면 박스가 정확히 화면 가운데에 위치하게 되겠죠.
4-4. 레이아웃 정돈 - flex와 grid
position 말고도 레이아웃을 정돈할 수 있는 다른 코드가 있습니다. flex와 grid입니다.
하나하나 위치를 지정해줘야 하는 position과 다르게 flex와 grid는 규칙을 부여해서 규칙에 따라 배치되도록 합니다.
기본적인 규칙(왼쪽에서 오른쪽으로, 위에서 아래로) 이외의 다른 규칙을 부여하고 싶을 때 유용하죠.
flex는 부모 요소에 부여하고, 그 안의 자식 요소들이 그 규칙에 따라 쌓이게 되는데요.
부모 요소의 개념은 아까 position에서도 살짝 봤지요.
부모 box에 flex를 부여하면, 부모 box 자체가 영향을 받는 것이 아니라 그 안에 든 자식 box들이 규칙에 따라 배열되는 것입니다.
이렇게 작성했다고 해봅시다.
box를 배치하기 위해서는, box의 부모가 되는(box를 감싼) box-cover에 flex 속성을 주어야 합니다.
display:flex처럼 작성합니다.
justify-content는 가로에 대한 flex 속성값이고,
align-items는 세로에 대한 flex 속성값입니다.
flex로 지정하지 않으면 해당 속성값을 쓸 수 없습니다. position을 써야만 z-index가 동작하는 것처럼요.
이 코드를 해석하자면,
1. box-cover 내부의 요소들은 flex 규칙에 의해 배치됩니다.
2. 그 flex 규칙은 다음과 같습니다.
2-1. 가로 기준 중앙에 배치됩니다.
2-2. 세로 기준 중앙에 배치됩니다.
라는 의미입니다.
실제로 파일을 켜보면 이렇게 배치된 것을 볼 수 있습니다.
이런 속성값은 margin이나 padding 값으로 여백을 숫자로 지정하지 않더라도, 자동으로 중앙에 위치하게 해주는데요.
margin/padding 값으로 요소를 배치할 경우, 안의 요소가 늘어날 때마다 숫자를 수정해줘야 해서 비효율적입니다. 그래서 flex와 같은 기능을 이용해 규칙을 주는 것입니다.
그렇다면 이렇게 작성해봅시다.
새로 추가된 속성들이 있죠.
바로 flex-wrap입니다.
이건 기본 속성이 nowrap으로 되어있는데요. 안의 요소들이 부모 요소의 크기를 넘어가더라도 가로 한줄로 쭉 배치된다는 뜻입니다.
wrap으로 속성을 주면, 자동으로 줄바꿈을 해줍니다.
이렇게 말이죠. 4개째부터는 margin 값을 포함한 가로 너비가 부모 요소의 너비보다 커지므로, 줄바꿈을 해서 아래쪽으로 들어갑니다.
여기서 잠깐!
아까 1개만 있을 때는 align-items를 썼는데 지금은 align-content를 썼죠?
align-items는 아이템이 1줄만 있을 때, 즉 nowrap기준으로 배치하는 속성값이고
align-content는 여러 줄의 아이템을 하나로 묶어 부모 요소의 세로 기준으로 배치하는 속성값입니다.
wrap인지 nowrap인지에 따라 적절한 것을 쓰면 됩니다.
만약 2줄인데도 align-items를 썼다면…
이렇게! 줄 2개가 묶이는 것이 아니라 1줄과 1줄씩 따로 분리되어 중앙값이 지정됩니다.
이외에도 자동으로 요소를 늘이거나, 다른 요소와 맞추거나… 거꾸로 정렬하거나 하는 기능들이 있으므로 한번 css flex라고 검색해서 찾아보시는 걸 추천드립니다.
grid는 flex보다 복잡한 레이아웃을 배치할 때 유용합니다. 상하좌우로 쌓는 기능만 있는 flex와 다르게 grid는 말그대로 가상의 그리드를 그려서 그 규칙에 따라 배치합니다.
하지만 그만큼 속성이 많고… 설명할 게 굉장히 많기 때문에 제가 주로 쓰는 부분인 grid-template-areas만 보여드릴게요.
grid의 영역을 직접 지정해서, 그 규칙에 따라 요소를 배치하는 방법입니다.
코드는 이렇게 작성합니다.
여기에서,
grid-template-columns: 100px 60px 30px;
grid-template-rows: 50px 40px 40px;
grid-template-areas:
"a a a"
"b c c"
"b d e";
이 부분에 집중해봅시다.
해당 속성값을 해석하자면 다음과 같습니다.
grid-template-colums와 rows로 각 영역의 너비를 지정하고,
areas로 각 영역에 무엇이 들어가는지 지정해주는 것입니다.
box-cover 안에 들어가는 box 요소에 grid-area: OO; 와 같은 방식으로 값을 부여하면 됩니다.
해당 코드 파일을 열어서 실제로 배치된 것을 보면…
a a a
b c c
b d e
식으로 잘 정렬된 것을 볼 수 있습니다.
한 레이아웃 안에 요소들이 각자 다른 길이와 위치를 가지고 쌓이는 것을 구현할 때 아주 유용합니다.
말했듯 이렇게 직접 지정하는 것 외에도 정말 많은 기능을 가진 요소입니다.
더 자세한 것은 css grid를 검색해보세요.
개인적으로는
이분의 블로그가 가장 직관적이고 깔끔하게 grid를 설명해주셨다고 생각하고 있습니다… ^_^
5. JS로 기능 추가하기
자바스크립트… html의 꽃이자, 가장 어려운 파트입니다.
‘함수‘를 작성해서 ’기능‘을 구현하는 언어인데요.
제가 함수 명령어의 종류를 잘 알지 못하고, 문법에 대한 이해도 거의 없어서 이 파트에서는 설명해드릴 것이 많지 않습니다.
html이나 css처럼 기본 원리를 설명하기보다는, 제가 썼던 코드들의 원리를 해석해드리는 식으로 쓰게 될 것 같네요.
js도 css처럼 html 내부에 배치할 수 있고, 다른 문서에 작성 후 불러올 수도 있습니다.
이 글에서는 단일 html 내부에 배치해서 풀 html을 보여드릴게요.
css는 head 안에 <style>로 삽입한다면, js는 <script>라는 태그를 이용해 삽입합니다.
대신 이 <script>태그는 위치가 유동적입니다.
이미 배치된 요소에 기능을 추가하는 경우가 많기 때문에
보통은 body 안, 실제 콘텐츠보다 하단에 넣습니다만
만약 화면 내의 요소보다 먼저 기능이 작동해야 한다면 head 위쪽에 넣습니다.
html을 컴퓨터가 읽을 때 위에서부터 아래로 읽어내려가기 때문에 그렇습니다. 무엇이 먼저 인식되어야 할지에 따라 위치가 달라집니다.
또… js는 html이나 css처럼 간단한 구조를 가지지 않기 때문에 ‘라이브러리’라는 도구를 사용하는데요.
‘라이브러리’란 어떤 기능을 수행하기 위해 미리 작성된 코드 모음입니다. 우리가 모든 기능을 처음부터 구현하지 않고도, 라이브러리를 사용해 기능을 쉽게 불러올 수 있습니다. 즉 js용 단축키와 같은 것입니다.
jQuery라는 라이브러리가 정말 흔히 쓰이는 편입니다. html을 위한 라이브러리로, 이 친구 없이 js를 하기는 정말 어려운 일이에요.
라이브러리는 타인이 만들어놓은 코드 모음 같은 것이므로 html에 따로 불러와줘야 동작하는데요.
head 부분에
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
이렇게 넣어주시면 됩니다. 이렇게 라이브러리를 삽입하게 해주는 코드를 cdn이라고 합니다. 사이트에서 필요한 기능에 따라 제이쿼리 외의 다른 cdn을 추가해야 할 때도 있습니다. 웹폰트를 불러오거나, 아이콘 라이브러리를 불러오는 등 여러가지로 많이 쓰입니다.
각 라이브러리는 라이브러리 고유의 문법을 가지고 있습니다. 함수에 OO라고 쓰면 OO한 기능을 불러온다~ 식으로 구성된 문법인데요. 단축키를 쓰는 게 아니라 ‘단축어’를 쓴다고 이해하시면 될 것 같습니다. 라이브러리마다 다른 단축어가 있고, 그 단축어를 올바르게 작성해야 불러온 라이브러리가 잘 작동합니다.
실제 코드의 예시를 살펴보면서 이해해봅시다.
5-2. JS 예시
여기에 간단한 코드가 있습니다.
document가 ready, 즉 문서가 준비되었을때 → function, 즉 기능을 실행합니다. 그 기능은 다음과 같습니다.
button을 clikc하는 경우 기능을 실행합니다. 그 기능은 다음과 같습니다.
그 기능이란, ‘p’ 태그가 숨겨지는(hide) 것입니다.
실제 사이트에서는 이런 식으로 동작합니다.
click me라는 버튼을 클릭하면, 아래에 있는 <p> This is a paragraph </p>가 숨겨집니다.
여기에서 이 $부분이 제이쿼리의 단축어입니다. ready, click, hide등 직관적이고 짧은 코드로 코드를 단축해줍니다.
만약 여기에서 제이쿼리를 쓰지 않고 같은 기능을 작성한다면 이렇게 됩니다.
엄청 길어졌죠?
뜻은 이렇습니다.
addEventListener: DOMContentLoaded 즉 문서의 콘텐츠가 로드됐을때 이벤트를 실행합니다.
var로 ‘buttons’는 querySelectorAll(“button”) 모든 버튼 태그를 합쳐서 의미함을 정의합니다.
buttons.forEach(function(button)을 통해 모든 버튼에 클릭 이벤트를 부여합니다.
var로 또다시 ‘paragraphs‘는 모든 P태그를 합쳐서 의미함을 정의합니다.
forEach로 모든 P에 기능을 부여합니다.
그리고 버튼의 클릭 이벤트가 발생했을 때, paragraph라는 이름을 가진 요소의 display style은 none이 됩니다.
제이쿼리가 만능인 것은 아니기 때문에 이렇게 순수 js로만 작성해야 하는 경우도 종종 있으니 이쪽의 형식도 익숙해지는 것이 좋긴 합니다.
쓰이는 명령어가 상당히 많고 규칙도 복잡하므로, html처럼 직접 작성하기보다는 레퍼런스를 참고해서 따오거나 수정하는 경우가 많습니다.
다행히도!!
간단한 갠홈을 구성하는 데에 엄청나게 많은 js가 필요하지는 않습니다.
저도 뮤직 플레이어 / 메뉴 펼치기 정도에만 쓴 것 같아요. (방명록은 정적 웹이 아니고 서버 쓰는 거라 예외)
뮤직 플레이어는 상당히 빡셉니다만, 메뉴 펼치기<이건 코드만 긁어가면 쉽게 구현이 됩니다.
제가 썼던 코드를 예시로 첨부합니다. 천천히 읽어보면서 이해해봅시다. jQuery를 사용합니다.
해석하자면 다음과 같습니다.
$로 제이쿼리 단축어를 불러오기 시작합니다. 문서가 준비됐을 때, 기능을 실행합니다.
let/var/const 등은 변수의 이름을 정의합니다. 우리는 메뉴를 열었다 닫기 위해 변수를 만들 건데요.
1. 어떤 클래스가 선택되었는지 파악하는 변수 (클래스에 맞는 메뉴를 열기 위해)
2. 메뉴가 펼쳐져있는지 접혀있는지 말해주는 변수 (접혀있으면 펴고, 펴져있으면 접기 위해)
먼저 이렇게 2개를 정의하도록 합니다.
이후에 3. clss는 class를 뜻하도록 하는 변수를 하나 더 추가하게 됩니다.
currentPart, isMenuVisible 등은 기능을 위해 임의로 붙인 이름이며, 그냥 a나 b로 교체해도 큰 상관은 없습니다. 함수를 읽을 때 이름에 정보값이 있는 편이 보기 편해서 붙이는 것입니다.
아무튼 currentPart는 현재 선택된 class를 추적하는 변수이고, 초기값은 ‘menu’입니다.
isMenuVisible은 메뉴가 보이는지 안보이는지 여부를 추적하는 변수이고, 초기값은 ‘false’입니다. (닫혀있다는 뜻입니다.)
$(".part-ui a").on("click", function() {
.part-ui라는 이름을 가진 class 안의 모든 <a>태그를 클릭했을 때 함수가 실행됩니다. 그 <a>의 class값을 ‘clss‘라는 변수에 저장합니다. (여기에서 변수가 하나 더 추가됩니다.)
만약(if) currentPart가 clss, 즉 클릭한 <a>태그의 클래스와 동일하고 isMenuVisible이 true라면 메뉴를 닫습니다.
그러니까 메뉴가 이미 열려 있고, 메뉴 버튼을 또 클릭한 거라면 닫아준다는 뜻입니다.
그리고 현재 isMenuVisible 상태를 false로 업데이트해줍니다. (닫혀있다고 표시)
하지만 그렇지 않다면(else), 즉 클릭한 <a>태그의 클래스가 메뉴의 클래스와 다르거나, isMenuVisible이 false라면
현재 클릭한 <a>에 맞는 class를 찾아 show해줍니다. $("#part-container-" + clss).show().find("li." + clss).show();
그리고 현재 isMenuVisible 상태를 true로 업데이트해줍니다. (열려있다고 표시)
…꼭 모든 부분을 이해하지는 않으셔도 괜찮습니다. 어떻게 해야 작동하는지만 알면 되니까요.
사실상 js는 대충 복붙하고, html에서 이름만 제대로 붙여줘도 코드는 잘 돌아갑니다.
실제로 코드가 어떻게 돌아가는지 보기 위해 풀html 예시를 봅시다.
part-ui에는 클릭해야 할 버튼을,
part-container에는 클릭하면 펼쳐지는 메뉴를 넣었습니다.
실제로 이 코드를 전부 긁어서 html로 저장하고 열어보시면 작동하는 것을 시험해볼 수 있어요.
html의 class, id를 올바르게 지정하는 것이 제일 중요합니다. js는 class와 id를 기반으로 요소를 불러오기 때문이죠.
(class, id가 html과 js에서 통일되어 있으면 어떤 이름으로 바꾸시든 별로 상관은 없습니다.)
이렇게 작성된 코드의 경우
<ul id =“#part-container-nanagom”>
<li class=“nanagom”>
과 같은 양식만 지켜지면, 메뉴의 개수가 늘어나더라도 하위 class에 따라서 버튼과 동일한 class의 메뉴만 열리게 됩니다.
위의 것은 기능 위주로 간략화한 코드이고,
실제 제 홈에 삽입된 버튼과 메뉴는
이런 식으로 다양한 css와 기능들이 추가되어 있습니다.
뼈대를 만들어 원리를 이해하고, 거기에 새로운 스타일을 더해나가는 식으로 발전시켜 가면 생각보다 어렵지 않아요!
아까의 코드와 제가 쓴 코드의 어떤 부분이 다른지 비교해보면서 코드를 이해하면 도움이 될 거예요.
저는 주로 키워드로 구글검색을 해서 남이 올려둔 js를 참고해 빌드하거나, codepen이라는 사이트에서 레퍼런스를 찾습니다.
codepen은 html/css/js와 실제 작동 예시까지 한 페이지에서 보여주는 좋은 사이트라서 쓰면 좋아요!!
js는 어렵고 짜증나지만… 읽고 읽고 또 읽다 보면 어느 순간 읽히게 되니 힘내서 도전해봅시다.
+
사실 뮤직 플레이어도 codepen에 가면 예쁜 예시가 많은 편이에요. 그걸 통째로 긁어오면 js를 안 건드리고도 플레이어를 만들 수 있겠지만… 쓸데없는 기능이 많거나 ui가 안 예쁘거나 해서 저는 수제작했습니다.
제가 만든 뮤직 플레이어는… 제 홈을 뜯으면 가져가실 수 있습니다.
하지만 아무래도 이걸 읽는 분들은 이것보단 구체적인 설명이 필요하겠죠!
뜯지 않고 가져가실 수 있는 실제 코드와 적용법을 하단에 유료로 걸어두겠습니다🥰
혹… 그냥 가져가실 수 있다고 하더라도, 수고비 개념으로 선물해주시면 기뻐합니다!
6. 나루를 이용한 간단한 호스팅
나루, 깃허브 페이지, 네트리파이 등의 정적 웹사이트 호스팅은 무료 서비스가 꽤 많습니다. 트래픽 용량도 넉넉한 편이고요.
앞에서 말했듯 서버와 데이터를 주고받지 않기에 서버 부담이 적은 편이기 때문입니다.
유료 도메인이 연결되는 경우도 많고 깃허브의 경우 Jekyll을 통해 테마를 따올 수도 있으니 참고해보세요.
나루가 호스팅이 굉장히 간단한 편이기 때문에, 이 글에서는 나루 호스팅을 소개하겠습니다.
나루에 가입하고 도메인을 만들면 이렇게 ‘파일’ 탭이 생깁니다.
여기에 index.html 이라는 이름의 html을 올려주시면? 호스팅 끝.
와!!
정말쉽다!!
index란 사이트 주소로 접속했을 때 가장 기본으로 띄우는 페이지의 디폴트 이름입니다. index가 아닌 이름을 넣으시면 주소에 접속해도 그 페이지가 뜨지 않으니 조심하세요.
여러 페이지를 가진 홈페이지라면, index 안에 <a></a>를 넣어 다른 html로 이동하도록 링크를 걸어주시면 됩니다.
서버에는 html외에 png와 같은 다른 파일들도 올릴 수 있는데요.
index와 같은 곳에 이미지를 넣어두면
<img src=“image.png”> 형식으로 로컬 폴더에 있는 것처럼 상대경로가 적용되므로 보다 편하게 링크를 걸 수 있습니다.
파일 안에 새 폴더를 만들고 그 안에 이미지를 모아둘 수도 있겠죠.
그러면 <img src=“./img/image.png> 이런 식으로 작성해주시면 됩니다.
로컬 컴퓨터에서 상대경로를 적용해 이미지를 로드하고 홈페이지를 빌드한 후, index.html만 올려두고 이미지를 올리지 않으면 당연하게도 서버에 업로드된 index.html은 이미지를 찾지 못하므로 꼭꼭 올려주셔야 합니다.
절대경로를 쓰면: 이런 걱정은 없겠지만요.
깃허브/네트리파이 호스팅도 이것보다는 살짝 절차가 복잡하지만 그래도 엄청 쉬운 편이라서 ~.~ 만약 더 많은 기능과 용량, 트래픽이 필요하시다면 고려해보세요.
여기까지! 기초 of 기초만 작성했는데도 많이 길어졌네요.
html 입문에 도움이 되었다면 기쁠 것 같습니다.
구글은 정말 많은 것을 알려주니 모르는 부분이나 구현하고 싶은 기능은 꼭꼭 검색해보세요. 생각보다 많은 게 가능하답니다.
모두가 자신의 귀여운 사이트를 만들 수 있기를 바라며 글을 맺습니다. 읽어주셔서 감사합니다.
이하로는 뮤직 플레이어의 함수를 첨부해둡니다.
- ..+ 47
- ..+ 24
댓글 1
전문적인 기니피그
비밀댓글이에요
추천 포스트
