HTML 입문

장현웅·2023년 7월 21일

HTML을 처음 배워봤는데 기록해놔야 기억할 수 있는 것들을 적어보려한다.

브라우저가 인터넷 자료들을 읽을 수 있게 해주는 프로그램이라면 HTML은 Hypertext Markup Language로 인터넷 자료인 웹 문서를 만드는 컴퓨터의 언어로 웹의 뼈대를 잡아주는 구역을 나타내는 코드이다. HTML로 웹 페이지의 기본적인 내용과 의미를 담는다.

웹의 동작 개념은 두 가지

출처 : 스파르타코딩클럽

서버로부터 HTML을 받는 경우
서버에 준비되어 있는 자료를 받아서 가져오는 것
https//naver.com/의 경우 'naver.com'이라는 서버에 있는 '/'창구에 요청을 보내 HTML파일을 받아 브라우저가 그려주는 것이다. 그래서 새로고침(F5)를 하면 새로 요청한 HTML을 받아 원래 버전의 HTML이 그려지는 것이다.
데이터만 받아오는 경우 - JSON형식
공연 티켓 예매와 같이 데이터 베이스에 있는 데이터만 서버로 가져와서 가랑 끼워야할 때를 말한다.
JSON형식은 웹과 컴퓨터 프로그램에서 적은 데이터를 교환하기 위해 데이터 객체를 [Key 속성][Value 값]의 쌍 형태로 표현하는 형식이다. 이는 웹 브라우저와 웹 서버간의 비동기 통신 즉, 통신을 하는 양쪽 장치가 데이터를 주고 받을 때 일정한 속도를 유지하는 것이 아니라 약정된 신호에 기준하여 동기를 맞추는 통신 방법으로 타이밍을 생각하지 않고 데이터를 전송하는 방식의 통신을 할 경우와 웹 서버 간의 데이터 교환 등에 주로 사용된다.

EX) JSON형식

{
"name": "paul",
"age": 27,
"address": {
"Address": "11Ro Seoul Korea"},
"phone": [
{ "type": "home",
"number": "02-000-0000" },
{ "type": "cellphone",
"number": "010-0000-0000" },
],
"children": [],
"spouse": null
}

출처 : [네이버 지식백과] 제이슨 [JavaScript Object Notation] (IT용어사전, 한국정보통신기술협회)

API(Application Programming Interface)
운영체제와 응용프로그램 사이의 통신에 사용되는 언어나 메시지 형식으로 라이브러리에 접근하기 위한 규칙들을 정의한 것이다. 즉, 운영체제(OS)나 시스템, 애플리케이션(앱), 라이브러리 등을 활용하여 응용 프로그램을 작성할 수 있게 하는 다양한 인터페이스를 의미한다.
식당을 예로 들면 주방을 라이브러리, 메뉴판을 API, 직원이 이를 연결해주는 역할을 한다고 볼 수 있다.
서버가 클라이언트의 요청을 받으려면 문이 있어야 하는데 API는 은행 창구와 같이 그 창구에 접근하는 방식이 API이다.

웹의 동작 방식

출처 : https://blog.naver.com/jh_p0415/221360897942

URL(Uniform Resource Locator)
웹 문서의 각종 서비스를 제공하는 서버들에 있는 파일의 위치를 표시하는 표준으로 방대한 컴퓨터 네트워크에서 자신이 원하는 정보를 찾기 위해서는 해당 정보의 위치와 종류를 정확히 파악할 필요가 있는데, 이를 나타내는 일련의 규칙이다.
HTTP(HyperText Transfer Protocol)
웹 서버와 사용자의 인터넷 브라우저 사이에 문서를 전송하기 위해 사용되는 통신 규약이다.
DNS(Domain Name System)
네트워크에서 도메인이나 호스트 이름을 숫자로 된 IP 주소로 해석해주는 TCP/IP 네트워크 서비스이다.
IP(Internet Protocol)
인터넷에서 해당 컴퓨터의 주소. 인터넷에 연결되어 있는 각 컴퓨터의 숫자로 이루어진 고유 주소이다.
프로토콜
통신 시스템이 데이터를 교환하기 위해 사용하는 통신 규칙. 네트워크에 연결된 시스템이 통신하려면 정해진 규칙에 따라 데이터를 주고받아야 하는데, 이 일련의 규칙을 프로토콜이라 한다.
IP Protocol
인터넷 환경에서 네트워크 계층의 데이터 전송 프로토콜로 호스트 주소 표기 등의 기능을 지원한다.
TCP(Transmission Control Protocol)
IP Protocol 위에서 연결형 서비스를 지원하는 전송계층 프로토콜로 양방향 가상 회선을 제공하고 신뢰성 있는 데이터 전송을 보장한다.

