나만의 프로필페이지 만들기

결과물 미리보기

프로필

연결

4. VSCODE에서 프로젝트 폴더 열기

5. html, css 파일 생성

6. Live Server 설치

7. Live Server을 통해 HTML 파일 실행

홈페이지 제작

1. HTML 기본 틀 잡기.

2. css 페이지 설정 및 폰트 설정.

결과물 미리보기

프로필

•

프로필 사진

•

이름

•

간단 설명

연결

•

전화번호

•

이메일

•

SNS 페이지

외부 링크

•

외부 홈페이지

사진

동영상

•

유튜브

프로젝트 준비하기

1. VSCODE 설치

VSCODE 홈페이지 접속  링크

운영체제에 맞는 버전 다운로드

•

다운로드 Stable 버전으로 진행.

다운로드가 정상적으로 작동 되지 않을 경우 아래 링크 클릭.

•

윈도우 다운로드 링크

•

맥 다운로드 링크 

2. 프로젝트 폴더 생성

원하는 위치에 빈 폴더 생성

Window

macOS

폴더 이름 변경

•

앞으로 사용하게 될 프로젝트 폴더

•

프로젝트명과 동일하게 폴더 이름 변경

macOS

새롭게 만든 폴더 안에 images 폴더 생성

macOS

3. 리소스 파일 추가

프로젝트에 필요한 리소스 파일 다운로드

res.zip

42.6KB

압축 해제 후 모든 파일 images 폴더로 복사

•

옮겨야 될 파일

◦

폴더 : logo, photo

◦

파일 : profile_img.webp

4. VSCODE에서 프로젝트 폴더 열기

VSCODE 실행

상단 메뉴 → 파일 → 폴더 열기

•

프로젝트 폴더 선택

vscode 파일 열기

•

미리 만들어둔 images 파일이 보이는 지 확인

프로젝트 기본 폴더

5. html, css 파일 생성

•

해당 폴더에서 index.html, index.css 파일 생성

파일 생성 방법

index.html, index.css

6. Live Server 설치

•

VSCODE의 확장 탭으로 이동

VSCODE 좌측 네비게이션의 확장 탭

•

Live Server 검색 및 설치 클릭

7. Live Server을 통해 HTML 파일 실행

•

VSCODE 탐색기 탭 이동

•

index.html 우클릭 → Open With Live Server 클릭

•

브라우저가 실행 되면 주소창 확인 두가지 타입 중 한가지로 실행 되는 것을 확인.

◦

127.0.0.1:5501/index.html

◦

localhost:5501/index.html 

홈페이지 제작

1. HTML 기본 틀 잡기.

index.html 파일 더블 클릭 (편집 모드 진입)

다음 코드 복사 붙여넣기.

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="index.css">
    <!-- 아래 "프로젝트 이름"을 자기 자신의 이름으로 변경 -->
    <title>프로젝트 이름</title>
</head>
<body>
    <section class="wrap">

		</section>
</body>
</html>
HTML
복사

“프로젝트 이름” 을 지우고 자기 이름으로 변경.

2. css 페이지 설정 및 폰트 설정.

index.css 파일 더블 클릭 (편집 모드 진입)

다음 코드 복사 붙여넣기

/* 폰트 추가 */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");

/* 페이지 설정 */
body {
  display: flex;
  justify-content: center;
  background-color: #171d2e;
  font-family: "Noto Sans KR", sans-serif;
}
.wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 405px;
  background-color: transparent;
  padding: 60px 0;
}
CSS
복사

3. 프로필

index.html 파일 더블 클릭

body 태그의 section 태그 안에 복사 붙여넣기.

코드 위치

...
<body>
    <section class="wrap">
				<!-- 이곳에 다음 코드를 복사 붙여 넣기 하시면 됩니다. -->	
		</section>
</body>
...
HTML
복사

추가 코드

<article class="profile">
		<img class="image" src="/images/profile_img.webp"/>
		<h1 class="name">스타트업코드</h1>
		<p class="description">간단한 소개</p>
</article>
HTML
복사

텍스트 변경

스타트업코드 → 자신의 이름으로 변경

ii.

간단한 소개 → 자기 자신에 대해서 최대 20자 까지 간단한 설명 글.

index.css 에 다음 코드 추가

코드 위치

/* 폰트 추가 */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");

/* 페이지 설정 */
body {
  display: flex;
  justify-content: center;
  background-color: #171d2e;
  font-family: "Noto Sans KR", sans-serif;
}

