๋ณ๊ฒฝ ์
ํ์ฌ ํฐ์คํ ๋ฆฌ Book Club ์คํจ ์ค์์ ๋ถ๋ฆฌ๋ทฐ ๋ฆฌ์คํธ ํ์ ์ ์ฌ์ฉํ๊ณ ์๋ค. ์ ์ฌ๊ฐํ ์ฌ์ง์ ์ธ๋ค์ผ๋ก ์ง์ ํ๋ฉด ์์ชฝ์ผ๋ก ์ ๋ ฌ๋์ด ๋ณด๊ธฐ ์ข์ง ์์์, ์ง์ฌ๊ฐํ ๋ชจ์์ ์ ์งํ๋ ์ธ๋ค์ผ์ Y ์ขํ๊ฐ ๊ฐ์ด๋ฐ ์ค๋๋ก ์ ๋ ฌํ๊ณ ์ถ์๋ค.
๋ณ๊ฒฝํ๋ ๋ถ๋ถ
์ฌ๋ฌ ๊ธ๋ค์ ์ฝ์ด๋ณด๋ CSS ํ ์ค๋ง ๋ฐ๊พธ์ด๋ ์ฝ๊ฒ ์กฐ์ ํ ์ ์๋ค๋ ์ฌ์ค์ ์๊ฒ ๋์๋ค. ์ค์ > ์คํจ ํธ์ง > CSS์ ๋ค์ด๊ฐ์ Ctr+F(command+F)๋ก .post-item .thum img์ ํด๋นํ๋ ์ค์ ์ฐพ๋๋ค.
๋์ ๊ฒฝ์ฐ๋ transform: translateY(-25%); ๋ถ๋ถ์ ์์ ํด์ผ ํ๋ค. ์๋ ๊ฐ์ transform: translateY(-25%);๋ก ๋์ด์๋๋ฐ -20์ผ๋ก ๋ณ๊ฒฝํ๋ ๋ด ๋ง์์ ๋๋ ๊ฐ์ด๋ฐ ์์น์ ์ ๋๋ก ์กฐ์ ๋์๋ค. ์ถ๊ฐ๋ก width๋ 100%์์ inherit์ผ๋ก ๋ณ๊ฒฝํ๋ค.
.post-item .thum img {
width: inherit;
height: auto;
transform: translateY(-25%);
-webkit-transform: translateY(-20%);
-ms-transform: translateY(-25%);
}
๋ณ๊ฒฝ ํ
๋ณ๊ฒฝ๋ ๋ชจ์ต์ ์๋์ ๊ฐ๋ค. ํด๋น CSS ๋ถ๋ถ์ %๋ฅผ ์กฐ์ ํ๋ฉด์ ๋ณธ์ธ์ด ์ํ๋ ์์น๋ก ์ค๋๋ก ์์ ํ ์ ์๋ค.
์ธ๋ค์ผ ์ ์ฌ๊ฐํ์ผ๋ก ๋ณ๊ฒฝํ๋ ๋ฐฉ๋ฒ
๋ถํด๋ฝ ํ ๋ง์ ๋ด๋ถ ๋ฆฌ์คํธ๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ๋ถ๋ฆฌ๋ทฐ ๋ฆฌ์คํธ์์ ์ ์ฌ๊ฐํ ์ธ๋ค์ผ์ ๋ง๋๋ ๋ฐฉ๋ฒ๋ ์์๋ค. .post-item .thum ๋ถ๋ถ์ padding-bottom์ 100%์ผ๋ก ๋ณ๊ฒฝํ๊ณ , .post-item .thum img ๋ถ๋ถ์์ -webkit-transform: translateY์ -25%์์ -5%๋ก ๋ณ๊ฒฝํ๊ณ , -webkit-transform: translateX(0%) ํ ์ค์ ์ถ๊ฐ๋ฅผ ํด์ฃผ๋ฉด ๋๋ค. ์ฐธ๊ณ ํ ๊ธ์ ์๋์ ์ฒจ๋ถํด ๋์๋ค.
.post-item .thum {
position: relative;
display: block;
overflow: hidden;
width: 100%;
height: 0;
margin-bottom: 5px;
padding-bottom: 100%;
background-color: #f8f8f8;
}
.post-item .thum img {
width: inherit;
height: auto;
transform: translateY(-25%);
-webkit-transform: translateY(-5%);
-ms-transform: translateY(-25%);
-webkit-transform: translateX(0%);
}
'๊ธฐํ+๐ผ > Web' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Font generator (0) | 2024.01.15 |
---|---|
[HTML] ํฐ์คํ ๋ฆฌ ๊ธ์ ์ค๋์ค ์ฌ์๋ฐ ๋ฃ๊ธฐ (0) | 2023.11.01 |
[HTML] ํฐ์คํ ๋ฆฌ Mac ์ฝ๋ ์ ์ฉ ํ, ๋ถํด๋ฝ ํ ๋ง ๊ฒ์ ๋ฒํผ ๋จนํต ํด๊ฒฐ (2) | 2023.10.30 |
[Chrome] ํฌ๋กฌ ํ ๋ง ๋ชจ์ (๋ด ์ทจํฅ) (0) | 2023.10.05 |
[CSS] ํฐ์คํ ๋ฆฌ ์คํฌ๋กค๋ฐ ์คํ์ผ ๋ณ๊ฒฝ (0) | 2023.09.13 |