EX) 네이버 홈페이지 접속

웹 브라우저는 입력 받은 URL로 네이버 웹 서버(naver.com)에 HTTP 요청을 보낸다.
요청을 받은 서버(naver.com)는 네이버 홈에 대한 HTML, CSS, JS, 이미지 등을 응답으로 보내준다.
브라우저는 이 응답을 파싱하고 화면에 변환하여 표시해준다.

파싱(Parsing)
컴퓨터에서 컴파일러 또는 번역기가 원시 부호를 기계어로 번역하는 과정의 한 단계로, 각 문장의 문법적인 구성 또는 구문을 분석하는 과정이다.

EX) 스즈메의 문단속 영화페이지

https://movie.daum.net/moviedb/main?movieId=161806

movie.daum.net -> 은행 지점
/moviedb/main -> 창구 이름
movieId=161806 -> 데이터

?를 기준으로 앞부분이 서버 주소, 뒷부분이 데이터

클라이언트가 서버에 요청하면, 서버가 클라이언트에게 HTML + CSS + Javascript를 준다. 역사적인 이유와 이미 만들어진 표준이 있어서 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML + CSS + Javascript를 주게 되어 있다.

브라우저가 웹 서버로 부터 받은 HTML문서를 파싱하여 화면에 표시하는 원리

처음 브라우저가 응답을 받으면, 브라우저가 가지고 있는 파서(Parser)를 이용해 HTML 문서를 브라우저가 이해할 수 있는 DOM 트리 형식으로 파싱한다.
CSS를 파싱하여 스타일 구조체의 형식으로 만든다. 이를 CSSOM이라고 한다.
DOM과 CSSOM을 실제 화면에 표시하기 위한 데이터 구조인 렌더링 트리로 변환한다.
해당 렌더링 트리를 그리고 화면에 표시한다.

DOM(Document Object Model) 문서 객체 모델
브라우저에서 파싱되는 HTML 문서의 태그, 속성, 텍스트 등의 객체들을 DOM이라고 한다. 그래픽, 텍스트, 헤드라인, 스타일 등 웹의 모든 요소가 자바스크립트나 스크립트 언어에 의해 조정될 수 있도록 해준다.

HTML 기초

HTML 기본 뼈대 (VS Code - 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은 크게 head 태그와 body 태그로 구성되어 있다.
head 태그 안에는 페이지의 속성을 정의하거나, 필요한 스크립트(CSS, 부트스트랩, body의 class/id 등)들을 부른다. 즉, 눈에 안 보이는 필요한 것들을 담는다.
body 태그 안에는 페이지의 내용을 담는다.

- head 태그 안에 들어가는 요소들

meta (<meta 속성 = "속성값">)
meta는 이 웹사이트가 어떤 정보를 담고 있는지 더 자세하게 알려주는 태그이다. 현재 페이지의 인코딩(언어정보), 페이지 설명, 페이지에 관련한 주요 키워드 등을 담는 역할을 한다.

ex1) <meta charset="UTF-8">
html 파일의 문자 인코딩 방식을 알려주는 태그로 브라우저에게 text를 어떻게 그려달라고 하는지 말해주는 것으로 웹 브라우저가 웹 페이지에 코딩되는 태그들의 내용을 이해할 수 있도록 돕는 태그이다. 이것이 없으면 문자들이 깨져서 나올 수 있다. (UTF-8의 UTF는 유니코드, 8은 이진법을 의미)

ex2)<meta name = "Description" content = "소개내용">
Description meta는 해당 웹페이지를 설명하는 정보를 담고 있으며, 이 정보는 인터넷에서 검색을 했을 때 사이트의 설명 부분을 나타낸다.

