HTML
(Hypertext Markup Language)
Hypertext → ์๋ก ์ฐ๊ฒฐ๋ ์ ์๊ณ
Markup → ์ ๋ณด๋ฅผ ๊ตฌ์กฐ์ ์ผ๋ก ํํํ๋
Language → ํ๋ก๊ทธ๋๋ฐ ์ธ์ด
- HTML์ ์ ๋ณด๋ฅผ ๊ตฌ์กฐ์ ์ผ๋ก ํํํ๊ธฐ ์ํด Tag๋ผ๋ ๊ฐ๋ ์ ์ฌ์ฉํ๋ค. (ex. <html> </html>, <strong> </strong> ···)
HTML์ ๊ธฐ๋ณธ ๊ตฌ์กฐ
โซ HTML ๋ฌธ์๋ ๊ณ์ธตํ ๊ตฌ์กฐ์ด๋ค.
- html tag: ์ต์์ ํ๊ทธ
- head tag: ๋ฌธ์์ ๋ถ๊ฐ ์ ๋ณด๋ฅผ ๋ด๋ ํ๊ทธ
- body tag: ๋ฌธ์์ ์ปจํ ์ธ ๋ฅผ ๋ด๋ ํ๊ทธ
HTML์ ๊ธฐ์ด Tag ์ค ์ ์ ์ ๋ฆฌํ์ง ์์๋ Tag๋ค๋ง ์ ๋ฆฌํด๋ณด๋ ค ํ๋ค.
HTML์ ๊ธฐ์ด Tag
· ๋ฌธ์ฅ ์ฌ์ด์ ์ค ๋ฐ๊ฟํ๋ Line Breaker
- <br /> → single Tag์(<br> or <br /> ๋๋ค ์ฌ์ฉ ๊ฐ๋ฅ)
· ํน์ ๋ฌธ์๋ฅผ ๊ฐ์กฐ
- <b> bold </b>
- <strong> (์น ์ ๊ทผ์ฑ, ์์ฑ๊ฐ์กฐ ๋ฑ) </strong>
· ํน์ ๋ฌธ์๋ฅผ Italic์ฒด๋ก ๋ณํ
- <i> ๋จ์ Italic์ฒด ์ฒ๋ฆฌ </i>
- <em> ์ค์ํ text ํ์(์น ์ ๊ทผ์ฑ, ์์ฑ๊ฐ์กฐ ๋ฑ) </em>
· ํน์ ๋ฌธ์์ ์ธ๋๋ผ์ธ ํ์
- <u> Underline </u>
· Table ๋ง๋ค๊ธฐ
- <table> ํ๋์ ์ ์ฒด ํ๋ฅผ ์์ฑ </table>
- <tr> ํ ๋ด๋ถ์ 1๊ฐ์ ํ </tr>
- <td> ์ค์ ๋ฐ์ดํฐ๊ฐ ๋ค์ด๊ฐ๋ ํ ๋ด๋ถ 1๊ฐ์ ์ </td>
- <th> ํ์ ์ ๋ชฉ ์ ์ ๋ณผ๋์ฒด๋ก ์ฒ๋ฆฌ </th>
- <caption> ํ์ ์ค๋ช ์ถ๊ฐ </caption>
- <table border = x> → ํ์ ํ ๋๋ฆฌ ๋๊ป ์ง์
· ๋ฐ์ดํฐ๋ฅผ List ํํ๋ก ํํํ๊ธฐ
* HTML์ List๋ unordered list์ ordered list ๋ ๊ฐ์ง ์ข ๋ฅ๊ฐ ์๋ค
- <ul> unordered list </ul>
- <ol> ordered list </ol>
* <ul> ํ๊ทธ ๋ด์ style attribution์ ํ์ฉํ์ฌ ๋ค์ํ ํจ๊ณผ๋ฅผ ์ง์ ํ ์ ์๋ค. (* list-style-type : ํ๋กํผํฐ๋ก ์ ์ ํ์)
* <ol> ํ๊ทธ ๋ด์ type attribution์ ํ์ฉํ์ฌ ๋ค์ํ ํจ๊ณผ๋ฅผ ์ง์ ํ ์ ์๋ค.
· input์ ๋ฐ๋ Form Tag
- <form> ์ ์ฒด ์ ๋ ฅ ํ์ด์ง </form>
* ์ฌ์ฉ์๋ก๋ถํฐ ์ ๋ ฅ ๋ฐ์ ๊ฐ๊ฐ์ ์ ๋ณด๋ <input> ํ๊ทธ์ type ์์ฑ์ผ๋ก ์ง์
CSS
(Cascading Style Sheets)
HTML ๋ฌธ์๋ฅผ ์๊ฐ์ ์ผ๋ก ๊พธ๋ฏธ๋ ๊ธฐ๋ฅ์ ์ง์คํ๋ ๊ธฐ์
- HTML ๋ฌธ์ ์์ <style> ... </style> ํ๊ทธ๋ฅผ ์์ฑํ๋ค.
- <style> ํ๊ทธ ๋ด์ CSS ์ฝ๋๋ฅผ ์ฝ์ ํ๋ค.
(* ์ด๋ค ํ๊ทธ์ ์ด๋ค ํจ๊ณผ๋ฅผ ์ ์ฉํ ๊ฒ์ธ๊ฐ?)
- ํจ๊ณผ๋ ์์ฑ(property)๊ณผ ๊ฐ(value)์ผ๋ก ๊ตฌ์ฑ๋๋ค.
(์์ฑ๊ณผ ๊ฐ์ ์ฝ๋ก (:)์ผ๋ก ๊ตฌ๋ถ๋๊ณ , 1๊ฐ์ ํจ๊ณผ ๋์๋ ์ธ๋ฏธ์ฝ๋ก (;) ํ๊ธฐ๋ฅผ ํด์ผํ๋ค.)
- ํน์ ํ๊ทธ์๋ง ํจ๊ณผ๋ฅผ ์ง์ ํ๊ณ ์ ํ ๋, ํ๊ทธ์ id ๋๋ class ๊ฐ์ ์ง์ ํ์ฌ ์ด์ฉํ๋ค.
1. id๋ก ์ ์ฉ ๋์ ์ง์ ํ๊ธฐ
- ๋์ ์ง์ ํ๋ ๋ฐฉ๋ฒ: # ๋ค์ id๋ช ์ ๋ ฅ
2. class๋ก ์ ์ฉ ๋์ ์ง์ ํ๊ธฐ
→ ๋์ผํ ํจ๊ณผ๋ฅผ ์ฌ๋ฌ ํ๊ทธ์ ํ๋ฒ์ ์ง์ ํ ๋ ํ์ฉ ๊ฐ๋ฅ
- ๋์ ์ง์ ํ๋ ๋ฐฉ๋ฒ: . ๋ค์ class๋ช ์ ๋ ฅ
์ฝ๋ํ๋ ์ Java ์น ๊ฐ๋ฐ ์ฒดํ๋จ ํ๋ ์ค 'Spring Boot ์น ๊ฐ๋ฐ ์
๋ฌธ' ์ด๋ฌ๋ ๊ฐ์๋ฅผ ๋ฃ๊ณ ์์ฑํ์์ต๋๋ค :)
์ฝ๋ํ๋ ์ URL: https://www.codepresso.kr/
ํ๋ฆฌ๋ฏธ์ IT ๊ต์ก ์๋น์ค - ์ฝ๋ํ๋ ์
www.codepresso.kr
'๐ ๊ธฐํ > ์ฝ๋ํ๋ ์ ์ฒดํ๋จ_BE' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [SQL] ๋ฐ์ดํฐ๋ฒ ์ด์ค์ Workbench ์ฌ์ฉ (0) | 2022.02.03 |
|---|---|
| [Spring Boot] ์ปจํธ๋กค๋ฌ์ REST API (0) | 2022.01.29 |
| Clean Control Structure | Refactoring (0) | 2022.01.24 |
| Clean Comment | Formatting (0) | 2022.01.24 |
| Clean Method (0) | 2022.01.24 |