/* 위 코드는 남겨 두고 하단에 복사 붙여넣기 진행 해 주세요.*/
CSS
복사

추가 코드

/* 프로필 이미지, 이름, 간단 설명 설정*/
.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile .image {
  width: 103px;
  height: 103px;
  border-radius: 15%;
  margin-bottom: 25px;
}

.profile .name,
.description {
  margin: 0;
  padding: 0;
  color: #fff;
}

.profile .name {
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 10px;
}
.profile .description {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}
CSS
복사

현재까지 진행 과정 사진 확인 하기

4. 경계선 추가

index.html 에 코드 추가

코드 위치

...
<section class="wrap">
    <article class="profile">
        <img class="image" src="/images/profile_img.webp"/>
        <h1 class="name">스타트업코드</h1>
        <p class="description" >스타트업을 위한 스타트업 스타트업코드입니다.😃</p>
    </article>
    <!-- 이곳에 코드 추가 -->
</section>
...
HTML
복사

추가 코드

<hr class="horizontal-rule"/>
HTML
복사

index.css에 코드 추가

코드 위치

...
.profile .name {
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 10px;
}
.profile .description {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}
/* 하단에 추가 */
CSS
복사

추가 코드

/* 가로줄 구분선 */
.horizontal-rule {
  width: 60%;
  height: 1px;
  border: 0;
  background-color: #fff;
  margin: 30px auto 50px;
}
CSS
복사

진행 과정 확인

5. 연결

•

index.html 파일에 코드 추가

◦

코드 위치

...
<body>
    <section class="wrap">
        <article class="profile">
            <img class="image" src="/images/profile_img.webp"/>
            <h1 class="name">스타트업코드</h1>
            <p class="description" >스타트업을 위한 스타트업 스타트업코드입니다.😃</p>
        </article>
        <hr class="horizontal-rule"/>
				<!-- 이곳에 다음 코드 추가 -->

    </section>
</body>
...
HTML
복사

◦

추가 코드

<article class="external">
    <a id="phone" class="link" href="tel:01077217430">
        <img src="/images/logo/telephone.svg"/>
    </a>
    <a id="email" class="link"  href="mailto:contact@startupcode.kr">
        <img src="/images/logo/email.svg"/>
    </a>
    <a id="instagram" class="link" href="https://www.instagram.com/" target="_blank">
        <img src="/images/logo/instagram.svg"/>
    </a>
    <a id="disquiet" class="link" href="https://disquiet.io" target="_blank">
        <img src="/images/logo/disquiet.svg"/>
    </a>
    <a id="linkedin" class="link" href="https://www.linkedin.com/" target="_blank">
        <img src="/images/logo/linkedin.svg"/>
    </a>
    <a id="clubhouse" class="link" href="https://clubhouse.com">
        <img src="/images/logo/clubhouse.svg" />
    </a>
    <a id="youtube" class="link" href="https://youtube.co.kr" target="_blank">
        <img src="/images/logo/youtube.svg"/>
    </a>
    <a id="home" class="link" href="https://startupcode.kr" target="_blank">
        <img src="/images/logo/home.svg"/>
    </a>
    <a id="facebook" class="link" href="https://facebook.co.kr" target="_blank">
        <img src="/images/logo/facebook.svg"/>
    </a>
    <a id="twitter" class="link" href="https://twitter.com" target="_blank">
        <img src="/images/logo/twitter.svg"/>
    </a>
    <a id="naver" class="link" href="https://naver.co.kr" target="_blank">
        <img src="/images/logo/naverblog.svg"/>
    </a>
</article>
HTML
복사

◦

추가 코드 텍스트 수정

<!-- 핸드폰 번호. 수정 시 href="tel:" 이후 본인의 핸드폰 번호를 입력 한다. -->
<a id="phone" class="link" href="tel:01077217430">
    <img src="/images/logo/telephone.svg"/>
</a>

<!-- 이메일. 수정 시 href="mailto:"  이후 본인의 이메일을 입력 한다.-->
<a id="email" class="link"  href="mailto:contact@startupcode.kr">
    <img src="/images/logo/email.svg"/>
</a>

<!-- 소셜 네트워크. 사용할 소셜 네트워크를 고르고 href="" 안에 자신의 주소를 입력 한다. -->
<a id="instagram" class="link" href="https://www.instagram.com/" target="_blank">
    <img src="/images/logo/instagram.svg"/>
