[ํฐ์คํ ๋ฆฌ] ๋ฐ์ํ #1 ๋ณธ๋ฌธ ์๋ - ์ธ๋ค์ผ ์นดํ ๊ณ ๋ฆฌ
1. ์ธ๋ค์ผ ์นดํ ๊ณ ๋ฆฌ - HTML ์์
์๋์ ์ด๋ก ๋ธ๋ก ์ฌ์ด์ ๋ฃ์ด์ฃผ์ธ์.
์๋์ ์ด๋ก ๋ธ๋ก ์ฌ์ด์ ๋ฃ์ด์ฃผ์ธ์. </div> <div class="area_etc"> <strong class="screen_out">๊ณต์ ํ๊ธฐ ๋งํฌ</strong> <ul class="list_share"> ์๋์ ์ด๋ก ๋ธ๋ก์ ์ ์๋๋ฅผ ์ฝ๋๋ฅผ ๋ฃ์ผ์ธ์. ๋ณธ๋ฌธ์๋ ์ธ๋ค์ผ ๋ชฉ๋ก css.txt /* ์ธ๋ค์ผ ๊ด๋ จ๊ธฐ์ฌ */ @media only screen and (max-width:820px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width:820px) and (min-device-pixel-ratio: 1.5), only screen and (max-width:820px) and (min-resolution: 1.5dppx) /*์ธ๋ค์ผ ์นดํ
๊ณ ๋ฆฌ ๋ฆฌ์ฌ์ด์ง*/1. ์ธ๋ค์ผ ์นดํ
๊ณ ๋ฆฌ - HTML ์์
2. ์ธ๋ค์ผ ์นดํ
๊ณ ๋ฆฌ - CSS ์์
โป ๊ธฐ์กด ์คํจ ๋ฐฑ์
ํ ์งํํ์ธ์.
</div>
<div class="area_etc">
<strong class="screen_out">๊ณต์ ํ๊ธฐ ๋งํฌ</strong>
<ul class="list_share">
2. ์ธ๋ค์ผ ์นดํ ๊ณ ๋ฆฌ - CSS ์์
์๋์ ์ด๋ก ๋ธ๋ก์ ์ ์๋๋ฅผ ์ฝ๋๋ฅผ ๋ฃ์ผ์ธ์.
๋ณธ๋ฌธ์๋ ์ธ๋ค์ผ ๋ชฉ๋ก css.txt
/* ์ธ๋ค์ผ ๊ด๋ จ๊ธฐ์ฌ */
@media
only screen and (max-width:820px) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (max-width:820px) and (min-device-pixel-ratio: 1.5),
only screen and (max-width:820px) and (min-resolution: 1.5dppx)
/*์ธ๋ค์ผ ์นดํ ๊ณ ๋ฆฌ ๋ฆฌ์ฌ์ด์ง*/