HTML CSS(소스 코드)를 사용하여 헤더 만들기
단순 헤더의 HTML 구조:-
<!DOCTYPE htaml>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Header - CodeWith Random</title>
</head>
<body>
<header class="site-header">
<div class="site-identity">
<h1><a href="#">CodeWith Random</a></h1>
</div>
<nav class="site-navigation">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>
먼저 html 코드를 작성한 다음 스타일을 지정하여 div, h1, ul과 같은 본문 태그에 일부 태그를 사용합니다. li, a, h1 그리고 우리가 형편없는 디자인을 얻은 후에 html 상용구에 css 파일을 연결하는 것을 잊지 마세요. 하지만 그것은 필수 시작입니다. 분명하길 바랍니다... 스타일링을 시작하겠습니다...
HTML 코드 헤더 출력
검토 - 해당 없음
홈페이지에서 미리보기 가능
click here
단순 헤더 스타일 지정:-
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
body {
font-family: "Open Sans", sans-serif;
margin: 0;
}
a {
text-decoration: none;
color: #000;
}
a:hover {
color: rgb(179, 179, 179);
}
.site-header {
border-bottom: 1px solid #ccc;
padding: 0.5em 1em;
display: flex;
justify-content: space-between;
}
.site-identity h1 {
font-size: 1.5em;
margin: 0.6em 0;
display: inline-block;
}
.site-navigation ul,
.site-navigation li {
margin: 0;
padding: 0;
}
.site-navigation li {
display: inline-block;
margin: 1.4em 1em 1em 1em;
}
헤더 프로젝트를 생성하고 헤더를 디자인하기 위한 모든 css입니다.
html reset 또는 family-font로 스타터 스타일 지정을 수행한 다음 색상 또는 텍스트 장식을 제공합니다.
없음 tag now we style our header by giving padding, border-bottom, flex, and space-between change the font size of header links or margin and inline-block if you want to customize more so try and our goal is to create a good looking header in just 60 lines of code or also you need to make responsive.
Output CSS Code header
review - N/APreview available on the website
click here
이것은 html css를 사용한 헤더의 최종 출력입니다. 이 기사에서 우리는 이 놀라운 헤더 프로젝트를 만들고 적은 코드로 디자인하는 것을 정말 좋아합니다.
구글 폰트는 어떻게 사용하나요?
미리 설치된 글꼴이 많지만 충분하지 않아서 멋진 모양을 위해 Google 글꼴을 사용합니다… 그리고 이 프로젝트에서는 open sans를 사용하지만 Google 글꼴에 대해 배우기 위해 압축된 open sans를 사용합니다.
1단계 -> Google, Bing, Safari 등과 같은 검색 엔진에서 Google 글꼴을 검색합니다.
2단계 -> 첫 번째 링크인 Google 글꼴을 클릭합니다.
3단계 -> Google 글꼴 사이트가 열리면 위의 검색창에서 작업할 글꼴을 검색합니다.
4단계 -> 그런 다음 글꼴을 클릭하면 사이트에 선택한 글꼴을 추가할 수 있는 사이드바가 나타납니다.
옵션 -> 1. 주어진 cdn 링크를 head 태그의 html 파일에 연결
2.폰트 패밀리 속성에 있는 코드보다 url을 사용하여 스타일시트로 가져오기
5단계 -> 코드 저장보다 글꼴 스타일을 추가할 클래스 또는 ID를 선택합니다.
출력-> 글꼴이 변경됨
이 게시물을 좋아하고 즐기시기 바랍니다. 우리가 실수를 한 경우 댓글을 달아 사용자에게도 도움이 될 수 있도록 하십시오. 읽어 주셔서 감사합니다.
일부 관련 주제 -
create-header-html-create-header-html-css/
otp-input-field-html-css-otp-input-using-html-css-javascript
multi-step-form-multi-step-form-html-css-javascript-multi-step-form
hamburger-menu-hamburger-menu-using-html-css-javascript/
Reference
이 문제에 관하여(HTML CSS(소스 코드)를 사용하여 헤더 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codingtitan6/create-header-using-html-css-source-code-jm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