</a>
HTML
복사

◦

필요 없는 데이터 삭제

<!-- 사용하지 않는 데이터 삭제시 <a ~ </a> 까지 모두 지워 준다. -->
<a id="disquiet" class="link" href="https://disquiet.io" target="_blank">
    <img src="/images/logo/disquiet.svg"/>
</a>
HTML
복사

index.css 에 코드 추가

추가 위치

...
/* 가로줄 구분선 */
.horizontal-rule {
  width: 60%;
  height: 1px;
  border: 0;
  background-color: #fff;
  margin: 30px auto 50px;
}
/* 하단에 추가 */
CSS
복사

추가 코드

/* 외부 링크 (전화번호, 이메일, 인스타 등..) */
.external {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 60%;
  margin: 0 auto;
  gap: 15px;
}
.external .link {
  cursor: pointer;
}
CSS
복사

진행 과정 확인

6. 외부 링크 버튼

index.html에 코드 추가

추가 위치

...
			<a id="twitter" class="link" href="https://twitter.com" target="_blank">
		      <img src="/images/logo/twitter.svg"/>
		  </a>
		  <a id="twitter" class="link" href="https://naver.co.kr" target="_blank">
		      <img src="/images/logo/naverblog.svg"/>
		  </a>
		</article>
		<!-- 이곳에 다음 코드 추가 -->

		</section>
	</body>
</html>
HTML
복사

추가 코드

<article class="buttons">
    <a class="button" href="https://startupcode.kr" target="_blank">스타트업코드 홈페이지</a>
    <a class="button" href="https://devpeople.kr" target="_blank">개발하는 사람들(외주개발)</a>
    <a class="button" href="https://startuphub.kr" target="_blank">스타트업허브</a>
</article>
HTML
복사

텍스트 변경

<!-- href="" 이동할 홈페이지 주소.  -->
<!-- "스타트업코드 홈페이지"를 원하는 텍스트로 변경 -->
<a class="button" href="https://startupcode.kr" target="_blank">스타트업코드 홈페이지</a>
HTML
복사

버튼 삭제

<!-- 사용하지 않는 버튼은 <a ~ </a> 까지 모두 지워 준다. -->
<a class="button" href="https://startuphub.kr" target="_blank">스타트업허브</a>
HTML
복사

index.css에 코드 추가

추가 위치

...
/* 외부 링크 (전화번호, 이메일, 인스타 등..) */
.external {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 60%;
  margin: 0 auto;
  gap: 15px;
}
.external .link {
  cursor: pointer;
}

/* 하단에 코드 추가 */
CSS
복사

추가 코드

/* 버튼 */
.buttons {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  justify-content: center;
  align-items: center;
}

.buttons .button {
  width: 100%;
  height: 54px;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #fff;
  border-radius: 10px;

  text-decoration: none;
  color: #000;
  font-weight: 600;
  font-size: 16px;
}
CSS
복사

진행 과정 확인

7. 텍스트

index.html에 코드 추가

추가 위치

...
				<a id="naver" class="link" href="https://naver.co.kr" target="_blank">
                <img src="/images/logo/naverblog.svg"/>
            </a>
        </article>
        <article class="buttons">
            <a class="button" href="https://startupcode.kr" target="_blank">스타트업코드 홈페이지</a>
            <a class="button" href="https://devpeople.kr" target="_blank">개발하는 사람들(외주개발)</a>
            <a class="button" href="https://startuphub.kr" target="_blank">스타트업허브</a>
        </article>
				<!-- 이곳에 다음 코드 추가 -->				
				
    </section>
</body>
</html>
HTML
복사

추가 코드

<article class="text">
    <p class="small">우리가 만드는 서비스로 스타트업시장이 활성화될 것을 믿습니다.</p>
</article>
HTML
복사

텍스트 변경 

<article class="text">
		<!-- 원하는 텍스트 입력. -->
    <p class="small">원하는 문구를 입력 하세요.</p>
</article>
HTML
복사

글씨 크기 변경

<article class="text">
		<!-- 큰 글씨로 변경하고 싶을 경우 class의 이름을 small에서 big으로 변경 -->
    <p class="big">원하는 문구를 입력 하세요.</p>
</article>
HTML
복사

index.css에 코드 추가

추가 위치

...
.buttons .button {
  width: 100%;
  height: 54px;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #fff;
  border-radius: 10px;

  text-decoration: none;
  color: #000;
  font-weight: 600;
  font-size: 16px;
}

