TIL 07 | 자기소개 페이지 만들기 리뷰

meow·2020년 7월 17일
11

HTML/CSS

목록 보기
7/12
post-thumbnail

'HTML/CSS'로 자기소개 페이지 만들기! 코드를 짜보면서 구글링을 통해 새로 배운 것들, 오류들, 여전히 해결하지 못한 부분을 정리해보자

자기소개 페이지 링크
자기소개 소스 깃허브 링크

새로 알게된 것들

창의 크기에 따라 div 사이즈 조정하는 방법 (반응형)

페이지를 반응형 웹으로 만들어보고 싶어서 찾아낸 방법이다. 유일한 방법인지는 확실하지 않으나, 정말 간단한 방법을 찾을 수 있었다. <head><style> 안에 이러한 코드를 추가했다.

    <style media="screen">
      * {margin: 0; padding: 0;}
      header {width: 100%; text-align: center; height: 50px; position: fixed;}
      b {display: inline-block; margin-left: 50px; margin-top: 20px; cursor: pointer;}
      div {width: 100vw; height: 100vh;}
    </style>

여기서 div {width: 100vw; height: 100vh;} 이 코드는 각 영역의 높이와 너비 값을 Viewport 단위로 적용시킨다. 즉 브라우저의 크기가 변경될때마다 값이 변경된다.

CSS Viewport를 기준으로 한 단위가 4개 있다. (vh, vw, vmin, vmax)

  • Viewport Height (vh) : viewport의 높이에 근거한다. 1vh는 viewport의 높이의 1%와 같다
  • Viewport Width (vw) : viewport의 폭에 근거한다. 1vw는 viewport의 넓이의 1%와 같다
  • Viewport Minimum (vmin) : viewport의 (높이와 너비 중) 작은 쪽의 치수에 기초로한다. viewport의 높이가 폭보다 작은 경우, 1vmin는 viewport의 높이의 1%에 해당한다. 마찬가지로 viewport의 폭이 높이보다 작은 경우, 1vmin는 viewport의 넓이의 1%와 같다
  • Viewport Maximum (vmax) : viewport의 (높이와 너비 중) 큰 쪽의 치수에 기초로한다. viewport의 높이가 폭보다 큰 경우, 1vmax는 viewport의 높이의 1%에 해당한다. 마찬가지로 viewport의 폭이 높이보다 큰 경우, 1vmax는 viewport의 넓이의 1%와 같다

viewport의 폭이 1200px, 높이가 1000px의 경우 10vw는 120px, 10vh는 100px이 된다. 이 viewport는 폭이 높이보다 더 크기 때문에 10vmax는 120px, 10vmin는 100px이된다

이 장치의 방향이 바뀌어 viewport의 폭이 1000px 높이가 1200px되면 10vh는 120px, 10vw는 100px이된다. 흥미롭게도, 10vmax는 큰 쪽의 viewport의 값에 따라 결정되므로 120px 상태이다. 마찬가지로 10vmin도 100px로 그대로이다.

브라우저 창의 크기를 변경하여 viewport의 넓이를 1000px 높이를 800px하면 10vh는 80px, 10vw는 100px이된다. 마찬가지로 10vmax는 100px, 10vmin은 80px가 된다.

이 시점에서는 Viewport 단위는 % 지정 것처럼 보일 수도 있지만, Viewport 단위와 % 사이에 큰 차이가 있다. % 지정 되어있다면 자식 요소의 폭과 높이는 부모 요소의 폭과 높이에 결정됩니다.

출처 : 모르면손해! CSS vh / vw의 능숙한 반응형 웹사이트제작를 제작하자! https://taimouse.tistory.com/8

그라데이션 효과 만들기

/* 기본문법 */
linear-gradient(direction, color1, color2,, color3 )

direction에는 그라데이션 방향을 입력한다. 색은 여러개 입력할 수 있다. 입력한 순서로 설정한 방향으로 그라데이션을 만들 수 있다.

  • to bottom : 위에서 아래로 그라데이션을 만든다. (기본값)
  • to top : 아래에서 위로 그라데이션을 만든다.
  • to left : 오른쪽에서 왼쪽으로 그라데이션을 만든다.
  • to right : 왼쪽에서 오른쪽으로 그라데이션을 만든다.
  • ndeg : n도의 방향으로 그라데이션을 만든다.

색 뒤에 백분율 또는 픽셀 등으로 길이를 입력하면 그 길이까지 해당 색을 사용한다.

/* 해당 요소의 왼쪽에서 50%까지는 노란색, 50% 초과 60% 이하에는 빨간색, 나머지는 보라색으로 그라데이션을 만듭니다. */
linear-gradient( to right, yellow 50%, red 60%, purple )

