css-반응형 웹3

📆 2022-5-25

-학습내용-

full size web

🍕 full size web

@charset "utf-8";

html{
    font-family: "Open Sans", sans-serif;
    /* background-image: url("../images/img5.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center; */
    /* background-position: x-position y-position 
        :: left, center, right,%    :: top, center, bottom, % */
    background: url("../images/img5.jpg") no-repeat center center fixed;
    background-size: cover;   
}

#content{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
h1{
    color:#fff;
    font-size: 8em; /*16px x 8 */
    font-style:italic;
    text-shadow: 2px 2px 3px #222, 2px 2px 3px #000 ;
    text-transform: uppercase;
}
@media (max-width:700px){
    html{
        background: url("../images/img4.jpg") no-repeat center center fixed;
        background-size: cover; 
    }
    h1{
        font-size:4em;
    }
}

🥒html{
background로 따로 지정을 하지 않아도 한번에 지정할 수 있다

background-attachment: fixed;

배경을 뷰포트에 대해 고정합니다. 요소에 스크롤이 존재해도 배경은 함께 스크롤되지 않습니다. 이 값은 background-clip: text와 호환되지 않습니다.

background-position: center center;

배경이미지 정중앙
(right top = 오른쪽 상단)

background-size: cover

지정한 요소를 다 덮도록 배경이미지를 확대/축소


🍓content{

transform: translate(-50%, -50%);

요소를 x축 -50% y축 -50% 이동

---

문제사항

😀

---

해결방안

😊

---

학습소감

반응형 웹은 이제 어느정도 외워져서 안보고도(조금 봄) 만들 수 있다 !