/* 하단에 코드 추가 */
CSS
복사

추가 코드

/* 텍스트 */
.text {
  color: #ffffff;
  text-align: center;
}
.text .small {
  font-size: 14px;
}
.text .big {
  font-size: 20px;
  font-weight: 700;
}
CSS
복사

진행 상황 확인

8. 사진

사용할 사진 추가하기

프로젝트 폴더 > images 폴더 > photos 폴더 로 이동

나를 잘 표현할 수 있는 사진 2~4장 사이로 추가하기.

보여주고 싶은 순서대로 이름 변경

이름 양식 : photo_1.jpeg, photo_2.jpeg, photo_3.jpeg…

진행 과정 확인

index.html에 코드 추가

추가 위치

				<a class="button" href="https://devpeople.kr" target="_blank">개발하는 사람들(외주개발)</a>
            <a class="button" href="https://startuphub.kr" target="_blank">스타트업허브</a>
        </article>
        <article class="text">
            <p class="small">우리가 만드는 서비스로 스타트업시장이 활성화될 것을 믿습니다.</p>
            <!-- <p class="big">우리가 만드는 서비스로 스타트업시장이 활성화될 것을 믿습니다.</p> -->
        </article>
        <!-- 이곳 하단에 코드 추가 -->
        
    </section>
</body>
</html>
HTML
복사

추가 코드

<article class="photo">
    <img src="/images/photo/photo_1.jpeg"/>
    <img src="/images/photo/photo_2.jpeg"/>
    <img src="/images/photo/photo_3.jpeg"/>
    <img src="/images/photo/photo_4.png"/>
</article>
HTML
복사

텍스트 변경

<!-- 사용하는 이미지의 확장자를 맞게 변경. png, webp, jpeg, jpg 등 각 파일에 맞게 변경. -->
<img src="/images/photo/photo_1.jpeg"/>
HTML
복사

index.css에 코드 추가

추가 위치

...
font-size: 16px;
}

/* 텍스트 */
.text {
  color: #ffffff;
  text-align: center;
}
.text .small {
  font-size: 14px;
}
.text .big {
  font-size: 20px;
  font-weight: 700;
}

/* 하단에 코드 추가 */
CSS
복사

추가 코드

