[TIL #1] 오늘의 TIL

TIL

매일매일 공부하면서 기록하는 공간이다.

아직 TIL 작성 처음 단계라서 여기에 올린 내용이 다른 곳에 올라갈 수도 있고 난잡해 보일 수도 있지만 시작하는데 의의를 두고 작성하려고 한다.

오늘 한 일

미니 프로젝트를 위해 html과 css 코딩을 하루종일 했다. 하다가 질리면 프로그래머스 코테문제나 백준풀었다ㅎㅎ

html과 css는 배워도 계속 배우는 느낌이라 오늘 깨달은 부분을 작성하려고 한다.

바로,

html에서 사진 위에 글씨 넣기

.ticket{
    position: absolute;
    z-index: -1;
    top: 50%;
    right: 30px;
}
.ticket .ticketimg{
    width: 400px;
    height: 400px;
}
.ticket:hover {
    transform: translateY(170px);
    transition: 0.5s;
    bottom: 0;
}

.ticket .ticket-text{
    position: absolute;
    top: 15%;
    left: 50%;
    font-size: 25px;
    font-weight: bolder;
    transform: translate( -50%, -50% );
}

미니 프로젝트를 하면서 hover를 사용해야하는 부분이 있어서 사진 위에 글씨가 들어가야하는데 아무리 해도 나는 글씨가 자꾸 사진 밖으로 나가는거다.

div로 이미지와 text를 일단 하나로 묶었는데, text에 class를 따로 안주었더니 이미지와 text가 같이 움직였다. 그래서 아예 이런 식으로 따로 class를 설정해주었다.

<span class ="ticket-text">깃허브</span>

span 태그로 묶었는데, p 태그로 묶었더니 예상했던대로 나오지 않았다.

<p>
 - 문단(paragraph) 텍스트 절을 기재할때 사용된다.
 - div랑 거의 같다고 보면 된다. div는 세션 나누기가 목적이고, p는 글자 표현이 목적이다.

<span>
 - 일반적으로 텍스트에 색칠, 크기, 좌우간격을 조절하는데 사용된다.

헷갈리지 않기 위해 다시 적어본다.

아래는 내가 사진에 텍스트 넣기를 성공한 모습이다!