repeating-linear-gradient는 그라데이션을 반복한다.

repeating-linear-gradient( yellow, red 10%, purple 20% );

출처 : CSS / linear-gradient - 선형 그라데이션 효과 만들기
https://www.codingfactory.net/10838

텍스트에 마우스오버 시 내용을 변경하기

텍스트 링크에 마우스를 올렸을 때 텍스트를 변경하고 싶은 경우 다양한 방법으로 가능하다. 다음은 CSS를 사용하여 마우스 오버 시 텍스트를 변경하는 예제다.

1번 예제

HTML

<li class="hover-me"><a class='hover-me' href="https://www.google.co.kr/" target="_blank">회사소개</a></li>

CSS

.hover-me a {font-size: 15px;}
	.hover-me a:hover {
	font-size:0;
}
.hover-me a:hover:before {
	content: 'About Us';
	background-color: red;
	font-size:15px;
}

아래의 예제에서는 마우스 hover 시 display:none을 적용하는 방식이다.

2번 예제

HTML

<button><span>3 replies</span></button>

CSS

button {width:6em}
button:hover span {display:none}
button:hover:before {content:"Reply!"}

출처 : 텍스트 링크에 마우스 오버 시 텍스트 변경하는 방법 [CSS]
https://avada.tistory.com/1711

::before 과 ::after

  • ::before : 실제 내용 바로 앞에서 생성되는 자식 요소
  • ::after : 실제 내용 바로 뒤에서 생성되는 자식 요소

이 두가지 가상요소를 사용하기 위해서는 반드시 content 속성이 필요하다.
content는 HTML 문서에 정보로 포함되지 않은 요소를 CSS에서 새롭게 생성해주는 '가짜' 속성이다. content 속성을 쓸 때 대표적으로 사용되는 속성들은 다음과 같다.

이미지 가운데정렬 하기

부모 요소가 있는 경우

div {
  display : block ;
  text-align : center ;
}
img {
  display : inline;
}

text-alignleft, center, right, justify 속성 값을 가지고 있다. block 요소 안에 inline 요소가 있어야 가운데 정렬을 할 수 있다. 즉, text 뿐만 아니라 이미지도 가능하다는 뜻이다.

부모 요소가 없는 경우

img {
  display : block ;
  margin : 0 auto ;
}

img 태그는 기본적으로 inline-block 속성이다. 이 속성은 너비와 높이를 지정할 수 있고 줄 바꿈이 이루어지지 않는다. 만약, 너비와 높이를 지정하지 않는다면 img 만큼만 영역이 잡히게 된다.

이때 block 요소를 사용한다면 한 영역을 차지하는 박스형태의 성질을 가지고 있기 때문에 가운데 정렬이 가능해진다. 왜냐하면 width값이 100%가 되기 때문이다.

출처 : CSS 이미지 가운데 정렬 하는 2가지 방법
https://dahanweb.tistory.com/74

메일 전송가능한 링크 만들기

흔히 포트폴리오 사이트에서는 이메일 주소를 클릭시 컴퓨터에 내장된 Mail app으로 연결되도록 만든다. 정말 간단하게 이러한 링크를 만들 수 있다.

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

<a href="mailto:webmaster@example.com">Jon Doe</a> 와 같이 메일주소 앞에 mailto: 만 추가하면 된다.

여전히 이해가 되지 않는 것

버튼을 통해 스크롤 이동시키기

나는 메뉴를 통해 각 영역으로 스크롤이 이동되는 원페이지 형식의 사이트를 만들고자 했다. 때문에 내 HTML 소스에는 jsjQuery가 추가되어 있다.

구글링해서 찾은 방법대로 자바스크립트를 적용해보고자 했으나 반응이 없다. 내가 찾은 코드는 아래와 같다.

