HTML
웹의 뼈대를 잡아주는 구역을 나타내는 코드.
VS Code를 실행하여 html 파일을 만든 후 자동 항목의 `html:5` 클릭!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
html 뼈대를 아주 간편하게 제작할 수 있다.
기초 태그(Tags) 파악
<head> : 페이지의 속성 정보. 주소창과 현재 페이지의 제목을 담당하고, CSS와 각종 링크를 담는다.
<body> : 흔히 알고 있는 웹페이지를 구성하는 부분. 페이지의 내용을 담고 있어 뼈대를 잡는다.
<div>, <p>, <ul>, <li> : 구역, 문단, 목록, 항목을 나타낸다.
<hr> : 주제가 바뀔 경우 흔히 사용. 수평 가로선을 나타낸다.
그 밖에도 <audio>, <video>, table 등등 수많은 태그가 존재한다.
→ 모든 태그를 외우는 것이 아닌, 필요에 따라 적재적소에 찾아서 사용하는 게 포인트!
로그인 페이지 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>
위의 소스 코드를 실행해보면 다음과 같은 웹페이지가 출력된다.
주의할 점은 전부 외우려고 하지 말고 용도에 맞는 태그를 찾아서 사용하는 것!
✋ html만으로 필요한 기능은 전부 담았지만, 보다시피 너무 투박하다는 것을 알 수 있다.
그럼 어떻게 해야 페이지를 이쁘게 꾸밀 수 있을까?
CSS
HTML을 통해 작성된 뼈대를 예쁘게 꾸며주는 코드.
CSS는 <head> 태그 안에 <style>태그를 넣어 사용한다!
<head>
<style>
// 이 안에 CSS를 작성합니다.
</style>
</head>
그리고 CSS를 사용하기 위해서는 HTML의 구조를 파악할 필요가 있다.
예시와 같이 <div>태그로 구역을 나누고, <button>태그로 버튼을 생성했다고 생각해보자.
문제 : 빨간색 구역을 가운데로 옮긴다면 어떻게 될까?
정답 : 내용물인 초록색 구역과 파란색 구역도 모두 함께 이동한다!
문제 : 초록색 구역을 CSS로 꾸며주려면 어떻게 해야 할까?
정답 : <div class="green_div">과 같이 초록색 구역에 이름을 붙여주고 사용한다!
즉, html 태그는 `누가 누구 안에 있는가!` 를 파악하는 것이 핵심이다.
로그인 페이지 꾸미기
margin : 바깥 여백
padding : 안쪽 여백
아래과 같이 여백도 추가하고,
margin: 10px 10px 10px 10px // 위부터 시계방향으로 회전
padding: 10px 10px 10px 10px // 위, 오른쪽, 아래, 왼쪽 순서
margin: 10px // 상하좌우 전부 10px
padding: 20px 10px // 상하 20px, 좌우 10px
페이지 한가운데로 모으기 위해,
전체 div를 만들고, width를 정의한 후 margin: auto를 사용!
다음은 적절한 CSS 문법으로 보기 좋게 꾸며준다.
마지막으로...!
<Style> 영역 상단에 아래와 같이 폰트 링크를 걸어준다.
@import url("https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap");
그리고 적절한 폰트 사용을 위해 다음을 추가한다.
* {
font-family: "Bagel Fat One", system-ui;
font-weight: 400;
font-style: normal;
}
참고로 `*` 란, 와일드카드 혹은 범용선택자라고 불리며 모든 선택지에 대해 다음과 같은 설정을 적용하겠다는 의미다.
부트스트랩(Bootstrap)
프론트엔드 프레임워크로, 다른 사람이 만들어 놓은 HTML과 CSS, JavaScript를 사용할 수 있다.
사용하는 이유?
→ CSS를 다룰 줄 아는 것과 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기!
따라서 미리 이쁘게 완성된 CSS를 가져다 적절하게 변형하거나 사용하는 경우가 많다.
오늘은 HTML과 CSS를 이용하여 간단한 로그인 페이지를 만들어보는 시간을 가져보았다!!!