정구리의 우주정복

[HTML/CSS] position 정복하기 본문

STUDY/K-DIGITAL

[HTML/CSS] position 정복하기

Jungry_ 2022. 8. 27. 22:15
반응형

오늘의 결과물

 

또 정복당하는건 나였고 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./quiz05_answer.css">
</head>
<body>
    <form action="" class="search">
        <h1>What are you looking for</h1>
        <input type="text" placeholder="Type . . ">
        <input type="submit" value="Search">
    </form>
</body>
</html>

html 은 정말 별거 없다 

그냥 fom 태그 안에 h1 이랑 Input 2개 넣어주면 끝 !

 

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

body{
    font-family: 'Montserrat', sans-serif;
    margin : 0;
    line-height: 1.5em;

    /* background-image: url("./images/snow-photo.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed; */
    background : url("./images/snow-photo.jpg") no-repeat center center fixed;
}

body::before{ /* 가상 요소*/
    content:''; /*content 가 무조건 있어야한다 */
    background-color: rgba(0, 0, 0, 0.596);
    width:100%;
    height:100%;
    position: absolute; /*부모 위에 갖다붙어버리기 (위치를 지정해줌)*/
    top:0; /*왼쪽 위로 갖다붙음*/
    left:0;
}
.search{
    position:absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%,-50%);
}
.search h1{
    color : #fff;
    margin-bottom:30px;
    font-size: 38px;
    font-weight: 300;
}
.search input{
    padding:20px;
    font-style: 18px;
    border: none;
    box-sizing: border-box;
}
.search input[type=text]{
    width:350px;
    border-radius: 40px 0 0 40px;
    margin-right: -6px;
}
.search input[type=submit]{
    width: 150px;
    background-color: orange;
    border-radius: 0 40px 40px 0;
    color:#fff;
    cursor:pointer;
}
.search input[type=submit]:hover{ /*가상 클래스*/
    background-color: darkgoldenrod;
}
.search input[type=text]::placeholder{
    font-size:20px;
    font-style: italic;
    padding-left: 10px;
}

 

body 에는 font 와 background 설정을 해준다.

 

body에는 ::before을 준다 이 친구는 가상요소인데 이걸 사용해서 사진에 필터를 씌워줄거다 (filter 도 있지만 오늘은 before 을 사용할거읨)

무조건 안에 content 를 넣어주고 시작해야한다 content 안에 내용이 없어도 상관없음 그리고 내가 주고싶어하는 요소들을 주면 된다 

position :absolute 를 줘 뷰포트를 부모로 지정한다 그리고 bgc 와 등등 조건을 주면 됨 

 

.search 는 중앙정렬을 위해 position:absolute를 주고 중앙정렬의 공식과 마찬가지인 

position:absolute;
top : 50%;
left : 50%;
transform: translate(-50%,-50%);

조건을 넣어준다 부모가 뷰포트로 되어있기 때문에 전체 화면에 중앙에 위치하게 된다 

 

이후 h1에 기타등등 속성을 준다 (중요한게 아니라 설명은 하지 않겠음)

 

.search input[type=text]{
    width:350px;
    border-radius: 40px 0 0 40px;
    margin-right: -6px;
}
.search input[type=submit]{
    width: 150px;
    background-color: orange;
    border-radius: 0 40px 40px 0;
    color:#fff;
    cursor:pointer;
}

 

텍스트 입력창이랑 submit 버튼에 속성을 주는것이다 

input[type=text] 이런식으로 사용해줄 수 있다 

margin-right : -6px 을 줘서 두개를 슥 겹쳐주자 

 

.search input[type=text]::placeholder{
    font-size:20px;
    font-style: italic;
    padding-left: 10px;
}

placeholder 에 속성을 주고 싶을때 사용하는 방법이다 

요소를 지정해준 뒤 ::placeholder 을 사용해주면 된다 

반응형

'STUDY > K-DIGITAL' 카테고리의 다른 글

[HTML/CSS] 로그인폼 만들기 , fontawesome 사용해보기  (0) 2022.08.27
[HTML/CSS] display:flex 정복하기 (2)  (0) 2022.08.27
[HTML/CSS] display:flex 정복하기 , media query 사용해보기  (0) 2022.08.27
[HTML/CSS] float 정복하기  (0) 2022.08.23
[HTML/CSS] position 정복하기  (0) 2022.08.23
'STUDY/K-DIGITAL' Related Articles more
Comments