단일 페이지 프로필 웹사이트 만들기.

2853 단어 csstutorialwebdevbeginners
전문적이고 단순해 보이는 무료 단일 페이지 프로필 웹사이트를 만드는 방법은 다음과 같습니다.

카드 디자인이 있는 단일 페이지 웹사이트인 css profile cards을 사용하여 구축할 것입니다.

기본 HTML 구조 만들기



먼저 index.html과 index.css라는 두 개의 파일을 만듭니다. 파일을 생성한 후 선택한 코드 편집기를 사용하여 파일을 엽니다.

이제 기본 html 형식을 만듭니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css">
    <title></title>
  </head>
  <body>
</body>
</html>


프로필 카드에는 프로필 이미지, 약력, 이름 및 버튼의 네 가지 항목이 포함됩니다.

따라서 새 컨테이너 'cont'를 만들고 그 안에 원하는 나머지 항목을 입력합니다.

<div class="cont">
      <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/877285/37538b37-77d4-46a2-b7e0-6e3125cbb3e8.png" alt="">
      <h1>Your Name</h1>
      <p>Web Designer</p>
      <p>Hello, I'm a web Designer.
Over 2 years of experience.</p>
      <button type="button" name="button">Button Text</button>
    </div>


이제 html이 완료되었으므로 이제 스타일을 추가할 수 있습니다.

프로필 카드에 스타일 추가



먼저 전신의 기본 스타일링에 들어갑니다.

body{
  margin: 0;
  padding: 0;
  background-color: #000000;
}


그런 다음 간단한 스타일로 'cont' div의 스타일을 지정합니다.

.cont{
  width: 255px;
  background-color: #fff;
  text-align: center;
  padding: 40px;
  margin: auto;
  margin-top: 5%;
  font-family: sans-serif;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  overflow: hidden;
}


프로필 카드는 검은색 배경에 흰색으로 칠해져 있어 더 보기 좋습니다.

이제 이미지의 스타일을 지정할 수 있습니다. 이미지는 둥근 이미지가 됩니다.

img{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
}


그 다음에는 h1 및 p 태그가 있습니다.

h1{
  font-size: 25px;
  color: #292525;
}
p{
  font-size: 18px;
  color: #555;
  overflow: hidden;
  width: 255px;
}


다른 모든 스타일 지정이 완료되면 버튼의 스타일을 지정하고 호버 효과를 추가할 수 있습니다.

button{
  background: #3598dc;
  border: none;
  width: 50%;
  height: 40px;
  color: #fff;
  border-radius: 3px;
  font-size: 13px;
  outline: none;
}
button:hover{
  background-color:#fff;
  border:2px solid #3598dc;
  color:Black;
  width: 50%;
  font-size: 14px;
}


이제 프로필 카드 웹사이트가 준비되었습니다. GitHub 페이지에서 쉽게 호스팅하고 친구들과 공유할 수 있습니다.
Entendendo 유닉스 파이프
React Native에서 라이브러리를 사용하지 않고 테두리 만 연설 거품 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage