웹 개발의 세계에서 초보자로서 HTML을 배우는 것은 어려운 작업처럼 보일 수 있습니다. 그러나 올바른 지침과 일부 연습을 통해 인상적인 방문 페이지를 쉽게 만드는 방법을 쉽게 배울 수 있습니다. 이 블로그에서는 웹 개발 여정을 시작하는 데 도움이 되는 두 가지 간단한 방문 페이지 코드를 논의할 것입니다.
1. 기본 방문 페이지 코드 :
<! doctype html>
<html>
<head>
<title> 내 방문 페이지 </title>
</head>
<body>
<Header>
<H1> 내 방문 페이지에 오신 것을 환영합니다 </h1>
</Header>
<section>
<H2> 나에 대해 </h2>
<p> 제 이름은 구글덕 저는 웹 개발자입니다. 저는 5 년 넘게 웹 사이트를 개발해 왔으며 사용하기 쉬운 아름답고 기능적인 웹 사이트를 만드는 데 열정적입니다. </p>
</section>
<section>
<H2> 내 기술 </h2>
<ul>
<li> html </li>
<li> css </li>
<li> JavaScript </li>
</ul>
</section>
<footer>
<P> CopyRight 2023 | 구글덕 </p>
</footer>
</body>
</html>설명:
이 코드는 헤더, 두 섹션 및 바닥 글로 구성된 기본 방문 페이지입니다. 헤더에는 방문 페이지의 제목이 포함되어 있으며 섹션에는 웹 사이트 소유자 및 기술에 대한 정보가 포함되어 있습니다. 바닥 글은 저작권 정보를 제공합니다.
핵심 단어의 역설 :
이 방문 페이지 코드는 헤더, 두 섹션 및 바닥 글을 포함하는 간단한 HTML 코드입니다. 여기에는 웹 사이트 소유자 및 기술에 대한 정보가 포함되어 있습니다.
중요 항목:
-이 코드는 헤더, 두 섹션 및 바닥 글을 포함하는 기본 방문 페이지입니다.
- 헤더에는 방문 페이지의 제목이 포함되어 있습니다.
- 섹션에는 웹 사이트 소유자 및 기술에 대한 정보가 포함되어 있습니다.
- 바닥 글은 저작권 정보를 제공합니다.
예:
프리랜서 작문 사업을위한 방문 페이지를 만들고 있다고 가정해 봅시다. 이 코드를 사용하여 작문 기술, 경험 및 연락처 정보에 대한 정보가 포함된 방문 페이지를 만들 수 있습니다.
내 방문 페이지에 오신 것을 환영합니다
나에 대해
제 이름은 구글덕이고, 저는 웹 개발자입니다. 저는 5년 이상의 경력을 가지고 있으며, 사용하기 쉬운 아름답고 기능적인 웹 사이트를 만드는 데 열정적입니다.
내 기술
- HTML
- CSS
- JavaScript
이 예에서는 list-style 속성을 사용하여 ul 요소에서 기본 글머리 기호를 제거합니다. 그런 다음 :before 의사 요소를 사용하여 content 속성을 사용하여 원형 글머리 기호를 만들고 border 속성으로 스타일을 지정합니다. 또한 position 속성을 사용하여 글머리 기호를 배치하고 글머리 기호를 위한 공간을 만들기 위해 li 요소에 왼쪽 패딩을 설정합니다. 결과는 각 목록 항목 주위에 글머리 기호 테두리입니다.
2. 이미지가 포함 된 방문 페이지 코드 :
<! doctype html>
<html>
<head>
<title> 내 방문 페이지 </title>
</head>
<body>
<Header>
<H1> 내 방문 페이지에 오신 것을 환영합니다 </h1>
</header>
<section>
<img src = "https://source.unsplash.com/1000x1000/?landing+page+gray"alt = "myimage">
<H2> 나에 대해 </h2>
<p> 제 이름은 Jane이고 그래픽 디자이너입니다. 저는 5 년 넘게 웹 사이트를 디자인 해 왔으며 탐색하기 쉬운 아름답고 기능적인 웹 사이트를 만드는 데 열정적입니다. </p>
</section>
<section>
<H2> 내 기술 </h2>
<ul>
<li> html </li>
<li> css </li>
<li> JavaScript </li>
<li> Photoshop </li>
<li> 일러스트 레이터 </li>
</ul>
</section>
<footer>
<P> 저작권 2023 | 구글덕 </p>
</footer>
</body>
</html>
설명:
이 코드는 기본 방문 페이지 코드와 유사하지만 첫 번째 섹션에 이미지가 추가되었습니다. 이미지는 책상에 노트북이 있으며 웹 사이트 소유자에 대한 정보가 동반됩니다. 나머지 섹션은 기본 방문 페이지 코드와 동일합니다.
핵심 단어의 역설 :
이 방문 페이지 코드는 기본 코드와 유사하지만 첫 번째 섹션에는 이미지가 포함되어 있습니다. 페이지의 나머지 부분은 기본 코드와 동일합니다.
중요 항목:
-이 코드는 기본 방문 페이지 코드와 유사하지만 첫 번째 섹션에 이미지가 추가되었습니다.
- 이미지에는 웹 사이트 소유자에 대한 정보가 수반됩니다.
- 나머지 섹션은 기본 방문 페이지 코드와 동일합니다.
예:
사진 사업을위한 방문 페이지를 만들고 있다고 가정해 봅시다. 이 코드를 사용하여 사진 경험 및 기술에 대한 정보와 함께 작업의 멋진 이미지가 포함된 방문 페이지를 만들 수 있습니다.
결론:
HTML을 배우는 것은 처음에는 어려울 수 있지만 어떤 연습을하더라도 인상적인 방문 페이지를 즉시 만들 수 있습니다. 이 두 가지 간단한 방문 페이지 코드는 시작하는 좋은 방법이며 HTML 기술을 구축하는 데 도움이 됩니다. 독특하고 시선을 사로잡는 방문 페이지를 만들기 위해 다양한 코드를 계속 연습하고 실험해야 합니다.
내 방문 페이지에 오신 것을 환영합니다
나에 대해
제 이름은 Jane이고 그래픽 디자이너입니다. 저는 5 년 넘게 웹 사이트를 디자인 해 왔으며 탐색하기 쉬운 아름답고 기능적인 웹 사이트를 만드는 데 열정적입니다.
내 기술
- html
- css
- JavaScript
- Photoshop
- 일러스트 레이터
출처 및 참고자료 :
-W3 Schools (https://www.w3schools.com/)
-Mozilla Developer Network (https://developer.mozilla.org/en-us/)
'구글덕후의 HTML' 카테고리의 다른 글
| 선택 안됨 구글덕후의 HTML [6] form양식 샘플 코드 2 (0) | 2023.03.13 |
|---|---|
| 구글덕후의 HTML [5] form양식, label, input (0) | 2023.03.12 |
| 구글덕후의 HTML [4] 심플랜딩페이지 / 구글 사이트 도구 (0) | 2023.03.11 |
| 구글덕후의 HTML [2] 테이블 (0) | 2023.03.06 |
| 구글덕후의 HTML [1] 기본사항 (0) | 2023.03.05 |