앞서 우리는
웹사이트 개발을 위한 최소지식을
간단히 살펴보았다.
“그래서 실제로 어떻게 만드는데여..?”
맞다. 아무리 개념을 알아도
직접 만들 줄 모르면 의미가 없다.
그럼 이제
HTML과 CSS,
그리고 자바스크립트(Javascript)의 역할을
직접 실습해보자.
스타벅스를 따라 만들며,
html css 자바스크립트 입문!
레쯔 기릿 😉
글의 내용
미션: 스타벅스 홈페이지 따라 만들기
HTML과 CSS, 그리고 자바스크립트(JS)를 활용하여
스타벅스 홈페이지를 간단히 따라 만드시오.
HTML, 문서 작성하기
JSFiddle 접속
“실습하려면 프로그램 깔아야 하는거 아닌가여..?”
아니다, 없어도 된다.
실습을 위해
설치 프로그램이 아닌,
온라인 개발 사이트를 활용하면 된다.
- JSFiddle: https://jsfiddle.net
물론, 사용할 줄 안다면
VSCode 등의 설치 방식 프로그램을 사용해도 좋다.
VSCode 설치 영상: https://youtu.be/vpPc8-2SdTo
HTML 기본 코드 작성
“JSFiddle 접속했는데, 이제 뭐 하죠?”
이어서 HTML을 작성하자.
HTML은
홈페이지 내용
즉, 컨텐츠 작성을 위한 언어다.
홈페이지에 넣을
글, 사진, 동영상 등의 내용은
HTML을 통해 작성된다.
HTML 탭에서doc 입력 후 tab을 누르면
HTML의 기본 코드가 완성된다.
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>홈페이지를
하나의 조각상이라 한다면,
HTML은 그 조각상의 뼈대라 하겠다.
머릿글 쓰기, h1 태그
“HTML 기본 코드 써도 아무고토 안보이는데여..?”
HTML의 기본 틀이 완성되었으니,
스타벅스 소개를 위한
머릿글을 작성하자.
<h1>스타벅스만의 특별한 혜택, 스타벅스 리워드</h1>
문단 작성하기, p 태그
“머릿글 말고 다른 글도 추가하고 싶은데여..?
이어서 머릿글을 설명하는
문단을 작성하자.
<p>
스타벅스 회원이세요?
로그인을 통해 나만의 리워드를 확인해보세요.
스타벅스 회원이 아니세요?
가입을 통해 리워드 혜택을 즐기세요.
</p>
버튼 추가하기, button 태그
“회원가입, 로그인 버튼은 어떻게 만드나여..?”
버튼은 다음과 같이 만들 수 있다.
<button>회원가입</button>
<button>로그인</button>사진 넣기, img 태그
“홈페이지에 이미지가 하나도 없으니 영 심심한데여..?”
사진은 img 태그로 넣으면 된다.
<img src="이미지_주소" alt="이미지_설명">여기서, alt 속성은
구글, 네이버와 같은 검색 엔진에서 사용되므로
되도록 작성하는 것이 좋다.
src 속성은
불러올 이미지의 url 정보를 입력하는 곳이다.
여기까지 완성된
HTML 코드는 다음과 같다.
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="https://image.istarbucks.co.kr/common/img/main/rewards-logo.png" alt="스타벅스 로고">
<h1>스타벅스만의 특별한 혜택, 스타벅스 리워드</h1>
<p>
스타벅스 회원이세요?
로그인을 통해 나만의 리워드를 확인해보세요.
스타벅스 회원이 아니세요?
가입을 통해 리워드 혜택을 즐기세요.
</p>
<button>회원가입</button>
<button>로그인</button>
</body>
</html>CSS, 문서 꾸미기
“HTML 문서가 좀 구린데, 이쁘게 꾸밀 수 없나여..?”
쌩얼에 화장을 하듯,
HTML 문서도
CSS로 꾸밀 수 있다.
CSS는
HTML문서의 배치와 디자인 등의
스타일링을 위한 언어다.
셀렉터의 기본 형식은 다음과 같다.
꾸며줄_대상 {
속성1: 값1;
속성2: 값2;
}배경색 바꾸기, background-color
“배경색을 스타벅스 스럽게 바꿀 수 없을까여..?”
배경색을 바꾸려면
먼저 대상을 지정해야 한다.
다음은
보여지는 전체 화면(body)의
배경색(background-color)를 녹색(green)으로 바꾼다.
body {
background-color: green;
}
그런데 아무리 봐도 색이 별로다.
좀 더 이쁜색(#1E3932)으로 바꾸자.
body {
background-color: #1E3932;
}여기서 #1E3932는
특정 색상을 16진수로 나타낸 것이다.
글자색 바꾸기, color
“배경색 때문에 글자가 잘 안보이는데여..”
배경색을 바꾸니
글자가 잘 안보인다.
글자를 흰색으로 바꿔주자.
body {
color: white;
}
글자 정렬, text-align
“글자를 가운데로 옮길 수 없나여..?”
있다.
글자 정렬(text-align)을
중앙(center)으로 하면 된다.
body {
text-align: center;
}
버튼 부풀리기, padding
“버튼이 좀 있어 보였으면 좋겠는데여..?”
버튼을 두툼하게,
버튼 속 글자와 경계선 사이를
8px 만큼 부풀려보자.
button {
padding: 8px;
}
부풀리는 정도를
위 아래로는 8px,
양 옆으로는 32px만큼
부풀리면 좀 더 보기 좋다.
button {
padding: 8px 32px;
}
글자 크기, font-size
“버튼 속 글자가 넘 작은데여..?”
버튼 속 글자 크기를 키우자.
button {
font-size: 16px;
}
추가로 버튼 색을 투명하게(transparent),
글자색도 흰색(white)으로 바꿨다.
button {
background-color: transparent;
color: white;
}
경계선, border
“버튼 경계선이 별론데, 이쁘게 할 수 없나여..?”
있다. 다음과 같이
경계선 두께를 2px,
타입은 직선(solid),
색상은 흰색(white)로 설정하자.
button {
border: 2px solid white;
}
경계선 모서리를 둥글게, border-radius
“경계선이 너무 뾰족한데, 둥글게 깎을 수 없나여..?”
경계선에
모서리 반지름(border-radius)을
주어 둥글게 할 수 있다.
button {
border-radius: 4px;
}
첫번째 버튼 꾸미기, :first-of-type
“첫번째 버튼만 다르게 꾸며주고 싶은데, 방법이 없을까여..?”
모든 버튼이 아닌,
첫번째 버튼만 선택하여 꾸밀 수도 있다.
다음은 그 예로,
button 중에서
가장 처음으로 찾아진 대상(:first-of-type)을 꾸민다.
button:first-of-type {
background-color: #00704A;
border: 2px solid #00704A;
}
여기까지 최종 CSS 코드는 다음과 같다.
body {
background-color: #1E3932;
color: white;
text-align: center;
}
button {
padding: 8px 32px;
font-size: 16px;
background-color: transparent;
color: white;
border: 2px solid white;
border-radius: 4px;
}
button:first-of-type {
background-color: #00704A;
border: 2px solid #00704A;
}자바스크립트, 동적 페이지 만들기(다크 모드 전환)
앞서 우리는
HTML로 문서의 내용을 채웠고,
CSS를 통해 문서의 디자인을 꾸몄다.
이제 자바스크립트를 통해,
문서를 조작해보자.
상황에 따라 변화 가능한
동적 페이지로!
체크박스 추가하기, input 태그
“체크박스는 어떻게 만드나여..? 체크 여부에 따라 모드를 변경하고 싶어여..!”
체크박스는 HTML로
다음과 같이 추가할 수 있다.
<input type="checkbox">
로그인 버튼 다음에
체크박스가 추가하였다.
특정 HTML 그룹 꾸미기, class 속성과 클래스 셀렉터
“HTML 태그에 특정 그룹을 부여할 수 있나여..? 다크 모드를 특정 그룹을 적용하고 싶어여..!”
HTML에서
특정 그룹은 class 라는 속성으로 관리된다.
다음은 dark-mode 그룹을
body 태그에 부여한 예이다.
body 태그는
HTML문서 중
화면에 보여지는 영역을 의미한다.
<body class="dark-mode">이렇게 이름이 붙여진
특정 클래스(dark-mode)는
CSS에서 다음과 같이 꾸밀 수 있다.
(클래스를 꾸밀땐 앞에 닷 연산자 . 가 필요)
.dark-mode {
background-color: black;
color: white;
}body 태그가
dark-mode 이므로,
그 결과는 다음과 같다.
자바스크립트로 특정 요소 가져오기, document.querySelector()
“체크박스 선택 여부를 알려면, 먼저 그 대상을 찾아야 할텐데..?”
자바스크립트는
웹 문서를 document 라는 별칭으로 관리한다.
document에는
HTML과 CSS 정보가 담겨있는데,
이를 통해 원하는 대상을 찾을 수 있다.
다음은 그 예로,document.querySelector()를 통해body 태그를 찾은 뒤
그 대상에게 바디라는 별칭 부여하는 코드이다.
const 바디 = document.querySelector("body");그럼 같은 원리로
체크박스도 가져와볼까?
문서에서 input 태그를 찾고,
그 대상에게 체크박스란 별칭을 부여하면 된다.
const 체크박스 = document.querySelector("input");체크박스 이벤트 감지 및 처리하기, addEventListener()
“체크박스 선택 여부는 어떻게 확인하나여..?”
감시자를 붙이면 된다.
자바스크립트는
별칭이 붙여진 특정 대상에게
감시자를 붙일 수 있다.
다음은addEventListener()를 사용하여
체크박스에 변화(change) 감시자를 붙이고,
감지가 된 경우, 특정_동작을 수행하게 코드이다.
체크박스.addEventListener("change", 특정_동작);클래스 속성 부여 및 해제하기, 함수 & classList.toggle()
“그럼 다크 모드는 어떻게 부여하져..?”
체크박스에서 변화가 감지될 경우특정_동작을 위한 코드,
다시 말해 함수(function)를 작성하면 된다.
다음은 그 예로,
변화감지가 되었을 때마다
앞서 찾은 바디에 dark-mode 클래스를
추가 또는 제거하는 코드이다.
function 특정_동작() {
바디.classList.toggle("dark-mode");
}다크모드 적용 화면
다크모드 해제 화면
여기까지,
자바스크립트 최종 코드는 다음과 같다.
const 바디 = document.querySelector("body");
const 체크박스 = document.querySelector("input");
function 특정_동작() {
바디.classList.toggle("dark-mode");
}
체크박스.addEventListener("change", 특정_동작);