[코딩애플 html/css] 11강: position과 좌표 레이아웃 만들기

insidepixce 2023. 6. 28. 15:48

2023. 6. 28. 15:48

728x90

오눌 배울 것 : Position 속성과 좌표 속성 만들기

.tstory {
  /* 버튼 스타일 정의 */
  background-color: hsl(307, 79%, 72%);
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  border-radius: 5px;
  text-align: center;
  position: absolute;
  top: 50%; /* 수정: 40% -> 50% */
  left: 50%;
  transform: translate(-50%, -50%);

Position

이용하면 좌표 이동이 가능하다
Relative: 내가 원래 있던 자리를 기준으로
fixed : 현재 위치를 기준점으로 두는것 (현재 뷰포트)
fixed : 상단에 고정
absolute : 내 부모가 기준점이 된다
공중에 뜬다고 생각할 수 있다

좌표 이동을 하고 싶으면 여기서 띄운다

bottom : 100px;
left: 100px

과제하기

사진 추가해서 위치 맞추기

.sub-image{
    width: 60%;
    height: 30%;
    position: absolute;
    top: 30%;
    left: 20%;

  }

<meta charset="UTF-8">
        <title>Home</title>
        <link href="css/main.css" rel="stylesheet">
    </head>
    <body>
        <div class="main-background">
            <h4 class="main-title">
                Our lifes<br>
                are<br>
                beautiful
            </h4>
            <P class="main-content"> everyday with you must be beatiful <br> the world's not perfect but it's not that bad <br>
            if we got each other that's all we have<br> i'll be your lover and i'll hold your hand <br> you should know i'll be there for you </P>
            <a href="https://insidepixce.tistory.com" class="tstory">do anything</a>
            <image src="source/kitchyroom.png" class="sub-image"></image>
            
            </div>
        </div>
    </body>
</html>

이것도 이것 나름대로 예쁘기는 한데, 우리가 원한 그림은 이게 아니자나!

.main-title{
    color : black;
    font: size 50px;
    font-weight: bold;
    text-align: center;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    Position: relative;
    font-size: 50px;
    z-index: 1;

}

.tstory {
  /* 버튼 스타일 정의 */
  background-color: hsl(307, 79%, 72%);
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  border-radius: 5px;
  text-align: center;
  position: absolute;
  top: 50%; /* 수정: 40% -> 50% */
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 230px;
  z-index: 1;
  }
  
  .tstory:hover,
  .tstory:focus {
    background-color: #540430;
  }

  .main-content {
    text-align: center;
    font-size: 20px;
    margin: auto;
    margin-top: 320px;
    z-index:1;
}

  .sub-image{
    width: 60%;
    height: 30%;
    position: absolute;
    top: 30%;
    left: 20%;
    z-index:0;

  }

이렇게 z-index를 줬는데도

쓸 거 없어서 뭐넣지 뭐넣지 고민하다가 넣은 main-content가 가려진다!

이를 해결하기 위해서는 sub-image의 z-index 값을 0에서 1 이상으로 올려주면 된다는 이야기가 있어서 이렇게 바꿔보았는데도 그대로 !

.sub-image{
    width: 60%;
    height: 30%;
    position: absolute;
    top: 30%;
    left: 20%;
    z-index: 1;
}

그로부터 무한 구글링 시작

해결책 : .main-content 요소를 .sub-image 위로 올리려면?
💡 position: relative를 추가해야 한

→ z-index가 static 이외의 position 값 (relative, absolute, fixed, sticky)을 가진 요소에만 적용되기 때문이다.

.main-content {
    text-align: center;
    font-size: 20px;
    margin: auto;
    margin-top: 320px;
    z-index: 3;
    position:relative;
}

이렇게 설정해주니까 됐음 !

이미지가 없는 게 더 예뻐 보이는 건 왜일까?

이미지의 조화를 위해서 투명도를 설정하려다가, 좋은 방법이 떠올랐다. 바로 똑같은 사이즈의 흰색 div를 넣고 투명도를 낮추는 것이다. 사이즈 조정과 같이 해주었다

<a href="https://insidepixce.tistory.com" class="tstory">do anything</a>
            <img src="source/kitchyroom.png" class="sub-image"></image>
            <div class="brightning"> </div>

div를 추가해준 다음, css파일로 가 속성을 확인해준다

  .brightning{
    width: 60%;
    height: 60%;
    position: absolute;
    top: 20%;
    left: 20%;
    z-index:1;
    background-color: #fff;
    opacity:0.5;

  }

투명도 조절도 같이 해주었다. 원래 다른 분들은 rgba 를 사용 많이 하시던데 나는 opacity 를 사용했다. oppacity 같은 경우에는 자식 태그에까지 전부 상속되는 태그라 전체가 다 투명해질수도 있는데 나는 이 div박스 하나만 투명하게 하면 되는거라서 괜찮았다.

나름 결과물 예쁘게 잘 뽑힌 것 같다 !

css코드

.main-background {
  width: 100%;
  height: 2000px;
  background-image: url(../source/kitchyback.jpeg), url(../source/kichyback.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
 
  
}

.main-title{
  color : black;
  font-weight: bold;
  text-align: center;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  Position: relative;
  font-size: 50px;
  z-index: 1;
  height: 50%


}

.tstory {
/* 버튼 스타일 정의 */
background-color: hsl(307, 79%, 72%);
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
text-decoration: none;
font-size: 20px;
font-weight: bold;
border-radius: 5px;
text-align: center;
position: absolute;
top: 50%; /* 수정: 40% -> 50% */
left: 50%;
transform: translate(-50%, -50%);
margin-top: 100px;
z-index: 1;
}

.tstory:hover,
.tstory:focus {
  background-color: #540430;
}

.main-content {
  text-align: center;
  font-size: 20px;
  position: absolute;
  z-index:1;
  display:flex;
  align-items: center;
  justify-content: center;
  height:200px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sub-image{
  width: 80%;
  height: 60%;
  position: absolute;
  top: 10%;
  left:10%;
  max-height:70%
}

.brightning{
  width: 80%;
  height: 60%;
  position: absolute;
  top: 10%;
  left:10%;
  max-height:70%;
  background-color: white;
  opacity: 0.4; 
}

html 코드

<html>
    <head>
        <meta charset="UTF-8">
        <title>Home</title>
        <link href="css/main.css" rel="stylesheet">
    </head>
    <body>
        <div class="main-background">
            <h4 class="main-title">
                Our lifes<br>
                are<br>
                beautiful
            </h4>
            <P class="main-content"> everyday with you must be beatiful <br> the world's not perfect but it's not that bad <br>
            if we got each other that's all we have<br> i'll be your lover and i'll hold your hand <br> you should know i'll be there for you </P>
            <a href="https://insidepixce.tistory.com" class="tstory">do anything</a>
            <img src="source/kitchyroom.png" class="sub-image"></image>
            <div class="brightning"> </div>
            <div class="explain-box">
                
            </div>
            </div>
        </div>
    </body>
</html>

728x90

저작자표시 비영리 변경금지

'2023 공부한것들' 카테고리의 다른 글

[4-4] 변수 선언의 실행 시점과 변수 호이스팅 (0)	2023.06.29
[4-3] 변수 선언 (0)	2023.06.28
20230628 오전 회고 (0)	2023.06.28
[4-2] 식별자 (0)	2023.06.28
[4-1] 변수란 무엇인가? 왜 필요한가? (0)	2023.06.28

뭐든지 할 수 있어