ex3) <meta name = "Keyword" content = "키워드 나열">
Keyword meta는 해당 웹페이지의 주요 키워드들을 담는다

ex4) <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1, minimum scale=1">

기기의 사이즈에 따라 보여지는 사이트의 배율을 지정한다.

width=device-width : 콘텐츠를 디바이스 크기에 맞추겠다.
initial-scale=1.0 : 브라우저에서 페이지를 처음로드 할 때 초기 크기를 설정한다.(기본 꽉찬 화면)
minimum-scale=1 : 최소 크기 설정 ( 기본값 : 0.25, 범위 : 0~10.0)
maximum-scale=1 : 최대 크기 설정 (최대 배율 범위 : 0 ~ 10.0)
user-scalable=no : 사용자 단말의 확대 기능 사용 유무 선언 ( yes / no )

title 태그(<title>문서의 제목</title>)
title 태그의 내용은 브라우저 창 제목이나 페이지 탭에 나타나는 문서의 제목 요소로 웹페이지의 이름이다. 또한 검색엔진에서 사이트가 목적에 맞게 인식되어 노출될 수 이도록 키워드 선정도 중요하다.

ex) title 내용과 description meta 내용 노출

<title>NAVER</title>
<meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나보세요.">

출처 : 구글 '네이버' 검색

