HTML 및 CSS가 포함된 DEV 로고
먼저 다음 코드가 포함된 HTML 파일을 만듭니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>DEV logo</title>
</head>
<body>
<main>
<p>DEV</p>
</main>
</body>
</html>
여기에서는 웹 페이지에 "DEV"가 인쇄됩니다.
다음으로 style.css(이전에 "style.css"를 연결함)라는 파일을 만들고 몇 가지 속성을 추가하여 텍스트를 구성해야 합니다.
먼저 자동으로 추가된 여백을 모두 제거해야 합니다. 코드가 섞일 수 있기 때문입니다.
*{
margin: 0;
}
이제 텍스트 자체에 대해 작업할 수 있습니다. font-weight 연산자로 두껍게 만들고, font-size 연산자로 텍스트를 더 크게 만들고, DEV 로고 스타일과 유사한 글꼴 패밀리를 찾았습니다. 그것도:
p{
font-family: 'Trebuchet MS';
font-weight: 900;
font-size: 50px;
}
그런 다음 다음 코드를 사용하여 텍스트 주위에 둥근 상자를 넣을 수 있습니다.
p{
border: 5px solid black;
border-radius: 10px;
background-color: black;
color: white;
}
마지막으로 화면 중앙에 로고를 넣을 수 있습니다.
body {
text-align: center;
}
main{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
따라서 전체 style.css는 다음과 같습니다.
*{
margin: 0;
}
body {
text-align: center;
}
main{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
p {
font-family: 'Trebuchet MS';
font-weight: 900;
font-size: 50px;
padding: 21px 5px;
border: 5px solid black;
border-radius: 10px;
background-color: black;
color: white;
}
완성된 DEV 로고는 다음과 같습니다.
Reference
이 문제에 관하여(HTML 및 CSS가 포함된 DEV 로고), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sbstyn/dev-logo-with-html-and-css-4jc6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