/* 사진 */
.photo {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.photo img {
  width: 100%;
  height: 228px;

  object-fit: cover;
  border-radius: 10px;
}
CSS
복사

진행 과정 확인

8. 동영상

유튜브 동영상 고르기 또는 직접 업로드

유튜브 공유 버튼 클릭

복사 버튼 클릭

동영상 아이디 값만 추출

https://youtu.be/bSeeONAyuvM 에서 htttps://youtu.be/를 제외한 나머지 텍스트 복사.

“ bSeeONAyuvM “를 따로 적어 두기

index.html 에 코드 추가

추가 위치

...
<img src="/images/photo/photo_1.jpeg"/>
            <img src="/images/photo/photo_2.jpeg"/>
            <img src="/images/photo/photo_3.jpeg"/>
            <img src="/images/photo/photo_4.png"/>
        </article>
        <!-- 이곳 하단에 코드 추가 -->
        
    </section>
</body>
</html>
HTML
복사

추가 코드

<article class="youtube">
    <iframe  src="https://www.youtube.com/embed/동영상아이디?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</article>
HTML
복사

텍스트 변경

<!-- src="...동영상 아이디를 이전에 복사해둔 동영상 아이디 값으로 텍스트 변경." -->
<iframe  src="https://www.youtube.com/embed/동영상아이디?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
HTML
복사

index.css에 코드 추가

추가 위치

...
/* 사진 */
.photo {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.photo img {
  width: 100%;
  height: 228px;

  object-fit: cover;
  border-radius: 10px;
}
/* 하단에 코드 추가 */
CSS
복사

추가 코드

/* 유튜브 */
.youtube {
  width: 100%;
  height: 230px;
  padding: 30px 0;
}
.youtube iframe {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
CSS
복사

진행 상황 확인

전체 코드

index.html

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="index.css">
    <title>프로젝트 이름</title>
</head>
<body>
    <section class="wrap">
        <article class="profile">
            <img class="image" src="/images/profile_img.webp"/>
            <h1 class="name">스타트업코드</h1>
            <p class="description" >스타트업을 위한 스타트업 스타트업코드입니다.😃</p>
        </article>
        <hr class="horizontal-rule"/>
        <article class="external">
            <a id="phone" class="link" href="tel:01077217430">
                <img src="/images/logo/telephone.svg"/>
            </a>
            <a id="email" class="link"  href="mailto:contact@startupcode.kr">
                <img src="/images/logo/email.svg"/>
            </a>
            <a id="instagram" class="link" href="https://www.instagram.com/" target="_blank">
                <img src="/images/logo/instagram.svg"/>
            </a>
            <a id="disquiet" class="link" href="https://disquiet.io" target="_blank">
                <img src="/images/logo/disquiet.svg"/>
            </a>
            <a id="linkedin" class="link" href="https://www.linkedin.com/" target="_blank">
                <img src="/images/logo/linkedin.svg"/>
            </a>
            <a id="clubhouse" class="link" href="https://clubhouse.com">
                <img src="/images/logo/clubhouse.svg" />
            </a>
            <a id="youtube" class="link" href="https://youtube.co.kr" target="_blank">
                <img src="/images/logo/youtube.svg"/>
            </a>
            <a id="home" class="link" href="https://startupcode.kr" target="_blank">
                <img src="/images/logo/home.svg"/>
            </a>
            <a id="facebook" class="link" href="https://facebook.co.kr" target="_blank">
                <img src="/images/logo/facebook.svg"/>
            </a>
            <a id="twitter" class="link" href="https://twitter.com" target="_blank">
                <img src="/images/logo/twitter.svg"/>
            </a>
            <a id="naver" class="link" href="https://naver.co.kr" target="_blank">
                <img src="/images/logo/naverblog.svg"/>
            </a>
        </article>
        <article class="buttons">
            <a class="button" href="https://startupcode.kr" target="_blank">스타트업코드 홈페이지</a>
            <a class="button" href="https://devpeople.kr" target="_blank">개발하는 사람들(외주개발)</a>
            <a class="button" href="https://startuphub.kr" target="_blank">스타트업허브</a>
        </article>
        <article class="text">
            <p class="small">우리가 만드는 서비스로 스타트업시장이 활성화될 것을 믿습니다.</p>
            <!-- <p class="big">우리가 만드는 서비스로 스타트업시장이 활성화될 것을 믿습니다.</p> -->
        </article>
        <article class="photo">
            <img src="/images/photo/photo_1.jpeg"/>
            <img src="/images/photo/photo_2.jpeg"/>
            <img src="/images/photo/photo_3.jpeg"/>
            <img src="/images/photo/photo_4.png"/>
        </article>
        <article class="youtube">
            <iframe  src="https://www.youtube.com/embed/bSeeONAyuvM?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
        </article>
    </section>
</body>
</html>
HTML
복사

index.css

/* 폰트 추가 */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");

/* 페이지 설정 */
body {
  display: flex;
  justify-content: center;
  background-color: #171d2e;
  font-family: "Noto Sans KR", sans-serif;
}
.wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 405px;
  background-color: transparent;

  padding: 60px 0;
}

/* 프로필 이미지, 이름, 간단 설명 설정*/
.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile .image {
  width: 103px;
  height: 103px;
  border-radius: 15%;
  margin-bottom: 25px;
}

.profile .name,
.description {
  margin: 0;
  padding: 0;
  color: #fff;
}

.profile .name {
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 10px;
}
.profile .description {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

/* 가로줄 구분선 */
.horizontal-rule {
  width: 60%;
  height: 1px;
  border: 0;
  background-color: #fff;
  margin: 30px auto 50px;
}

/* 외부 링크 (전화번호, 이메일, 인스타 등..) */
.external {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 60%;
  margin: 0 auto;
  gap: 15px;
}
.external .link {
  cursor: pointer;
}

/* 버튼 */
.buttons {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  justify-content: center;
  align-items: center;
}

.buttons .button {
  width: 100%;
  height: 54px;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #fff;
  border-radius: 10px;

  text-decoration: none;
  color: #000;
  font-weight: 600;
  font-size: 16px;
}

/* 텍스트 */
.text {
  color: #ffffff;
  text-align: center;
}
.text .small {
  font-size: 14px;
}
.text .big {
  font-size: 20px;
  font-weight: 700;
}

/* 사진 */
.photo {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.photo img {
  width: 100%;
  height: 228px;

  object-fit: cover;
  border-radius: 10px;
}

/* 유튜브 */
.youtube {
  width: 100%;
  height: 230px;
  padding: 30px 0;
}
.youtube iframe {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
CSS
복사