link(<link href="style.css", type="text/css", size="", rel="stylesheet", href="aaa.jpg">)
link는 CSS파일을 연결할 때 사용하는 요소로 다른 곳에 저장되어 있는 파일을 html파일에 불러오는 태그이다. 쉽게 말해서 현재 문서와 외부 리소스와의 관계를 명시해주는 것이다. CSS Style Sheet를 사용할 때 가장 많이 사용하고 방법은 rel에 stylesheet라고 명시해주고, href에 해당 CSS 문서의 경로를 입력한다.
(href는 이 파일의 위치, rel과 type는 어떤 타입의 파일인지 알려주는 것이다.)
style 태그(<style> *{color: red;} .class{} #id{} </style>)
style 태그는 link 태그로 CSS sheet를 연결하지 않고 안에서 바로 CSS코드를 사용할 수 있게 해주며 body 태그에 작성한 태그들을 꾸며주기도 한다.(CSS와 동시에 연결했을 때는 style 태그가 우선이다.)
script 태그(<script src="abc.js"> </script>)
script 태그는 웹페이지와 Javascript 파일을 연결하는 역할을 한다. src 속성에 js파일명을 기입하면, CSS를 연결하듯 외부 js파일을 연결한다. (직접 작성도 가능하다.)

- body 태그 안에 들어가는 요소들

태그(tag)
태그는 한 쌍(<tag></tag>)으로 화면 분할, 텍스트와 이미지, 하이퍼링크 등을 배치할 수 있다.
각 태그에 style 속성을 부여해서 크기, 정렬, 글꼴, 색 등을 정해 꾸밀 수 있다.

구역을 나누는 태그들

div 태그(<div></div>)
div 태그는 구역을 나눈다. html 문서의 컨텐츠들을 묶어주는 순수 컨테이너 박스이다.
p 태그(<p></p>)
p 태그는 문단(단락)이고 문단과 문단 사이에는 줄바꿈이 일어난다.
(<p style="margin-top:40px;></p> style 속성이 저장되어 있는 CSS를 즉각 활용할 수도 있다.)
br 태그(<br>)
br 태그는 단일로 쓰이는 줄바꿈 태그이다.
ol(ordered list)태그 ul(unordered list)태그 li(list)태그
ol태그와 ul태그는 li태그의 부모태그이다. ol태그는 순서가 중요한 목록을 나타낸다. ul태그는 순서가 중요하지 않은 목록을 나타낸다.

<ol>
	<li>html 입문</li>
    <li>html 기초</li>
<ol>

html 입문
html 기초

<ul>
	<li>html 입문</li>
    <li>html 기초</li>
<ul>

· html 입문
· html 기초

구역 내 컨텐츠 태그들

h 태그
h 태그는 1부터 6까지 있고 글씨 크기별 제목이다. 꼭 순서대로 할 필요는 없다. HTML에서는 그냥 쓰면 줄바꿈이 안되고 h태그로 줄바꿈 및 제목으로 지정을 해야한다.
(글씨를 <strong>찐하게 할 수도 있고 <b>볼드체로 지정할 수도 있고 <i> 글씨를 기울일 수도 있고<u>~~밑줄도 가능하다.~~</u>)
hr 태그
hr 태그는 가로줄 두 줄로 둘러쌓아주는 단일태그이다.
span 태그
span 태그는 요소 안에서 특정 <span style="color:red">글자</span>를 꾸며줄 때 쓴다.
img 태그(<img src(source)="이미지 주소"/>)
이미지의 속성을 다른 문법들로 부여할 수 있다.
<img src(source)="이미지 주소" width='배율/>
input 태그(<input type=""/>)
박스가 생성되며 박스 안의 자료 유형을 지정함에 따라 달라진다.
button 태그(<button>버튼</button>)
버튼이 생성된다.
textarea 태그(<textarea></textarea>)
여러 줄을 입력할 수 있는 구역(박스)이 나온다.
a 태그(<a href='주소명'>Text</a>)
anchor(닻)로 웹페이지나 외부 사이트로 연결하는 경우 하이퍼링크를 만든다. 속성값으로 target='_blank'(새 창으로 열기)나 '_self'(현재 창에 새 탭으로 열기) 등을 줄 수 있다.

<ul>
	<li><a href='https://mypage.com/HTML'>HTML</a></li>
    <li><a href='https://mypage.com/Javascript'>Javascript</a></li>
    <li><a href='https://mypage.com/Python'>Python</a></li>
<ul>

· HTML
· Javascript
· Python
(이런 카테고리를 만들 수 있다.)

label 태그
input, select 요소에 주로 연결시키며, 해당 form이 어떤 의미를 가지는가에 대한 표시를 한다. label을 만들면 for 속성을 사용해서 input의 id와 연결지어줘야한다. 혹은 label 태그 내에 input을 자식 노드로 입력하는 경우 id와 연결시켜줄 필요는 없다.

<div class="gender">
    <label for="male">male</label>
    <input type="checkbox" name="male" id="male"></input>
  </div>
  <div class="gender">
    <label for="female">female</label>
    <input type="checkbox" name="female" id="female"></input>
  </div>

option 태그
선택지를 주는 경우 사용하는 태그이다. 속성에 value="값"을 주면 javascript event listener로 해당 값을 받아올 수 있다.

  <label for="Food-Category">Food Category</label>

  <select id="Food-Category">
    <option value="">--Please choose an option--</option>
    <option value="Chicken">Chicken</option>
    <option value="Pizzs">Pizza</option>
    <option value="Noodle">Noodle</option>
    <option value="Soup">Soup</option>
    <option value="Drink">Drink</option>
  </select>

그 외에도 종류는 많지만 필요할 때마다 검색해서 사용하면 된다.

★ 가독성을 위한 코드 자동 정렬
SHIFT + ALT + F

EXAMPLE) 로그인 페이지 꾸미기

html:5
title 태그의 제목을 로그인 페이지로 변경
<title>로그인 페이지</title>
h1 태그에 로그인 페이지
<h1>로그인 페이지</h1>
p 태그들로 ID와 PW에 input박스 삽입

<p>ID: <input type="text"></p>
<p>PW: <input type="text"></p>

button 태그에 로그인하기
<button>로그인하기</button>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인페이지</title>
</head>
<body>
    <h1>로그인 페이지</h1>
    <p>ID: <input type="text"/></p>
    <p>PW: <input type="text"/></p>
    <button>로그인하기</button>
</body>
</html>

- CSS(Cascading Style Sheets)

HTML가 웹의 뼈대를 잡아주는 구역을 나타내는 코드라면 CSS는 HTML을 통해 작성된 뻐대의 속성을 예쁘게 꾸며주는 코드이다.
head 태그 안에 있는 style 태그에서 class/id 값으로 지정한 것들을 한 곳에 모아놓고 속성을 부여할 수 있다.

<head>
<style>
.name/#name{
}
모든 태그에 적용
*{ 
}
특정 태그에 적용
태그{ 
}
특정 클래스를 갖는 특정 태그에 적용
태그.class이름{ 
}
클래스 안의 태그에 적용(<)
.class이름 > 태그 {
}
특정 클래스를 갖는 특정 태그 안의 태그에 적용(띄어쓰기)
태그1.class 태그2
<style>
<head>
<body>
<div class/id="name">
....
<div>
<body>