$(document).ready(function() {
  $("#bthome").bind('click',function () {
    $("html, body").animate({scrollTop:'0'},500);
});

$('#bthome').on('click', function() {
  $('html').scrollTop('0');
});

참고한 포스트 1
https://m.blog.naver.com/st004329/221017006462

참고한 포스트 2
https://webisfree.com/2014-11-26/[jquery]-스크롤-이동-버튼-만들기-animate메소드-scrolltop

웹 하단의 공백

맨 아래 섹션에는 이미지 다섯개로 심플한 화면을 만들었는데, 자꾸 아이콘 이미지가 추가되면 하단에 흰 공백이 생긴다. 왜 생기는지? 어떻게 없애야 할지.

작업 코드

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Hey, I'm Jihyung!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style media="screen">
      * {margin: 0; padding: 0;}
      header {width: 100%; text-align: center; height: 50px; position: fixed;}
      b {display: inline-block; margin-left: 50px; margin-top: 20px; cursor: pointer;}
      div {width: 100vw; height: 100vh;}
    </style>
    <link rel="stylesheet" href="app.css">
    <link href="https://fonts.googleapis.com/css2?family=Palanquin+Dark:wght@400;600&family=Shrikhand&display=swap" rel="stylesheet">
  </head>
  <body>
    <header>
      <b id="bthome">Click! →</b>
      <b id="bt02">1</b>
      <b id="bt03">2</b>
      <b id="bt04">3</b>
      <b id="bt05">4</b>
    </header>

    <section>
      <div id="window1">
        <div id="intro">
          <h1>Hey, I'm Jihyung!</h1>
          <h3>만나서 반가워요! 저에 대해 더 알고 싶으시다면, 스크롤을 내려보세요 :)</h3>
        </div>
      </div>

      <div id="window2">
        <img id="mock" src="mock.png" alt="">
        <div id="myself">
          <h1>새로운 도전!</h1>
          <h2>저는 시각디자인을 전공하고 UXUI 디자이너로 일하다가 <br>프론트엔드 개발자로 새로운 시작을 준비하고 있어요! <br>이전에는 <a target="_blank" href="https://jihyung.net" id="portfoliosite">이런</a> 것들을 해왔어요.</h2>
        </div>
      </div>

      <div id="window3">
        <h1>What I Love! &#128154;</h1>
        <div class="container">
          <div class="hobby">
            <img class="hobby_img" src="01.png" alt="">
            <p class="hobby_text">코로나 때문에 떠나지 못해 슬픈 여행매니아</p>
          </div>
          <div class="hobby">
            <img class="hobby_img" src="02.png" alt="">
            <p class="hobby_text">매콤짭잘한 멕시칸 푸드 러버</p>
          </div>
          <div class="hobby">
            <img class="hobby_img" src="03.png" alt="">
            <p class="hobby_text">요가입문 3개월차 베이비 요기</p>
          </div>
        </div>
      </div>

      <div id="window4">
        <h1><span>TMI</span> 대잔치 &#128221;</h1>
        <div class="tmicontainer">
          <div class="tmilist">
            <p id="tmi1">생일</p>
            <p id="tmi2">가족관계</p>
            <p id="tmi3">고향</p>
          </div>
          <div class="tmilist">
            <p id="tmi4">아아 vs 뜨아</p>
            <p id="tmi5">애플 vs 삼성</p>
            <p id="tmi6">소주 vs 맥주</p>
          </div>
          <div class="tmilist">
            <p id="tmi7">맛집추천</p>
            <p id="tmi8">최애 여행지</p>
            <p id="tmi9">MBTI</p>
          </div>
        </div>
      </div>

      <div id="window5">
        <h1>더 알아보고 싶으시다면? &#129303;</h1>
        <div class="imglist">
          <a href="mailto:angella@gmail.com">
            <img src="gmail.png" alt="">
          </a>
          <a href="https://www.instagram.com/thisisyourhyung">
            <img src="insta.png" alt="">
          </a>
          <a href="https://velog.io/@hyounglee">
            <img src="blog.png" alt="">
          </a>
          <a href="https://github.com/MiaJLee">
            <img src="github.png" alt="">
          </a>
          <a href="https://www.youtube.com">
            <img src="youtube.png" alt="">
          </a>
        </div>
      </div>
    </section>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>

CSS

/* 네비게이션 */
#bthome {
  color: #bbbbbb;
}
b {
  font-size: 20px;
  font-family: 'Palanquin Dark', sans-serif;
  font-weight: 600;
  color: white;
  padding: 5px;
}
b:hover {
  color:black;
}
/* Window 1 */
#window1 {
  background-image : url('yogi.jpg');
	background-repeat : no-repeat;
  background-size: cover;
  display: table;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: center;
}
#intro {
  position: absolute;
  top: 50%;
  height: 240px;
  margin-top: -200px;
}
#intro h1 {
  font-family: 'Palanquin Dark', sans-serif;
  font-weight: 600;
  font-size: 72px;
  text-align: center;
}
h3 {
  font-family: "Apple SD Gothic Neo", sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #555555;
  text-align: center;
}
/* Window2 */
#window2 {
  background: #FEAC5E;
  background: -webkit-linear-gradient(to right, #4BC0C8, #C779D0, #FEAC5E);
  background: linear-gradient(to right, #4BC0C8, #C779D0, #FEAC5E);
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
#mock {
  max-width: 900px;
  margin-left: 80px;
  -webkit-flex: 1;
  flex: 1
}
#myself {
  -webkit-flex: 1;
  flex: 1;
  vertical-align: middle;
}
#myself h1 {
  margin-top: 50%;
  font-family: "Apple SD Gothic Neo", sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
}
#myself h2 {
  font-family: "Apple SD Gothic Neo", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
}
#portfoliosite {
  text-decoration: none;
  color: #7319F3;
  font-weight: 600;
}
#portfoliosite:hover {
  color: yellow;
}
/* Window 3 */
#window3 {
  background: #70e1f5;
  background: -webkit-linear-gradient(to right, #ffd194, #70e1f5);
  background: linear-gradient(to right, #ffd194, #70e1f5);
}
#window3 h1 {
  padding-top: 120px;
  font-family: 'Palanquin Dark', sans-serif;
  font-weight: 400;
  font-size: 64px;
  line-height: 1.5;
  text-align: center;
}
.container {
  display: -webkit-flex;
  display: flex;
  margin-top: 150px;
}
.hobby {
  -webkit-flex: 1;
  flex: 1;
  text-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.hobby_img {
  max-width: 300px;
  display : inline;
}
.hobby_text {
  margin-top: 30px;
  font-family: "Apple SD Gothic Neo", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
}
/* Window 4 */
#window4 {
  background: #eee;
}
#window4 h1 {
  padding-top: 120px;
  font-family: "Apple SD Gothic Neo", sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 1.5;
  text-align: center;
}
#window4 h1 span {
  font-family: 'Palanquin Dark', sans-serif;
  font-weight: 400;
}
.tmicontainer {
  display: -webkit-flex;
  display: flex;
  margin-top: 130px;
}
.tmilist {
  -webkit-flex: 1;
  flex: 1;
  text-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.tmilist p {
  font-family: "Apple SD Gothic Neo", sans-serif;
  font-weight: 400;
  color: black;
  font-size: 25px;
  line-height: 5.5;
}
.tmilist p:hover {
  font-size: 0;
}
.tmilist p:hover::before {
  font-size: 25px;
  font-weight: bold;
  color: #7319F3;
}
.tmilist #tmi1:hover:before {
  content: '8월 1일';
}
.tmilist #tmi2:hover:before {
  content: '부모님, 남동생, 두 반려견(코코와 토리)';
}
.tmilist #tmi3:hover:before {
  content: '부산 광안리';
}
.tmilist #tmi4:hover:before {
  content: '얼죽아!!!!';
}
.tmilist #tmi5:hover:before {
  content: '8ㅅ8 애플워치가 갖고싶은 앱등이';
}
.tmilist #tmi6:hover:before {
  content: '시원한 맥주!';
}
.tmilist #tmi7:hover:before {
  content: '합정 서울브루어리, 홍대 구스토타코';
}
.tmilist #tmi8:hover:before {
  content: '세번 가고픈 바르셀로나';
}
.tmilist #tmi9:hover:before {
  content: 'ESFJ ^3^';
}
/* Window 5 */
#window5 {
  background: #B993D6;
  background: -webkit-linear-gradient(to right, #8CA6DB, #B993D6);
  background: linear-gradient(to right, #8CA6DB, #B993D6);
}
#window5 h1 {
  padding-top: 140px;
  font-family: "Apple SD Gothic Neo", sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 1.5;
  color: white;
  text-align: center;
}
.imglist {
  text-align: center;
}
.imglist img {
  width: 100px;
  margin-top: 140px;
  padding: 50px;
}
.imglist a {
  text-decoration: none;
}
profile
🌙`、、`ヽ`ヽ`、、ヽヽ、`、ヽ`ヽ`ヽヽ` ヽ`、`ヽ`、ヽ``、ヽ`ヽ`、ヽヽ`ヽ、ヽ `ヽ、ヽヽ`ヽ`、``ヽ`ヽ、ヽ、ヽ`ヽ`ヽ 、ヽ`ヽ`ヽ、ヽ、ヽ`ヽ`ヽ 、ヽ、ヽ、ヽ``、ヽ`、ヽヽ 🚶‍♀ ヽ``ヽ``、ヽ`、

4개의 댓글

안녕하세요! 자기소개 페이지 관련 글들을 서핑하다 방문하게 되었습니다
다름이 아니라 자기소개 페이지 링크가 피싱 사이트로 감지되어서 사이트를 방문할 때 보안 오류가 발생하더라구요
혹시 모르셨을까봐 알려드리기 위해 댓글 남깁니다! :-)

1개의 답글
comment-user-thumbnail
2022년 3월 26일

안녕하세요! 덕분에 정말 많이 참고가 되었습니다 감사해요 :) 다름이 아니라, 혹시 여기서 사용하신 깔끔한 아이폰 이미지는 어떤 경로로 구하시는 건지 여쭤도 괜찮을까요?

1개의 답글