<![CDATA[
<div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1ZZKD/825c11a9530357f77ab1b5ea717707af65e1c293" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1ZZKD/825c11a9530357f77ab1b5ea717707af65e1c293" data-origin-width="1024" data-origin-height="576"></div><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1"><tbody><tr><td><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">index_HTML&CSS&JavaScript tag</span></b><br><span data-ke-size="size18"><b><span style="font-family: 'Noto Serif KR';"><br></span></b><span style="font-family: 'Noto Serif KR';">개인 포트폴리오 웹 사이트 Vibe 분석</span><span style="font-family: 'Noto Serif KR';"><br>따라서 개인 포트폴리오 웹사이트는 기본적으로 귀하의 기술, 업적 및 재능을 뽐낼 수 있는 귀하만의 온라인 공간입니다. 디지털 이력서와 비슷하지만 훨씬 더 멋집니다. 일반적으로 하나에 들어가는 내용은 다음과 같습니다.<br><br>1. 홈페이지<br>이는 귀하의 사이트를 클릭하는 모든 사람이 첫 번째로 방문하는 곳입니다. 여기에서 자신을 소개하고, 자신의 기술을 빠르게 살펴보고, 방문자가 사이트를 쉽게 둘러볼 수 있습니다.<br><br>2. 내 소개<br>개인적인 이야기를 나누며 자신의 관심사, 직업적 여정을 공유하는 곳입니다. 청중과 진정한 관계를 맺는 것이 중요합니다.<br><br>3. 포트폴리오<br>이곳이 바로 마법이 일어나는 곳입니다! 멋진 디자인, 멋진 기사, 완성된 프로젝트 등 자신을 빛나게 하는 모든 것이 무엇이든 최고의 작품을 선보이세요. 각 작품에는 그것이 왜 그렇게 멋진지 설명하는 약간의 설명이 있습니다.<br><br>4. 이력서 또는 CV<br>업무 이력, 교육, 성과에 대한 핵심적인 세부 정보를 원하는 사람들을 위해 여기에 디지털 이력서를 놓을 수 있습니다.<br><br>5. 연락처<br>사람들이 DM에 쉽게 들어갈 수 있도록 해야 하므로 여기에 이메일이나 문의 양식을 드롭하세요.<br><br>6. 블로그 또는 기사<br>당신이 글쓰기나 블로그 활동을 하고 있다면, 당신의 생각과 지혜를 위한 자리를 가질 수 있습니다. 이는 전 세계가 볼 수 있는 디지털 일기와 같습니다.<br><br>왜 개인 포트폴리오 웹사이트에 신경을 쓰나요?<br>당신의 훌륭함을 보여주세요: 당신의 재능을 미술관에 전시하는 것과 같지만 훨씬 더 규모가 큽니다. 매끄럽고 체계적인 방식으로 전 세계에 자신의 기술을 선보일 수 있습니다.<br>프로처럼 보이세요: 자신만의 온라인 패드를 가지고 있다는 것은 게임에 대해 진지하다는 것을 보여줍니다. 면접에 가장 좋은 옷을 입고 입장하는 것과 같습니다.<br>스스로 주인이 되세요: 귀하의 웹사이트는 디자인부터 콘텐츠까지 모두 귀하의 것입니다. 당신만큼 독특하게 만들 수 있습니다.<br>주목받기: 온라인에 접속하면 더 많은 사람들이 귀하를 찾을 수 있습니다. 사람들이 귀하의 이름이나 분야를 Google에 검색하면 귀하의 웹사이트가 팝업되어 쉽게 찾을 수 있습니다.<br>네트워킹 골드: 귀하의 사이트는 핵심 네트워킹 도구가 될 수 있습니다. 귀하의 업무에 관심이 있고 공동 작업을 원하거나 귀하를 고용하고 싶어하는 사람들과 연결할 수 있습니다.<br>개인 포트폴리오 웹사이트 설정<br>이런 나쁜 소년 중 하나를 만드는 것은 생각보다 쉽습니다. 이것 좀 봐:<br><br>멋진 도메인 선택: "당신"이라는 느낌을 주고 기억하기 쉬운 도메인 이름을 선택하세요.<br>웹사이트 빌더 선택: 기술 전문가가 아닌 사람들을 위해 설계된 WordPress, Wix 또는 Squarespace와 같은 플랫폼을 사용하세요.<br>창의력 발휘: 나만의 디자인을 선택하고 다른 사람들이 쉽게 확인할 수 있도록 물건을 정리하세요.<br>물건 자랑하기: 최고의 사진, 설명, 기타 관련 항목으로 포트폴리오를 채우세요.<br>SEO 게임 강화: 귀하의 공연과 관련된 일부 키워드를 입력하여 귀하의 사이트가 검색 엔진 친화적인지 확인하십시오.<br>테스트 드라이브: 큰 빨간색 '실행' 버튼을 누르기 전에 사이트가 다양한 기기와 브라우저에서 원활하게 작동하는지 확인하세요.<br>소문내기: 사이트를 소셜 미디어에 공유하고, 이메일 서명을 하고, 멋진 명함에 인쇄할 수도 있습니다.<br>당신은 또한 이것을 좋아할 것입니다:<br><br>HTML CSS 및 Javascript로 된 3D 개인 웹사이트<br>HTML과 CSS만을 사용하는 개인 포트폴리오 웹사이트<br>소스 파일 - 시작점<br>HTML 코드 – 시작점:</span></span></td></tr></tbody></table></div><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>HTML tyag</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><!DOCTYPE html> </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><html lang="KO"_"Yoon"> </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  <head> </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <meta charset="UTF-8" /> </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <title>Responsive Personal Portfolio Website Design | Codehal</title> </span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <!-- box icons --> </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <link href="<a href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" target="_blank" class="ke-link">https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css</a>" rel="stylesheet" /> </span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <!-- custom css --> </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <link rel="stylesheet" href="css/style.css" /> </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <style> </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">     </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    @import‎ url("<a href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap</a>"); </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">* { </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  margin: 0; </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  padding: 0; </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  box-sizing: border-box; </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  text-decoration: none; </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  border: none; </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  outline: none; </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  scroll-behavior: smooth; </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  font-family: "Poppins", sans-serif; </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">} </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">:root { </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  --bg-color: #1f242d; </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  --second-bg-color: #323946; </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  --text-color: #fff; </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  --main-color: #0ef; </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">} </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">*::selection { </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  background: var(--main-color); </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  color: var(--bg-color); </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">} </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">html { </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  font-size: 62.5%; </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  overflow-x: hidden; </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">} </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">body { </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  background: var(--bg-color); </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  color: var(--text-color); </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">} </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">/* BREAKPOINTS */ </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">     </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    </style> </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  </head> </span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  <body> </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <!-- header design --> </span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <!-- home section design --> </span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <!-- about section design --> </span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <!-- services section design --> </span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <!-- portfolio section design --> </span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <!-- contact section design --> </span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <!-- footer design --> </span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <!-- scroll reveal --> </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <script src="<a href="https://unpkg.com/scrollreveal" target="_blank" class="ke-link">https://unpkg.com/scrollreveal</a>"></script> </span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <!-- typed js --> </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <script src="<a href="https://cdn.jsdelivr.net/npm/typed.js@2.0.12" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/typed.js@2.0.12</a>"></script> </span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <!-- custom js --> </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <script src="js/script.js"></script> </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    <script> </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    /*==================== toggle icon navbar ====================*/ </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">/*==================== scroll sections active link ====================*/ </span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  /*==================== sticky navbar ====================*/ </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  /*==================== remove toggle icon and navbar when click navbar link (scroll) ====================*/ </span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">/*==================== scroll reveal ====================*/ </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">/*==================== typed js ====================*/ </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">     </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">    </script> </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18">  </body> </span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"></html> </span><br><br><br><br><br><br><br><br><br><br></b></span></p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>html</b></span></p>
<!-- -->
]]>
첫댓글 https://codehalweb.com/complete-responsive-personal-portfolio-website/ & https://www.youtube.com/watch?v=Tkp3FDgOueM
https://www.w3schools.com/css/tryit.asp?filename=trycss_default
PLAY
https://www.youtube.com/watch?v=Tkp3FDgOueM
PLAY