-> 꾸며주기 위한 대상을 지정(class="name")하고 style 태그에서는 이 대상을 가리켜(.name) 꾸며준다({}).
-> div 태그를 적극 이용 (박스는 div다.)

EXAMPLE) 로그인 페이지 꾸미기

html:5
title 태그의 제목을 스파르타 로그인 페이지로 변경
<title>스파르타 로그인 페이지</title>
h1 태그에 로그인 페이지
<h1>로그인 페이지</h1>
p 태그들로 ID와 PW에 input박스 삽입

<p>ID: <input type="text"></p>
<p>PW: <input type="text"></p>

button 태그에 로그인하기
<button>로그인하기</button>
로그인 페이지와 아이디, 비밀번호를 입력하세요 뒤에 이미지를 삽입할 것이기 때문에 h1 태그와 h5태그를 div태그로 묶어준다.

<div>
	<h1>로그인 페이지</h1>
	<h5>아이디, 비밀번호를 입력하세요</h5>
</div>

꾸며줄 div에 class="mytitle"로 이름을 부여
<div class="mytitle">
style 태그에서 꾸며줄 구역(div class="mytitle)을 색칠해줌으로써 바뀌는 것을 실시간으로 체크하기 위해 .mytitle에 배경색을 입히고 width(너비)와 height(높이)를 조정한다.

<style>
.mytitle{
	background-color: green;
	width: 300px;
	height: 200px;
}
</style>

초록색 박스(배경색을 입힌 div구역)의 테두리를 둥굴게 하기 위해 border-radius를 10px로 조정한다.
border-radius: 10px;
박스 안의 글씨를 흰색으로 바꾸고 글씨들의 위치를 가운데(center)로 이동시킨다.
color: white;
text-align: center;
박스 안에서 글씨의 위치를 바꾸기 위해 padding(안쪽 여백)을 준다.
padding-top: 30px; 혹은
padding: 30px 0px 0px 0px; (위 오른쪽 아래 왼쪽 순서)
배경이미지를 삽입할 때는 3가지가 세트로 온다.

background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg')
background-position: center;
background-size: cover;

이제 모든 것들을 가운데로 가져오기 위해서 body 안의 모든 것을 div로 묶는다.

<div class="wrap">
	<div class="mytitle">
		<h1>로그인 페이지</h1>
		<h5>아이디, 비밀번호를 입력하세요</h5>
		<p>ID: <input type="text"></p>
		<p>PW: <input type="text"></p>
		<button>로그인하기</button>
	</div>
</div>

style 태그에서 꾸며줄 구역(div class="wrap")을 색칠해준 후 width(너비)를 조정하고 margin(바깥 여백)을 준다.

<style>
.wrap{
	background-color: green;
	width: 300px;
	margin: 20px auto 0px auto; // auto는 쭉 밀어라. 오른쪽과 왼쪽 여백을 auto로 하면 가운데로 온다.
}
</style>

이제 구역에 칠했던 배경 색들을 모두 제거한다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mytitle {
            width: 300px;

            border-radius: 10px;
            color: white;

            text-align: center;

            padding: 30px 0px 0px 0px;

            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;
        }
        .wrap {
            width: 300px;
            margin: 20px auto 0px auto;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="mytitle">
            <h1>로그인 페이지</h1>
            <h5>아이디, 비밀번호를 입력하세요</h5>
        </div>
        <p>ID : <input type="text" /></p>
        <p>PW : <input type="text" /></p>
        <button>로그인하기</button>
    </div>
</body>

</html>

구글 웹 폰트 적용하기 (https://fonts.google.com/?subset=korean)

원하는 폰트 스타일의 style 태그 안 코드를 내 코드의 style 태그 안에 넣는다.
CSS rules to specify families 안의 코드를 복사해서 내 코드의 style 태그 안에 전체적용(*{})으로 넣는다.

주석처리는 CTRL+/ (완전 유용하다.)
style 태그 안이 너무 길어지면 탭을 닫아도 되지만 CSS 파일로 따로 분리할 수 있다.

style.css 파일을 같은 폴더에 만들고 style 태그 안의 코드를 넣는다.
내 코드의 head 태그에서 불러온다.
<link rel="stylesheet" type="text/css" href="(css 파일 이름).css">

- 부트스트랩(Bootstrap)

예쁜 CSS를 모아둔 것으로 CSS파일 분리와 원리가 같다. 남이 미리 작성한 CSS를 내 HTML 파일에 적용하는 것

EXAMPLE) 내 생애 최고의 영화들

html:5
title 태그의 제목을 스파르타 피디아로 변경
<title>스파르타 피디아</title>
h1 태그에 내 생애 최고의 영화들
<h1>내 생애 최고의 영화들</h1>
head 태그에 부트스트랩 코드 넣기

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

button 태그에 영화 기록하기
<button>영화 기록하기</button>
꾸며줄 구역을 div로 묶은 후 class="mytitle"

<div class="mytitle">
	<h1>내 생애 최고의 영화들</h1>
	<button>영화 기록하기</button>
<div>

구역 확인(background-color)과 글씨색과 height(높이)를 조정한다.

<style>
.mytitle{
	background-color: green;
	color: white;
	height: 250px;
}
</style>

div 안의 내용물을 정렬(4개가 세트)

display: flex;
flex-direction: column;(column:세로, row:가로)
align-items: center;
justify-content: center;

버튼을 꾸며주기 위해서 클래스 mytitle 안의 button 태그를 가리키고 꾸며준다.(width, height, background-color 투명, 테두리 반경, 글자색, 테두리색, 위 여백)

.mytitle>button {
	width: 250px;
	height: 50px;
	background-color: transparent; // transparent:투명
	border: 1px solid white; // solid:실선
	color: white;
	border-radius: 50px; // 모서리를 둥굴게
	margin-top: 20px;
}

버튼에 마우스를 갖다 대면 굵어지게(hover: 주위를 맴돌다, 머물다)

.mytitle>button:hover {
	border: 8px solid white;
}

.mytitle에 배경 이미지 삽입(background-image, position, size 3개 세트)하고 배경색 지우고 배경 이미지 어둡게 하기(linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)))

