1. 개발환경 세팅 및 코드 구조 이해하기
이번 글에서는 개발환경 세팅 및 HTML/CSS/JS에 대한 구조를 알아보도록 할게요.
개발환경 세팅
코드 에디터로는 cursor를 쓸 것이기 때문에, 먼저 아래 링크를 통해 설치 해줍니다!
(생긴건 vscode랑 거의 동일합니다! 단, cursor는 에디터 안에서 AI 기능을 쓸 수 있어요.)
위 화면에서 가운데 Download for Windows를 눌러 설치해주세요!
코딩 시 유용한 에디터 확장 프로그램
설치가 다 되었다면, 좌측 상단에 4번째 아이콘을 눌러 검색 기능을 통해 확장 프로그램을 검색 후 설치해주세요.
Korean Language Pack for Visual Studio Code
해당 에디터는 기본적으로 영어이기 때문에, 영어를 한글로 바꿔줍니다.
Live Server
서버 세팅 필요없이 Live Server 라는 확장 프로그램 하나만 설치해두면, html 미리보기를 할 수 있습니다. 코드가 변경되면 수정 사항이 즉시 반영됩니다.
Auto Close Tag
태그를 입력하면 자동으로 닫는 태그를 생성해주는 좋은 친구입니다. 더 이상 닫는 태그까지 일일이 쓰지 않아도 돼요.
Auto Rename Tag
태그명이 변경되면 자동으로 닫는 태그명도 변경해줍니다.
Rainbow Brackets
기존에 쓰던 Bracket Pair Colorizer 확장 프로그램이 비표준화 되어서, 대신 Rainbow Brackets을 설치 해줍니다. 코드 구분이 쉽게 괄호를 무지개색으로 꾸며줍니다.
HTML Snippets
단축키 ! 또는 HTML:5 입력만으로 HTML의 기본구조를 만들어줍니다.
IntelliSense for CSS class names in HTML
작업 중인 디렉토리의 CSS 클래스들을 미리 로드해서 일일이 작성하지 않아도 자동완성으로 사용할 수 있게 해줍니다.
폴더 및 작업파일 만들기
개발 환경 세팅은 어느정도 끝난거 같으니, 이제 폴더와 작업파일들을 직접 만들어 보도록하죠!
우선, 작업하기 편한 곳에 폴더를 하나만들고 cursor 에디터를 실행합니다.
실행하면 위와 같은 아무것도 없는 화면이 나올텐데, 여기서 맨 위에 File > Open Folder를 클릭합니다. 아마 한글팩을 설치하셨다면, 파일 > 폴더 열기 이런식으로 나올꺼에요.
폴더 선택 창이 나오면, 본인이 만든 폴더를 선택하고 폴더 선택 버튼을 누르면 됩니다. 저는 바탕화면이 편해서 바탕화면에 퍼블리싱배우기_250609 라는 이름으로 폴더를 하나 생성했어요.
그리고, 위에 빨간박스 친 아이콘을 눌러 폴더를 생성합니다.
빨간 박스 왼쪽에 있는 아이콘은 파일 생성 아이콘이에요.
위 기능들을 통해 아래와 같이 폴더구조를 구성해주세요.
📦퍼블리싱배우기_250609
┣ 📂css
┃ ┗ 📜style.css
┣ 📂images
┣ 📂js
┃ ┗ 📜script.js
┗ 📜index.html
폴더 구조의 이해
📦퍼블리싱배우기_250609
┣ 📂css
┃ ┗ 📜style.css
┣ 📂images
┣ 📂js
┃ ┗ 📜script.js
┗ 📜index.html퍼블리싱 작업 시, 폴더 구조는 위와 같은 형태가 기본이에요.
여기서 규모가 더 커진다면 html 파일은 따로 html 폴더로 관리하고,
css나 js 폴더에는 카테고리 별로 하위 폴더를 하나 더 만들거나
css, js파일이 더 많아지겠죠!
폴더 구조 설명
폴더 구조는 크게 어려울 것 없어요. 이게 다에요!
- index.html: 우리가 메인으로 보게 될 페이지입니다.
- images: 아이콘이나 배경 이미지 같은 것들을 관리하는 폴더입니다.
- css > style.css: index.html에서 사용할 css 파일입니다.
- js > script.js: index.html에서 사용할 js 파일입니다.
코드 이해하기
폴더 구조는 대충 봤으니, 코드에 대해서도 이야기 해보도록 하겠습니다.
HTML
개발환경 세팅할 때, HTML Snippets 확장 프로그램을 설치했기 때문에 html 파일에서 ! (느낌표) 입력 후 엔터만 눌러도 자동으로 HTML 구조가 완성이 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="/css/style.css" type="text/css" />
<script src="/js/script.js"></script>
<title>Document</title>
</head>
<body></body>
</html>하지만 자동완성 코드 가지고는 조금 부족하고, HTML 코드를 위처럼 조금만 더 추가해볼게요.
문서 형식 선언
<!DOCTYPE html>이 문서의 형식과 버전을 나타냅니다. 현재는 HTML5 를 사용하고 있기 때문에, 위와 같이 최상단에 선언합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML4.01 버전에서는 위와같이 URL을 넣어서 표기했었는데, HTML5로 넘어오면서 표기 방식이 간소화 되었다고 해요. 현재는 위와같은 형식을 쓰는 곳은 정말 보기 드물고 2000년대에 만들어진 사이트들 중에서는 종종 보이는 방식이긴 합니다.
웹 페이지 언어 설정
<html lang="ko"></html>웹 페이지의 기본 언어를 설정합니다. en이면 영어, ko면 한국어, ja면 일본어로 설정됩니다. 이러한 형식을 HTML ISO (International Organization for Standardization) 라고 하는데, 자세한 나라별 코드들은 w3schools HTML Language Code Reference 를 참고하세요!
문서의 정보들을 기록 하는 <head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="/css/style.css" type="text/css" />
<script src="/js/script.js"></script>
<title>Document</title>
</head><head> 태그에는 여러 문서의 정보를 기록하는 태그들이 들어가게 됩니다. 하나씩 알아보도록 할게요.
<meta charset="UTF-8" />문자 인코딩 방식을 UTF-8로 지정합니다. 언어는 한국어말고도 영어, 중국어, 일본어 등 다양한 여러가지 언어들을 표현해야 하기 때문에 한글을 포함한 모든 언어들을 utf-8 형식으로 표현할 수 있습니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />인터넷 익스플로러 문서 모드 호환성에 관한 태그입니다. 이제 익스플로러는 더 이상 지원을 하지않기 때문에 사실 이 태그는 레거시 브라우저. 즉, 오래된 브라우저를 지원할 거 아니면 굳이 쓸 이유가 없습니다. 알아두기만 하세요!
참고: <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>는 무슨 역할을 하나요?
<meta name="viewport" content="width=device-width, initial-scale=1.0" />화면이 줄여졌을 때, 모바일 해상도까지 고려해야하는 상황이라면 필수로 넣어야 할 태그입니다.
width=device-width : 모바일 기기 화면 너비를 따르도록 페이지 너비를 설정합니다. initial-scale : 브라우저 처음 로드 시 초기 확대/축소 수준을 정합니다. 기본값은 1.0 입니다.
<meta
name="viewport"
content="width=device-width, initial-scale=1 maximum-scale=1, user-scalable=0"
/>또는 이렇게 쓸 수도 있는데, 다음과 같은 의미를 나타냅니다.
- maximum-scale: 최대한 확대할 수 있는 수치
- user-scalable: 사용자가 두 손가락을 스와이프하여 확대를 가능하게 할지 결정합니다. 0 또는 no로 설정 시, 모바일 환경에서 스와이프 제스처로 확대를 할 수 없게 되는데 이 부분은 접근성에 문제가 생길 수 있으므로 접근성에 민감한 프로젝트라면 1로 설정하는 것이 좋습니다!
<link rel="stylesheet" href="/css/style.css" type="text/css" />
<script src="/js/script.js"></script>css를 불러올 때는 <link>, js를 불러올 때는 <script> 태그를 사용합니다.
- link rel: 해당 파일이 어떤 파일인지 명시합니다. css일경우 stylesheet, 파비콘의 경우 icon으로 설정합니다.
- link type: 해당 파일의 미디어 타입을 설정합니다. css일경우 text/css, png의 이미지일경우 image/png 이런식으로 사용할 수 있고, href를 통해 파일 연결이 먼저 되어있어야 사용할 수 있습니다.
- link href: 이 부분에 불러오고 싶은 파일의 경로를 적어줍니다.
<title>Document</title>문서 제목을 정의합니다.
index.html 선택 후, 우측 하단에 Go Live를 클릭하여 실행해보세요.
실행 화면을 보면 위에 문서 제목이 위와같이 설정됩니다!
문서의 본문을 담당하는 <body>
body 태그는 HTML 본문에 해당되는 부분입니다. body 태그 안에 글자 아무거나 쓰면 내용이 그대로 반영됩니다.
위와 같이 작성 후 컨트롤 + s로 저장후 다시 화면을 확인해보세요.
위처럼 방금전에 작성한 텍스트가 그대로 보여지게 됩니다.
class와 id
HTML 작성 시, class 또는 id로 이게 어떤 역할을 하는 태그인지 정할 수 있습니다. 또한 정해놓은 class, id로 css, js에서 제어할 수 있게되죠.
<div class="box">이건 박스임</div>
<style>
.box {
width: 200px;
height: 200px;
color: white;
font-size: 16px;
background: red;
}
</style>예를 들면 이런식으로 말이죠! 추후에 css 선택자에 대해서도 다룰 것이기 때문에 대충 위와 같은 코드가 있다는 거만 알아두세요.
<!-- GOOD -->
<div class="box">
<div class="box"></div>
</div>
<!-- BAD -->
<div id="box">
<div id="box"></div>
</div>class와 id의 차이점은 다음과 같습니다.
- class는 중복으로 써도 되지만, id는 값이 고유해야 하기 때문에 중복 사용이 불가능합니다.
- CSS에서 class보다 id의 우선순위가 더 높습니다.
id값은 중복으로 쓰지도 못하고 CSS에서 우선순위 문제도 있기 때문에 협업해야 하는 프로젝트라면, id보다 class 위주로 쓰는 편이 좋습니다. (JS로 제어할게 아니라면요.)
CSS 우선순위는 CSS 글에서 더 자세하게 다루도록 할께요.
특히 id값의 중복은 나중에 웹 표준에서 다 걸러지기 때문에, 다 해놓고 수정하기 싫다면 처음부터 id를 최소한으로만 쓰거나 중복되지 않도록 해야합니다.
CSS
(이번 포스팅에서는 대략적으로만 알아두고, CSS에 대한 자세한 부분은 따로 글 작성할 예정입니다.)
@charset “UTF-8”
@charset "UTF-8";CSS 작성 시, 최상단에는 항상 위 구문을 넣어주어야 합니다. 그래야 웹 표준 검사에서 오류로 검출되지 않아요.
reset.css
/* reset */
html,
body,
div,
span,
object,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
a,
button,
abbr,
address,
img,
q,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
footer,
header,
section,
summary {
margin: 0;
padding: 0;
border: 0;
font: inherit;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
ol,
ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img {
border: none;
}
a {
text-decoration: none;
color: inherit;
}
address {
font-style: normal;
}
button {
display: inline-block;
border: none;
background-color: transparent;
cursor: pointer;
}
input,
button,
a,
select,
option {
font-family: inherit;
font-size: inherit;
}
input[type="checkbox"] {
border: none !important;
}
caption,
hr {
display: none;
}
pre {
word-break: break-all;
white-space: pre-line;
margin: 0;
}
li {
list-style: none;
}
/* common */
body,
html {
font-family:
"Noto Sans DemLight", "맑은 고딕", "Malgun Gothic", Dotum, sans-serif;
font-size: 13px;
color: #333;
letter-spacing: -0.045em !important;
}HTML태그는 브라우저 별로 정해진 스타일들이 있는데요. 기본 스타일이 예쁘지 않기 때문에 대부분은 프로젝트 세팅 시 먼저, 브라우저 스타일을 지우기 위한 코드를 작성합니다.
즉, 브라우저 기본 CSS를 초기화한다하여 reset.css라고 불러요.
요즘은 근데 또 프론트 개발 환경에서 tailwind css 같은 라이브러리로 스타일링을 하기 때문에 사실상 직접 작성할 일이 그렇게 많지는 않기도 합니다. 왜냐면, tailwind는 기본적으로 reset css가 되있기 때문이죠.
그래도 아예 작성 안할건 아니니까 공부용으로든 일단 알아두는게 좋습니다.
Javascript
const button = document.getElementById("colorBtn");
const text = document.getElementById("text");
button.addEventListener("click", () => {
text.style.color = "blue";
});자바스크립트의 경우는 특별한 구조는 없습니다. js 파일 하나 만들고, 파일안에 코드를 위처럼 적어나가면 돼요.
물론, 스크립트 연결 위치에 따라서 DOMContentLoaded나 onload와 같은 이벤트를 쓰긴 하지만 자바스크립트 연결을 head 안에서 했다면 상관 없습니다.
jQuery
$(function () {
//code
});자바스크립트 작성을 더 편하게 도와주는 jQuery 라이브러리를 사용한다면, $(function(){ }); 이라는 코드를 하나 추가해야 합니다.
이는 HTML이 모두 로드된 후에 안에 있는 코드를 실행 시킨다는 의미입니다.
다음 포스팅에서는 HTML 시멘틱 태그들에 대해 다루도록 하겠습니다.
읽어주셔서 감사합니다 😊