HTML, CSS, JS(JavaScript)를 분리하는 것은 웹 개발에서 중요한 개념인 "관심사의 분리(Separation of Concerns)"를 따르기 위함이다. 이 원칙에 따라 HTML은 웹 페이지의 구조를, CSS는 스타일을, JavaScript는 기능을 담당하게 된다.
이렇게 하는 이유는 아래와 같다:
1. 가독성: 각 기능별로 코드가 분리되어 있으면 코드를 읽고 이해하는 데 용이하다.
2. 재사용성: CSS 스타일시트나 JavaScript 파일을 여러 HTML 문서에서 재사용할 수 있다.
3. 유지보수: 한 곳에서 문제가 발생하면 해당 부분만 찾아 수정하면 되므로 유지보수가 쉽다.
아래는 HTML, CSS, JS를 분리한 버전의 코드이다:
1. HTML(lotto.html)
<!DOCTYPE html>
<html>
<head>
<title>로또 번호 추첨기</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button onclick="lottoNum()">로또 번호 생성!</button>
<div id="result"></div>
<script src="random.js"></script>
</body>
</html><link rel="stylesheet" href="style.css">는 HTML 문서에서 외부 CSS 파일을 연결하는 태그이다.
rel 속성은 해당 문서와 연결되는 리소스의 관계를 정의합니다. 여기서는 "stylesheet"이므로, 이 링크가 스타일시트를 가리킨다는 것을 의미한다.
href 속성은 연결하려는 리소스의 경로를 가리킨다. 이 경우, "style.css"는 현재 HTML 파일과 같은 위치에 있는 CSS 파일의 이름이다.
따라서, 이 <link> 태그는 현재 HTML 문서에 "style.css"라는 외부 CSS 파일을 연결하는 역할을 한다. 이를 통해 HTML 문서는 "style.css"에 정의된 스타일 규칙을 적용할 수 있게 된다.
<script src="random.js"></script>도 마찬가지로 자바스크립트랑 html을 연결해 주는 코드이고
src 속성은 외부 스크립트 파일의 경로를 가리킨다. 이 경우, "random.js"는 현재 HTML 파일과 같은 위치에 있는 JavaScript 파일의 이름이라는 알려주는 것이다.
2. JavaScript(JS)
function lottoNum() {
var lottoNumbers = [];
while(lottoNumbers.length < 6){
var num = Math.floor(Math.random() * 45) + 1;
if(lottoNumbers.indexOf(num) === -1) lottoNumbers.push(num);
}
lottoNumbers.sort(function(a, b) {
return a - b;
});
document.getElementById('result').innerText = lottoNumbers.join(', ');
}이후 html을 실행시키면 저번 시간에 했던 것과 같이 결과가 나온다는 사실을 알 수 있다. 이제 CSS를 통해서 꾸며보도록 하자.
CSS (style.css):
#result {
font-size: 24px;
font-weight: bold;
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 18px;
}이 CSS 파일에는 두 부분이 있다.
#result 부분:
이 CSS는 HTML 요소 중 id가 "result"인 요소에 스타일을 적용한다.
font-size: 24px;는 "result" id를 가진 요소의 글자 크기를 24픽셀로 설정한다.
font-weight: bold;는 "result" id를 가진 요소의 글자 두께를 굵게 설정한다.
margin-top: 20px;는 "result" id를 가진 요소의 위쪽 여백을 20픽셀로 설정한다.
button 부분:
이 CSS는 HTML의 모든 <button> 요소에 스타일을 적용한다.
padding: 10px 20px;는 버튼의 내부 여백(패딩)을 상하로 10픽셀, 좌우로 20픽셀로 설정한다.
font-size: 18px;는 버튼 내의 글자 크기를 18픽셀로 설정한다.
여기서, result에는 #이 붙고, button에는 #이 붙지 않는 이유에 대해서 궁금증이 생길 것이다.
간략하게 설명하면, CSS에서 #은 ID 선택자를 의미하기 때문이다.
ID 선택자는 HTML 요소의 id 속성에 매치되는 스타일을 적용한다. 한 HTML 문서에서 id 값은 고유해야 하므로, #result는 id="result"를 가진 단일 요소에만 스타일을 적용한다.
반면에 button은 요소 선택자이다. 요소 선택자는 특정 HTML 요소 이름에 매치되는 스타일을 적용한다. 따라서 button은 문서 내의 모든 <button> 요소에 스타일을 적용한다.
따라서, 이 CSS 코드는 "result" id를 가진 요소와 모든 <button> 요소에 특정 스타일을 적용한다.
선택자에 대한 이야기는 곧 글을 작성해보도록 하겠다.
아무튼 CSS 파일을 완성한 후 다시 html을 실행하면
이렇게 디자인 요소가 잘 적용되었다는 걸 알 수 있다.
다음에는 직접 제작한 이 웹을 aws를 통해서 남들도 볼 수 있게 하는 방법을 알아보자.
'웹' 카테고리의 다른 글
| [웹] AWS(Amazon Web Services) 서버, 웹사이트 만들기! - 1 (0) | 2023.05.31 |
|---|---|
| [웹] AWS(Amazon Web Services) 서버, 웹사이트 만들기! - 2 (SSH) (0) | 2023.05.31 |
| [웹] 로또 번호 뽑아주는 사이트 만들기! - 1 (0) | 2023.05.29 |
| [웹] 웹 개발을 위한 HTML, CSS, JavaScript 기초 뽀개기! (0) | 2023.05.27 |