<style>
.mytitle{
	color: white;

	height: 250px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
	background-position: center;
	background-size: cover;
}
</style>

구글 폰트 style 태그에 임포트

@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

CSS도 style 태그에 전체 적용

* {
	font-family: 'Gowun Dodum', sans-serif;
}

카드 부트스트랩 코드 가져와서 div 생성 후 class="mycards"지정하고 4개 만들기

<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4">
    /*한 줄에 4개의 컬럼을 놓고 싶다면 row-cols-md-4*/
      <div class="col">
        <div class="card">
          <img src="..." class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a short card.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <img src="..." class="card-img-top" alt="...">
          <div class="card-body">
                <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a short card.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <img src="..." class="card-img-top" alt="...">
          <div class="card-body">
                <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a short card.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <img src="..." class="card-img-top" alt="...">
          <div class="card-body">
                <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a short card.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

카드에 이미지 넣어주기(https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg)

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">

title과 text 내용을 바꿔준다.
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
별점을 위한 별(⭐)과 코멘트 추가(p 태그)
<p>⭐⭐⭐</p>
<p>나의 한줄 평을 씁니다.</p>
코멘트 색깔을 회색으로 꾸며주기 위해 class="mycomment"로 지정하고 style에서 꾸며준다.
<p class="mycomment">나의 한줄 평을 씁니다.</p>

<style>
.mycomment{
	color: gray;
}
</style>

카드들(class="mycards") 사이즈를 줄이고 위치를 가운데로 가져온 후 위쪽 여백을 준다.

<style>
.mycards {
      width: 1200px;
      margin: 20px auto 20px auto;
    }
