HTML
(๋ผ๋ ์ญํ )
๊ธฐ๋ณธ์ ์ผ๋ก head์ body๋ก ๊ตฌ์ฑ์ด ๋๋ค
๋ํ์ ์ธ HTML ํ๊ทธ
-- ๊ตฌ์ญ์ ๋๋๋ ํ๊ทธ --
ห <div> ๊ตฌ์ญ์ ๋๋๋ค </div>
ห <p> ๋ฌธ๋จ์ ๋๋๋ค </p>
ห <li> bullet point </li>
-- ๊ตฌ์ญ ๋ด ์ฝํ ์ธ ํ๊ทธ --
ห <h1> ์ ๋ชฉ์ ๋ํ๋ด๋ ํ๊ทธ </h1>
ห <h2> ์์ ๋ชฉ ํ๊ทธ </h2>
ห <h3> h3~h6๋ ๊ฐ์์ ์ญํ ์ด ์๋ค(๊ธ์จ ์ฌ์ด์ฆ๋ณ) </h3>
ห span ํ๊ทธ: <span style="color:red">ํน์ ๊ธ์</span>๋ฅผ ๊พธ๋ฐ ๋ ์ฌ์ฉ
ห a ํ๊ทธ: <a href="http://naver.com/"> ํ์ดํผ๋งํฌ </a>
ห image ํ๊ทธ: <img src="์ด๋ฏธ์ง ๋งํฌ ์ฝ์
" />
ห input ํ๊ทธ: <input type="text" />
ห button ํ๊ทธ: <button>๋ฒํผ์
๋๋ค</button>
ห textarea ํ๊ทธ: <textarea>text ์ ๋ ฅ!</textarea>
CSS
(๊พธ๋ฏธ๊ธฐ ์ญํ )
ห <head> ~ </head> ์์ <style> ~ </style>๋ก ๊ณต๊ฐ์ ๋ง๋ค์ด ์์ฑํ๋ค.
์๋ฅผ ๋ค์ด, mytitle์ด๋ผ๋ ํด๋์ค๋ฅผ ๊ฐ๋ฆฌํฌ ๋ .mytitle{...} ๋ผ๊ณ ์จ์ค์ผ ํจ!
์์ฃผ ์ฌ์ฉํ๋ CSS
1. ๋ฐฐ๊ฒฝ์ผ๋ก ์ด๋ฏธ์ง ์ฝ์ ํ ๋
: background-image: url("์ด๋ฏธ์ง๋งํฌ");
background-size: cover;
background-position: center;
2. ์ ์ฒด ๊ฐ์ด๋ฐ ์ ๋ ฌ
: margin: auto;
( *margin๊ณผ padding ์ฐจ์ด : margin์ ๋ฐ๊นฅ ์ฌ๋ฐฑ์, padding์ ์์ชฝ ์ฌ๋ฐฑ์ ์กฐ์ )
3. ๋ด์ฉ๋ฌผ ๊ฐ์ด๋ฐ ์ ๋ ฌ
: display: flex;
flex-direction: column; (or row)
justify-content: center;
align-items: center;
4. ๋ชจ๋ ํ๊ทธ์ ์คํ์ผ์ ์ ์ฉํ๊ณ ์ถ์ ๋
: <style>์์ * {...} ํ๋ฉด ๋จ
JavaScript
ํ๋ก๊ทธ๋๋ฐ ์ธ์ด ์ค ํ๋๋ก, ๋ธ๋ผ์ฐ์ ๊ฐ ์์๋ค์ ์ ์๋ ์ธ์ด
๊ธฐ์ด ๋ฌธ๋ฒ
1. ์๋ฃํ
- List (๋ฆฌ์คํธ ํ)
: ๋ฐฐ์ด๊ณผ ๊ฐ์ ํ์ ex. list ['๊ฐ', '์ฌ๊ณผ', ํฌ๋']
- Dictionary (๋์ ๋๋ฆฌ ํ)
: key : value๋ก ๊ตฌ์ฑ ex. {'name':'Bob', 'age':27}
2. ํจ์
: ์๋ฅผ ๋ค์ด ํ์ ์ฐฝ์ ๋์ฐ๋ ๊ธฐ๋ณธ์ ์ธ ํ์์ ์๋์ ๊ฐ๋ค
function hi(){
alert('์๋
ํ์ธ์')
}
<button onclick="hi()">์ธ์ฌ</button>
** split()์ ์ฌ์ฉํ์ฌ ์ค๊ฐ ๊ฐ๋ง ์ถ์ถํ๊ณ ์ถ์ ๋๋?
let myemail = 'abc@gmail.com'
myemail.split('@')[1].split('.')[0]→ ์ด๋ ๊ฒ ํ๊ฒ ๋๋ฉด ์ค๊ฐ์ gmail์ด๋ ๊ฐ๋ง ์ถ์ถ ๊ฐ๋ฅ
-- Tip --
* ์ฝ๋ ์ ๋ ฌ
โซ Ctrl + Alt + L
* ์ฝ์์ฐฝ ์ค๋ฐ๊ฟ
โซ Shift + Enter
* ์ฃผ์ ์ฒ๋ฆฌ
โซCtrl + / (์ฌ๋์)
'๐ ๊ธฐํ > ์คํ๋ฅดํ์ฝ๋ฉํด๋ฝ_FE' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ์น๊ฐ๋ฐ ์ข ํฉ๋ฐ | jQuery | Ajax (0) | 2021.12.23 |
|---|---|
| ํฌ๋ช ๋ก ๋ง๋ค๊ธฐ (0) | 2021.12.22 |
| [์คํ๋ฅดํ ์ฝ๋ฉํด๋ฝ ๋ฅดํ์ฆ 1๊ธฐ] 2์ฃผ์ฐจ ๋ฏธ์ (0) | 2021.11.28 |
| [์คํ๋ฅดํ ์ฝ๋ฉํด๋ฝ ๋ฅดํ์ฆ 1๊ธฐ] 1์ฃผ์ฐจ ๋ฏธ์ (2) | 2021.11.19 |
| ์ฝ๋ฉ์ฉ์ด ํด์ค๊ฐ์ ํ๊ธฐ (0) | 2021.11.18 |
