๐Ÿฅจ HTML - ํ…Œ์ด๋ธ”์„ ์ด์šฉํ•œ ๋‹ฌ๋ ฅ ๋งŒ๋“ค๊ธฐ

์ฝ”๋“œ ์ •๋ฆฌ

๐Ÿ”Ž๊ตฌ์กฐ

  1. ์‹œ๋งจํ‹ฑํ•˜๊ฒŒ ๋‚˜๋ˆ„๊ธฐ

    1. header์— year
    2. main ์— table 6๊ฐœ , table 6๊ฐœ ๋ฅผ section ์— ๊ฐ์‹ธ์คŒ.
  2. ํ…Œ์ด๋ธ” ์ƒ์„ฑ (6๊ฐœ)

    1. caption ์— month
    2. th์— week
    3. tr ์— day
      ๋˜ํ•œ SAT๋ถ€ํ„ฐ 1์ผ์ด๋ผ๋ฉด ์ด์ „์€ trํƒœ๊ทธ์™€ ๊ณต๋ฐฑ์„ ํ•จ๊ป˜ ์จ์ฃผ์—ˆ๋‹ค.
  3. 1~3์›”๊ณผ 4~6์›” ๋‘ ๋ถ€๋ถ„์œผ๋กœ ๋‚˜๋ˆ„๊ธฐ ์œ„ํ•ด ๋ฐ‘์˜ ์ฝ”๋“œ๋ฅผ ๋„ฃ์–ด์คŒ.

<tr>
  <th colspan="7"></th>
</tr>

๐Ÿ”ŽCSS

  1. ๊ฐ€์šด๋ฐ ์ •๋ ฌ

    1. headerํƒœ๊ทธ์— ์žˆ๋Š” h1์˜ ํ…์ŠคํŠธ๋ฅผ ๊ฐ€์šด๋ฐ ์ •๋ ฌ ๐Ÿ‘‰ text-align:center;
    2. table ํƒœ๊ทธ์˜ calendar๋ฅผ display:inline-block;์œผ๋กœ ์„ค์ • (์ง์ ‘์ ์œผ๋กœ ์„ค์ •ํ•ด์ค˜์•ผํ•˜๋Š” ๋“ฏ? table ํƒœ๊ทธ๋ฅผ ๋‘˜๋Ÿฌ์‹ผ wrpper์— ์ ์šฉํ•ด๋ณด๋‹ˆ inline-block์œผ๋กœ ๋˜๊ธด ํ–ˆ์œผ๋‚˜ inline ์ฒ˜๋Ÿผ ์˜†์œผ๋กœ ๊ฐ€์ง„ ์•Š์•˜์Œ)
    3. table ๊ฐ€์šด๋ฐ ์ •๋ ฌํ•˜๊ธฐ ์œ„ํ•ด margin: 0 auto;๋ฅผ ์ ์šฉ

    4. ๐ŸŒŸ๐ŸŒŸ๐ŸŒŸ๐ŸŒŸ ์ด๊ฑธ ์œ„ํ•ด ์ด ๊ธ€์„ ์ž‘์„ฑํ–ˆ๋‹ค ใ…‹ใ…‹

      th:nth-child(1),td:nth-child(1) {
          color:red;
      }

    ์ผ์š”์ผ์—๋งŒ ๋นจ๊ฐ„์ƒ‰์„ ์–ด๋–ป๊ฒŒ ์“ฐ์ง€? ํ•˜๋‹ค๊ฐ€ ๋‹ค๋ฅธ ํšŒ๊ณ ํŒ€์—์„œ ๋ฐœ๊ฒฌํ•œ ๋ฐฉ๋ฒ•!
    ์ด๋Ÿฐ ์ข‹์€ ๋ฐฉ๋ฒ•์ด,,๐Ÿ˜‹

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