</style>

div class="mytitle"과 div class="mycard" 사이에 div class="mypost"로 포스팅 박스 넣기 (부트스트랩-Forms-Floating labels)

<div class="mypost">
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
      <label for="floatingInput">영화URL</label>
    </div>
    <div class="form-floating">
      <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
      <label for="floatingTextarea">코멘트</label>
    </div>

포스팅 박스(div class="mypost") 안에 버튼 두개 넣고 div class="mybtn"으로 묶기

<div class="mybtn">
      <button type="button" class="btn btn-dark">기록하기</button>
      <button type="button" class="btn btn-outline-dark">닫기</button>
</div>

class="mypost"에 배경색을 주고 꾸며준다.(배경색, width 너비, 바깥 여백 가운데로 주고 위 아래도 바깥 여백, 안쪽 여백은 20px씩, 박스 테두리를 그림자로 그려준다. 마지막에 배경색 없애기)

.mypost {
      /* background-color: green; */
      width: 500px;
      margin: 20px auto 20px auto;
      padding: 20px 20px 20px 20px;

      box-shadow: 0px 0px 3px(대부분 이것만 고친다. 그림자의 길이) 0px gray;
      /* 가운데로부터 얼마나 먼지 그림자의 길이*/
      }

박스 안의 버튼을 가운데로 오게 하고 가로 정렬(내용물 정렬은 display: flex; 4개 세트)하고 버튼 위에 여백을 준다.

.mybtn {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      margin-top: 20px;
    }

class="mybtn"안의 button 태그들을 가리켜 버튼 끼리 서로 오른쪽 바깥 여백을 줘서 간격을 준다.

.mybtn>button {
	margin-right: 10px;
}

class="mypost" 안의 영화URL 밑에 별점 선택 박스 만들기 (부트스트랩-Forms-Input group-Custom forms-Custom select)

 <div class="input-group mb-3">
      <label class="input-group-text" for="inputGroupSelect01">별점</label>
      <select class="form-select" id="inputGroupSelect01">
        <option selected>-- 선택하기 --</option>
        <option value="1">⭐</option>
        <option value="2">⭐⭐</option>
        <option value="3">⭐⭐⭐</option>
        <option value="4">⭐⭐⭐⭐</option>
        <option value="5">⭐⭐⭐⭐⭐</option>
      </select>
    </div>

줄 맞춤하기(Alt Shift F)

<!Doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>스파르타 피디아</title>

    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {
        	color: white;
            
            height: 250px;

 			display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
            background-position: center;
            background-size: cover;

           
        }

        .mytitle > button {
            width: 250px;
            height: 50px;

            background-color: transparent;
            color: white;

            border-radius: 50px;
            border: 1px solid white;

            margin-top: 20px;
        }

        .mytitle > button:hover {
            border: 8px solid white;
        }

        .mycomment {
            color: gray;
        }

        .mycards {
            width: 1200px;
      		margin: 20px auto 20px auto;
        }

        .mypost {
            max-width: 500px;
            margin: 20px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px gray;
        }

        .mybtns {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin-top: 20px;
        }
        .mybtns > button {
            margin-right: 10px;
        }
    </style>
</head>

<body>
<div class="mytitle">
    <h1>내 생애 최고의 영화들</h1>
    <button>영화 기록하기</button>
</div>
<div class="mypost">
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">영화URL</label>
    </div>
    <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="inputGroupSelect01">
            <option selected>-- 선택하기 --</option>
            <option value="1">⭐</option>
            <option value="2">⭐⭐</option>
            <option value="3">⭐⭐⭐</option>
            <option value="4">⭐⭐⭐⭐</option>
            <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
    </div>
    <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>
    <div class="mybtns">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>
<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4">
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>

1주차 HTML, CSS, 부트스트랩 내용을 정리해봤는데 나만의 홈페이지를 한 번 만들어봐야겠다는 생각이 든다.

장현웅

다음 포스트

Javascript 입문

2개의 댓글

hr0_0

2023년 7월 25일

엄청 세세하게 작성해주셨네요! 코드 흐름을 파악하기가 쉬워서 좋아요👍

1개의 답글