[TestDome] Avatar (HTML/CSS)

PROGRAMMING/Web

by koharin 2021. 1. 9. 23:54

728x90

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Avatar</title>
    <style>
      /* Write your CSS solution here (do not edit the surrounding HTML) */
      img{
        border-radius: 50%;
        width: 150px;
        height: 150px;
        border: 2px solid #808080;
      }
    </style>
  </head>
  <body>
    <img class="avatar" src="https://goo.gl/khGCrk" alt="avatar" />
  </body>
</html>

1. rounded border

border-radius: 50% 으로 설정한다.

2. border style: solid border with 2px, border color: gray

border 속성으로 2px과 solid로, 그리고 색상은 gray에 해당되는 hex 값 #808080을 준다.

3. width와 height는 모두 150px

width와 height 속성으로 사이즈를 150px으로 준다.

728x90

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

'PROGRAMMING > Web' 카테고리의 다른 글

[Bootstrap] Bootstrap 다운로드 & 설치 (feat. VSCode) (0)	2021.01.29
[HTML] Semantic Web(시맨틱 웹) (0)	2021.01.28
[TestDome] HTML/CSS and JavaScript Test Questions (0)	2021.01.10
[TestDome] Remove Property (JavaScript) (0)	2021.01.10
[TestDome] Ensure (JavaScript) (0)	2021.01.09