๐Ÿ’ป [HTML/CSS] block ์ฒ˜๋ฆฌ, ํฐํŠธ ์‚ฝ์ž…, Favicon, alert ๋ฉ”์„ธ์ง€

all8zuuยท2022๋…„ 5์›” 19์ผ
1

HTML/CSS

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

ํ‚น๋‚ญ์ฝฉ ๋ฆฌ๋งˆ์ธ๋“œ


# html
<a class=""></a> 
# css
display:block;

a ํƒœ๊ทธ๋Š” ๊ฐ์ฒด๋กœ ์ธ์‹๋˜์ง€ ์•Š์•„ css ์—์„œ display:block; ์ฒ˜๋ฆฌ๋ฅผ ํ•ด์ค˜์•ผ padding-top, bottom / margin-top, bottom ์„ ์ธ์‹


# css
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Julius+Sans+One&family=Rubik&display=swap');
font-family: 'Julius Sans One', sans-serif;

css ์—์„œ @import ์‚ฝ์ž…, ํ•ด๋‹น class์— font-family ์‚ฝ์ž…ํ•˜๋ฉด ํฐํŠธ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ


Favicon-generator.org ํŽ˜์ด์ง€ ๋งํฌ

- Favicon ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ํŽ˜์ด์ง€

- ํŒŒ์ผ์„ ํƒ ํ›„ Create Favicon ํด๋ฆญํ•˜๋ฉด ico.zip download

- ์›นํŽ˜์ด์ง€์— ๋œจ๋Š” ์ฝ”๋“œ ๋ณต์‚ฌํ•ด์„œ .html head ๋ถ€๋ถ„์— ์‚ฝ์ž…


onClick="alert('๋ฉ”์„ธ์ง€๊ฐ€ ์ถœ๋ ฅ๋ฉ๋‹ˆ๋‹ค')

- button, a ๋“ฑ์— ์ž‘์„ฑ ์‹œ ํด๋ฆญ๊ฐ€๋Šฅํ•˜๊ณ  ํด๋ฆญํ•˜๋ฉด alert ๋ฉ”์„ธ์ง€ ์ถœ๋ ฅ

- ๋กœ๊ทธ์ธ ์‹คํŒจ ํ˜น์€ ์˜ค๋ฅ˜ ๋“ฑ์„ ๋„์›Œ์„œ ์•Œ๋ ค์ค„ ๋•Œ ๋„์›€์ด ๋จ

profile
์ ˆ๊ฑฐ์šด ์ธ์ƒ

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