meter 태그

어제는 정말 정신이 하나도... 없었다...

 

그래서 다른 팀원분들이 이것저것 더 찾아보고 수정하고 뭔가 맡아서 하시는데

 

서버가 하도 끊겨서 흐름을,,, 모르겠는 것,,,

 

하여튼 그래서 오늘도 뭘 할까 잠깐 방황하다 그래프로 능력치를 나타낼 수 있을 그런 페이지를 하나 만들었다

 

그 전 페이지를 조금씩 손봐가며 수정했기 때문에 그렇게 오래 걸리진 않았다.

오늘 만든 것은 그래프 페이지! 

 

오늘은

배치

가 나를 괴롭혔다...

 

... 강의를 다시 들어야 될 것 같다 

---

오늘은 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;

효과를 사용했다.

 

그래서 나온 결과물

레이아웃 공부를 더 해야할 것 같다...