๐Reference Source๐
๋
ธ๋ง๋ ์ฝ๋์ ์ฝ์ฝ์ ํด๋ก ๊ฐ์์ MDN Web Docs ์์ ๊ณต๋ถํ ๋ด์ฉ์ ๋ค์ํ๋ฒ ์ ๋ฆฌํด ๋์ ๊ฒ์๋ฌผ ์
๋๋ค.
HTML
๋ธ๋ผ์ฐ์ ์๊ฒ content์ ์๋ฏธ์ ๊ตฌ์กฐ๋ฅผ ์ค๋ช
ํ๋ Mark-up language.
๋ฌด์์ด header์ด๊ณ , ๋ฌด์์ด body์ธ์ง์ ๊ตฌ์กฐ๋ฅผ ์ง์ ํ๊ณ ๋ ๊ทธ ์์๋ ์ด๋ค ์ด๋ฏธ์ง, ํ
์คํธ ๋ฑ์ ์์๋ค์ด ๋ค์ด๊ฐ๋์ง์ ์ ๋ณด๋ฅผ ํํํ๋ ๊ธฐ์ ์ ์ธ์ด.
Elements
์นํ์ด์ง๋ฅผ ์ด๋ฃจ๋ ๊ฐ๋ณ์ ์ธ ์์. ์ผ๋ฐ์ ์ผ๋ก ์์๋ opening tag with some attributes, enclosed text content, ๊ทธ๋ฆฌ๊ณ a closing tag๋ก ์ด๋ฃจ์ด ์ง๋ค.
๐ Tag
์์์ ์ผ๋ถ๋ก ๋ฌธ์์ ๊ตฌ์กฐ๋ฅผ ํํํ๋ ์ญํ ์ ํ๋ค. ํ๊ทธ๋ "<"ํ๊ทธ์ด๋ฆ">"์ผ๋ก ์ด๋ฃจ์ด ์ง๋ค. img tag์ ๊ฐ์ self-closing tag๋ ์์ง๋ง, ๊ทธ๋ ์ง ์์ ํ๊ทธ๋ closing tag๋ก ๋ซ์์ฃผ์ด์ผ ํ๋ค. closing tag๋ ์ฌ๋์ ๋ฌธ์๋ฅผ ํฌํจํ์ฌ ์ ํ์์ด๋ค.
<a> text content๊ฐ ๋งํฌ๋ฅผ ํฌํจํ๊ณ ์์์ ๋งํด์ค๋ค.
<title> text content ์น์ฌ์ดํธ์ ์ ๋ชฉ์์ ๋งํด์ค๋ค.
<img /> ์ด๋ฏธ์ง ์์ฒด๊ฐ ์ปจํ
์ธ ์ด๋ฏ๋ก self-closing tag์ด๋ค.
<meta /> title, base, link, style, ๊ทธ๋ฆฌ๊ณ script ์์๋ฅผ ์ฌ์ฉํ์ฌ
ํํํ ์ ์๋ ๋ค์ํ ์ข
๋ฅ์ ๋ฉํ๋ฐ์ดํฐ = ๋ถ๊ฐ์ ๋ณด (self-closing tag).
<form> HTML ๋ฌธ์ ์ ์ฌ์ฉ์๊ฐ ์
๋ ฅํ ์ ๋ณด๋ฅผ ์๋ฒ์ ์ ์ก.
๐ Tag attributes
ํ๊ทธ๋ฅผ ํ์ฅํ์ฌ ๋์ ๋ฐฉ์์ ๋ฐ๊พธ๊ฑฐ๋, ๋ฉํ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํ๋ค. ์ด๋ค tag๋ค์ ๊ณตํต์ ์ผ๋ก ์ฌ์ฉํ๋ attribute๋ค์ด ์๋ ๋ฐ๋ฉด, ํน์ tag์๋ง ์ ์ฉ๋๋ attribute๋ค๋ ์๋ค.
id="value" : body์์ ์ด๋ค tag์๋ ๋ฃ์ ์ ์์ผ๋ฉฐ, CSS์ ํจ๊ป ์ฐ์ฌ ํน์ ์์์ style์ ์ค ์ ์๋ค. ๊ณ ์ ์๋ณ์๋ก ์์๋น ๋จ 1๊ฐ์ id๋ฅผ ๊ฐ์ง ์ ์๋ค.
class="Value" : id์ฒ๋ผ CSS์ ํจ๊ป ์ฐ์ฌ ํน์ ์์์ style์ ์ค ์ ์๋ค. ์์๋น ์ฌ๋ฌ๊ฐ์ class๋ฅผ ๊ฐ์ง ์ ์๋ ์ฐจ์ด๊ฐ ์๋ค.
herf="link" : HTTP reference๋ผ๋ ์๋ฏธ๋ก anchour tag๊ฐ ๊ธฐ๋ฅํ ์ ์๋๋ก ๋งํฌ์ ๋ํ ์ถ๊ฐ์ ์ธ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ค.
target="_self" : defaut๊ฐ์ "_self"์ด๋ฉฐ, anchour tag์ ์ง์ ๋ ๋งํฌ๋ก ์ด๋ํ๋ ๋ฐฉ์์ ์ง์ ํ๋ค. (value : "_self" ํ์ฌ ํ์ด์ง์์ ์ด๋, "_blank" ์๋ก์ด ํญ์ด ์ด๋ฆฌ๋ฉฐ ์ด๋)
src="source": img tag์ ์ฐ์ฌ ์ฌ์ง์ ๋ฃ์ ์ ์๋ค.
type="submit": input tag์ ์ฐ์ฌ ๋ฒํผ์ ์์ฑํ ์ ์๋ค.
HTML Document
๊ท์น 1. ๋ชจ๋ HTML๋ฌธ์์ ์ฒซ ๋ฒ์งธ ๋ผ์ธ์ <!DOCTYPE html>์ผ๋ก ์์ํ๋ค.
๊ท์น 2. <html>ํ๊ทธ๋ฅผ ์ฐ๋ค. html tag ์ฌ์ด์ ๋ค์ด๊ฐ๋ ๋ด์ฉ์ด html ์ฝ๋๊ฐ ๋๋ค.
๐ Structure
HTML Document์ ๊ตฌ์กฐ๋ <head>์ <body>๋ก ๋๋ ์ ์๋ค.
<head> ์น์ฌ์ดํธ์ ํ๊ฒฝ ์ค์ , ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ์ปจํ
์ธ ๋ก ๋ํ๋์ง ์๋ Tag๋ค์ด ๋ชจ์ฌ์๋ค.
e.g. <title>, <meta>
<body> ๋ธ๋ผ์ฐ์ ํ๋ฉด ์ ์ฌ์ฉ์๊ฐ ๋ณผ ์ ์๋ content.
e.g. <a>,<img>,<p>
๐ Sementic HTML
์๋ฏธ๋ก ์ ์ธ HTML์ ์์ฑ์ ๊ฐ๋ฐ์ ๋ฐ ๋ธ๋ผ์ฐ์ ๊ฐ ์์ํ๊ฒ ์ฝ๋๋ฅผ ์ดํดํ๊ธฐ ์ฝ๊ฒ ํด์ค๋ค.
<div id="header">
<span style="font-size:16px">Title<span>
</div>
VS
<header>
<h1>Title</h1>
</header>
CSS
Cascading Style Sheets - ๋ธ๋ผ์ฐ์ ์๊ฒ HTML์ด ์ค๋ช
ํด์ค content๋ฅผ ์ด๋ป๊ฒ ๋ณด์ฌ์ผ ํ๋์ง ์ค๋ช
ํด์ฃผ๋ ์คํ์ผ ์ํธ ์ธ์ด. HTML์์ด ๋จ๋
์ผ๋ก ์กด์ฌํ๋ CSS๋ ์๋ฏธ๊ฐ ์๋ค.
![](https://geekflare.com/wp-content/uploads/2019/12/css-gif.gif)
Basics
๐ Ruleset - Selector, Property, Value
Selector : Style์ ์ ์ฉํ๊ณ ์ ํ๋ HTML ์์ -> h1
Property : CSS์์ ์ํฅ์ ์ค ์์ฑ ์ ํ -> font-size
Value : ์์ฑ ๊ฐ -> 1.25rem
Declaration : 'font-size:1.25rem'๊ณผ ๊ฐ์ ๋จ์ผ ๊ท์น.
![](https://www.thecodesmith.co/static/b2ccdafbcbffc89be4b3e730a7636c17/af144/ruleset-visual.png)
๐ How to Add CSS to HTML
1. Embedding style
<style>ํ๊ทธ๋ฅผ ์ด์ฉํ์ฌ CSS์ HTML์ ๊ฐ์ ํ์ผ์ ๋๋ค. CSS๊ฐ ๋ณต์กํด์ง๋ฉด ๋ฌธ์์ ๊ธธ์ด๊ฐ ๊ธธ์ด์ง๋ ๋จ์ ์ด ์๋ค.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:black;
}
<style>
</head>
<body></body>
</html>
2. Link style
CSSํ์ผ์ ์ธ๋ถ์ ์์ฑ, <link>ํ๊ทธ๋ฅผ ์ด์ฉํ์ฌ HTML ๋ฌธ์์ ์ฐ๊ฒฐํ๋ค. ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ๋๋ ๋ฐฉ์.
<!DOCTYPE html>
<html>
<head>
<link herf=styles.css rel="stylesheet" />
</head>
<body></body>
</html>
๐ Cascading
๋ธ๋ผ์ฐ์ ๊ฐ CSS ์ฝ๋๋ฅผ ์ฝ์ ๋ ์์ ์๋ ์ฝ๋๋ถํฐ ์ฐจ๋ก์ฐจ๋ก๋ก ์ฝํ๊ฒ ๋๋ค.
๋ง์ผ ๊ฐ์ ์
๋ ํฐ์ ์ ์ธ๋ CSS๊ฐ ์ค๋ณต๋๋ ๊ฒฝ์ฐ, ๊ฐ์ฅ ๋ง์ง๋ง ์คํ์ผ์ด ์ ์ฉ๋๋ค.
![](https://velog.velcdn.com/images%2Fgeeonie%2Fpost%2F0565c389-022c-4230-8e26-473f2d841600%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-06-15%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2012.45.30.png)
๐ Box Model
๋ชจ๋ HTML์ ์์๋ boxํํ์ ์์ญ์ ๊ฐ์ง๊ณ ์์ผ๋ฉฐ, ์ด box๋ ์ฝํ
ํธ(Content), ํจ๋ฉ(Padding), ํ
๋๋ฆฌ(Border), ๋ง์ง(Margin)๋ก ๊ตฌ์ฑ๋๋ค.
![](https://chelsey-wiley.github.io/css-reference-guide/box_model.gif)
Display property
๐ blocks and inlines
display ํ๋กํผํฐ๋ layout ์ ์์ ์์ฃผ ์ฌ์ฉ๋๋ ์ค์ํ ํ๋กํผํฐ์ด๋ค.
block:
block์ ์์ ์๋ฌด ๊ฒ๋ ์ฌ ์ ์๋ค๋ ๊ฒ์ ๋ปํ๊ณ , ๋ํ์ ์ธ block๋ ๋ฒจ ์์์๋ div, p๋ฑ์ ์์๊ฐ ์๋ค. width, height, margin ํ๋กํผํฐ์ง์ ์ด ๊ฐ๋ฅํ๋ค.
inline:
inline์ ํ๋์ ์์ ์์ ๋ค๋ฅธ ์์๊ฐ ์ฌ ์ ์์์ ๋ปํ๋ค. ๋ํ์ ์ธ inline๋ ๋ฒจ ์์์๋ span, input, img๋ฑ์ ์์๊ฐ ์๋ค. width, height, margin-top, margin-bottom ํ๋กํผํฐ๋ฅผ ์ง์ ํ ์ ์๋ค. ์, ํ ์ฌ๋ฐฑ์ line-height๋ก ์ง์ ํ๋ค.
![](https://www.tutorialbrain.com/wp-content/uploads/2019/06/CSS-Display.png)
๐ inline-block
inline-block:
block๊ณผ inline ๋ ๋ฒจ ์์์ ํน์ง์ ๋ชจ๋ ๊ฐ๋๋ค. inline ๋ ๋ฒจ ์์์ ๊ฐ์ด ํ ์ค์ ํํ๋๋ฉด์ width, height, margin ํ๋กํผํฐ๋ฅผ ๋ชจ๋ ์ง์ ํ ์ ์๋ค.
๊ทธ๋ฌ๋, inline-block ๋ ๋ฒจ ์์ ๋ค์ ๊ณต๋ฐฑ(์ํฐ, ์คํ์ด์ค ๋ฑ)์ด ์๋ ๊ฒฝ์ฐ, ์ ์ํ์ง ์์ space(4px)๊ฐ ์๋ ์ง์ ๋๋ ์ , ๋ฐ์ํ ๋์์ธ์ด ์ง์๋์ง ์๋ ์ด์๊ฐ ์๋ค. ์ด๋ฅผ ํด์ํ๊ธฐ ์ํ์ฌ flexbox๊ฐ ๊ณ ์๋์๋ค.
๐ flexbox
1. flexbox์ ์ฌ์ฉ์ ์์์๊ฒ ๋ช
์ํ์ง ์๊ณ ๋ถ๋ชจ์๊ฒ ๋ช
์ํ๋ค. div๋ฅผ ๋๋ํ ๋ฐฐ์นํ๊ณ ์ถ์ ๊ฒฝ์ฐ, div์ ๋ถ๋ชจ์ธ body์ display:flex๋ฅผ ์ ์ธํ๋ค.
[HTML]
<body>
<div></div>
<div></div>
</body>
[CSS]
body {
display:flex
}
-
flex container์ ๋ ์ถ์ ๋ค์์ ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
main axis(์ฃผ์ถ) : justify-content
cross axis(๊ต์ฐจ์ถ) : align-items
![](https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/30183/image/axes.png)
-
์ฃผ์ถ์ ์ํ, ๊ต์ฐจ์ถ์ ์์ง์ด ๊ธฐ๋ณธ์ด๋, flex-direction ํ๋กํผํฐ๋ฅผ ํตํ์ฌ ๋ณ๊ฒฝํ ์ ์๋ค.
![](https://mdn.mozillademos.org/files/15631/align5.png)
- flexbox๋ width๊ฐ์ ์ด๊ธฐ ์ฌ์ด์ฆ๋ก๋ง ์ฌ๊ธฐ๊ณ , ๋ชจ๋ ์์๋ฅผ ํ ์ค์ ์๊ฒ ํ๊ธฐ ์ํด width๋ฅผ ๋ฐ๊พธ๊ธฐ๋ ํ๋ค(nowrap). ์ด๋ flex-wrap:wrap/ wrap-reverse ์ผ๋ก ์ ์ธํ๋ฉด width๊ฐ์ ์ด๊ณผํ๋ ๊ฒฝ์ฐ ๋ค์ ์ค๋ก ์์๊ฐ ์ด๋ํ๊ฒ ๋๋ค.
![](https://i.pinimg.com/originals/58/bf/0d/58bf0dea8f9a93c70f13e0ccf2676974.jpg)
Position property
![](https://www.csssolid.com/images/csspositions/css-position-all.png)
๐ position: static
์ ์ ์ธ ์์น ์ ์ . ๋ฐ๋ก ์ง์ ํด ์ฃผ์ง ์์๋ ๊ธฐ๋ณธ ๊ฐ์ static์ผ๋ก ๋์ด ์๋ค.
๐ position: fixed
static ํฌ์ง์
๊ณผ ๋์ผํ ์์น์ด๋ ํ๋ฉด์ ์คํฌ๋กค์ ์๊ด์์ด ๊ณ ์ ๋์ด ์๋ค. top, left, right, bottom๋ฑ์ ์์ฑ์ ํตํ์ฌ ์์น๋ฅผ ๋ค๋ฅด๊ฒ ๋ช
๋ นํ ๊ฒฝ์ฐ ๋ค๋ฅธ ๋ ์ด์ด ์์ ์์นํ๊ฒ ๋๋ค.
๐ position: relative
static ํฌ์ง์
์ ๊ธฐ์ค์ ์ผ๋ก top, left, right, bottom๋ฑ์ ์์ฑ์ ํตํ์ฌ ์์น๋ฅผ ๋ค๋ฅด๊ฒ ๋ช
๋ นํ ์ ์์ผ๋, ๋์ผํ ๋ ์ด์ด ์์ ์์นํด ์์ด ์คํฌ๋กค์ ์ํฅ์ ๋ฐ๋๋ค.
๐ position: absolute
position: relative๋ก ์ง์ ๋์ด ์๋ ๊ฐ์ฅ ๊ฐ๊น์ด relative ๋ถ๋ชจ๋ฅผ ๊ธฐ์ค์ผ๋ก ์ด๋ํ๋ค. ๋ฐ๋ก relative ๋ถ๋ชจ๊ฐ ์๋ ๊ฒฝ์ฐ, document body๋ฅผ ๊ธฐ์ค์ผ๋ก ์ด๋ํ๋ค.