더보기
어제는 정말 정신이 하나도... 없었다...
그래서 다른 팀원분들이 이것저것 더 찾아보고 수정하고 뭔가 맡아서 하시는데
서버가 하도 끊겨서 흐름을,,, 모르겠는 것,,,
하여튼 그래서 오늘도 뭘 할까 잠깐 방황하다 그래프로 능력치를 나타낼 수 있을 그런 페이지를 하나 만들었다
그 전 페이지를 조금씩 손봐가며 수정했기 때문에 그렇게 오래 걸리진 않았다.
오늘 만든 것은 그래프 페이지!
오늘은
배치
가 나를 괴롭혔다...
... 강의를 다시 들어야 될 것 같다
오늘은 meter 태그를 사용했다. progress 태그도 보였지만
진행 상황을 만드는 것은 아니니 패쓰하고
meter태그를 사용해
<p>
<meter
class="meter-size"
min="0"
max="100"
low="30"
high="90"
optimum="60"
value="10"
></meter>
</p>
p태그들로 감싸 만들었다. (div로 감싸면 레이아웃이 이상해지는 것 같아 포기)
그리고 뭔가 심심해 보여서 그래프 오른쪽에 말풍선을 달고, hover 효과를 주어
새로운 텍스트가 보이게끔 만들고 싶었다.
그런데 보여야 하는 텍스트 배치에 문제가 있었다.
내 노트북을 기준으로 일단 대충 만들어봤는데
px로 지정한 나머지 다른 팀원들 컴퓨터에선 이상하게 보였던 모양이었다.
px대신 %로 일단 해결.
hover는 조금 더 부드럽게 보이기 위해
opacity: 0;
transition: all ease 0.5s;
효과를 사용했다.
더보기


그래서 나온 결과물
레이아웃 공부를 더 해야할 것 같다...
'HTML' 카테고리의 다른 글
html 기본 문법 정리, 시맨틱 태그 (0) | 2024.04.19 |
---|