TIL - HTML and CSS ๊ฐœ๋… ์ •๋ฆฌ

geeonieยท2021๋…„ 4์›” 7์ผ
0

TIL๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป

๋ชฉ๋ก ๋ณด๊ธฐ
1/7
post-thumbnail

๐Ÿ“š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๋Š” ์˜๋ฏธ๊ฐ€ ์—†๋‹ค.

Basics

๐Ÿ‘‰ Ruleset - Selector, Property, Value

  • Selector : Style์„ ์ ์šฉํ•˜๊ณ ์ž ํ•˜๋Š” HTML ์š”์†Œ -> h1
  • Property : CSS์—์„œ ์˜ํ–ฅ์„ ์ค„ ์†์„ฑ ์„ ํƒ -> font-size
  • Value : ์†์„ฑ ๊ฐ’ -> 1.25rem
  • Declaration : 'font-size:1.25rem'๊ณผ ๊ฐ™์€ ๋‹จ์ผ ๊ทœ์น™.
  • ๐Ÿ‘‰ 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๊ฐ€ ์ค‘๋ณต๋˜๋Š” ๊ฒฝ์šฐ, ๊ฐ€์žฅ ๋งˆ์ง€๋ง‰ ์Šคํƒ€์ผ์ด ์ ์šฉ๋œ๋‹ค.

    ๐Ÿ‘‰ Box Model

    ๋ชจ๋“  HTML์˜ ์š”์†Œ๋Š” boxํ˜•ํƒœ์˜ ์˜์—ญ์„ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ, ์ด box๋Š” ์ฝ˜ํ…ํŠธ(Content), ํŒจ๋”ฉ(Padding), ํ…Œ๋‘๋ฆฌ(Border), ๋งˆ์ง„(Margin)๋กœ ๊ตฌ์„ฑ๋œ๋‹ค.

    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๋กœ ์ง€์ •ํ•œ๋‹ค.
  • ๐Ÿ‘‰ 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
      }
    1. flex container์˜ ๋‘ ์ถ•์€ ๋‹ค์Œ์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
      main axis(์ฃผ์ถ•) : justify-content
      cross axis(๊ต์ฐจ์ถ•) : align-items

    2. ์ฃผ์ถ•์€ ์ˆ˜ํ‰, ๊ต์ฐจ์ถ•์€ ์ˆ˜์ง์ด ๊ธฐ๋ณธ์ด๋‚˜, flex-direction ํ”„๋กœํผํ‹ฐ๋ฅผ ํ†ตํ•˜์—ฌ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค.

    1. flexbox๋Š” width๊ฐ’์„ ์ดˆ๊ธฐ ์‚ฌ์ด์ฆˆ๋กœ๋งŒ ์—ฌ๊ธฐ๊ณ , ๋ชจ๋“  ์š”์†Œ๋ฅผ ํ•œ ์ค„์— ์žˆ๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด width๋ฅผ ๋ฐ”๊พธ๊ธฐ๋„ ํ•œ๋‹ค(nowrap). ์ด๋•Œ flex-wrap:wrap/ wrap-reverse ์œผ๋กœ ์„ ์–ธํ•˜๋ฉด width๊ฐ’์„ ์ดˆ๊ณผํ•˜๋Š” ๊ฒฝ์šฐ ๋‹ค์Œ ์ค„๋กœ ์š”์†Œ๊ฐ€ ์ด๋™ํ•˜๊ฒŒ ๋œ๋‹ค.

    Position property

    ๐Ÿ‘‰ 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๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ด๋™ํ•œ๋‹ค.
  • profile
    Never say never๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป

    0๊ฐœ์˜ ๋Œ“๊ธ€