[HTML/CSS] 100일 코딩 챌린지 - 실습(9, 10일차)

9,10일차는 과제였습니다. 화면을 보여주고 html과 css로 똑같이 구현하는 것입니다.

혼자서 만든 화면입니다,,하하하하하

<li></li> 맨왼쪽에 줄 만드는 것만 찾아봤더니, border-left라고 합니다,,

.yellow {
  color: rgb(252, 228, 206);
  border-left: 5px solid rgb(247, 209, 85);
}

이렇게 추가해줬습니다.

그리고 노란 부분에만 border가 5px 추가되면 오른쪽으로 5px 밀리는 게 되어버려서, 흰 부분에도 투명한 border-left를 추가해 5px 오른쪽으로 밀어줍니다.

li {
  margin: 14px 0;
  padding-left: 10px;
  border-left: 5px solid transparent;
}

 

또, 커서가 올라갔을 때 커서 모양만 바꾸도록 cursor: pointer;만 해줬었는데, 영상에서는 해당 글자의 색깔까지 바꾸었습니다.

a:hover,
a:active {
  background-color: rgb(250, 201, 39);
}

이렇게 하면 a 태그에 커서가 올라갔을때, 눌렸을 때 디자인을 설정할 수 있습니다.

:hover는 커서가 올라갔을 때, :active는 클릭한 순간, :focus는 클릭되고난 이후로 쭉 이 설정이 적용됩니다.

마지막으로 새 탭이 열리게 href를 쓰는 방법입니다.

    <a href="res/html-css-basics-summary.pdf" target="_blank">Download
      PDF Summary</a>

target="_blank" 를 사용하면, 링크를 클릭했을 때 현재 탭이 아닌, 새 탭이 열리면서 사이트에 접속이 가능합니다.

 

하하하 끝!