HTML/CSS 이력서 만들기

Mandy·2022년 4월 3일
0

HTML과 CSS의 기초 공부를 하면서 이력서를 만들었습니다.
우선, 이력서를 만들기 위해 그림판을 이용하여 블록을 표시했습니다.

그리고 HTML, CSS 기초 강의에서 배운 것들을 이용하여 코드를 작성했습니다.

글씨체와 글자크기는 고려하지 않았습니다.
겉으로 보기에는 예시 이력서와 비슷하게 작성된것 같아서 만족했지만, 코드 리뷰 이후 부족한 점을 많이 발견하게 되었습니다.

[코드 리뷰 후 수정해야 할 사항]

<기존 코드>

<!DOCTYPE html>
<html>
    <head>
        <meta   charset="utf-8">
        <title>1단계 과제</title>
        <style>
            .whole{
                border: 1px solid black ;
                width: 980px; height: 1250px;
            }
            h1{
                display: flex;
                justify-content: right;
                margin-right: 50px;
            }
            hr{
                margin: 20px;
            }

<수정된 코드>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>1단계 과제</title>
    <link rel="stylesheet" href="./reset.css" />
    <link rel="stylesheet" href="./codereview.css" />
  </head>

기존의 코드는 HTML 파일에 <style> 태그를 생성하여 그 안에 css 코드를 작성하였습니다.
그러나 코드가 길어질 경우 코드를 수정하기 쉽게 하기 위해서, 다른 HTML 파일에 스타일을 적용할 수 있는 점 때문에 css 파일을 별도로 생성하여 link 연결하는것이 바람직하다고 보았습니다.

또한, 제가 작성한 css파일을 연결하고 적용하기에 앞서, Reset.css를 연결시켜주었습니다.
웹 브라우저 고유의 default 값으로 스타일이 적용되어 있기 때문에 default 스타일을 초기화 시켜준 후 css를 적용하는것으로 크로스 브라우징을 해주는것이 중요하다는것을 알게되었습니다.

크로스 브라우징(Cross Browsing) 이란?
적어도 표준 웹기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 말하는 것이다. 또한, 지원할 수 없는 다른 웹 브라우저를 위한 장치를 구현하여 모든 웹 브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다.

수정된 코드에 사용된 Reset.css파일은 아래 주소에서 가져왔습니다.
https://meyerweb.com/eric/tools/css/reset/index.html
실무에서는 Reset.css 파일을 개발 편의와 용도에 맞게 수정 혹은 신규 생성하여 사용한다는 사실을 알게되었습니다.

2. Semantic HTML을 사용할 것.

Semantic HTML Tag를 사용하지 않았다는 것이 제가 작성한 코드의 가장 큰 문제점으로 지적되었습니다.
기초 강의를 들을때에는 Semantic HTML Tag에 대해서 다루지 않았기에 모르고 코드를 작성했기에 이러한 문제가 발견되었습니다.
여기서, Semantic HTML Tag 란 무엇이고 왜 중요한지에 대해 짚고 넘어가 보겠습니다.

Semantic HTML Tag가 중요한 3가지 이유
1. SEO ( Search engine optimization )
검색을 최적화하기 위해서 제목, 부제목, 시맨틱 태그를 잘 활용한다면 특정 키워드로 검색했을 때, 내가 만든 웹 사이트가 검색창에 노출될 수 있습니다. 브라우저의 검색 엔진이 웹 사이트를 어떤 검색 결과에 띄워줘야 될지를 알려줄 수있습니다.
2. 웹 접근성
웹 사이트를 시각적이 아니라, 음성으로 읽어주는 "스크린리더"를 이용하거나 또는 키보드만을 이용해서 이용하는 경우, 적절한 Semantic HTML Tag로 잘 만들어진 웹 사이트라면 스크린리더이든, 키보드만을 사용해서 동작하든 문제없이 동작할 수 있습니다.
3. 유지보수성
단순히, <div> 로만 모든 구조를 짜는 것보다 더 한 눈에 알아볼 수있기 때문에, 다른 개발자들이 코드를 유지보수하기가 더 수월해집니다.

  • 가장 큰 틀이되는 부분은 <main> 태그를 사용
  • 맨 위에 제목처럼 중요한 영역은 <header> 태그 사용

<기존 코드>

    <body>
        <div class="whole">
            <h1><em>권규리</em></h1>
            <h2 class="a1">Front-End 개발자</h2>

            <div>
                <h2 class="a2">About Me</h2>
                <hr>
                <p class="item1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do einusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim venim, quis nostrud execitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehendrit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <h2 class="a2">EXPERIENCE</h2>
                <hr>
                    <div class="item2">
                        <div class="cont1">
                            <div>Awesome Programming Company</div>
                            <div>2021-Now</div>
                        </div>    
                        <div class="cont2">  
                               <div>Front-End Web Developer</div>
                         </div>      
                         <div class="cont3">  
                                <div>HTML/CSS,JS,React,....</div>
                        </div>        

<수정된 코드>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>1단계 과제</title>
    <link rel="stylesheet" href="./reset.css" />
    <link rel="stylesheet" href="./codereview.css" />
  </head>
  <body>
    <main class="whole">
      <header>
        <h1><em>권규리</em></h1>
        <h2 class="a1">Front-End 개발자</h2>
      </header>

      <section>
        <article>
          <h2 class="sub_title">About Me</h2>
          <!-- <hr /> -->
          <p class="item1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            einusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim venim, quis nostrud execitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehendrit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </article>

기존의 코드는 메인이 되는 영역과 그렇지 않은 영역을 <div>로만 구분하여 작성했기 때문에 코드가 길어질수록 <div> 태그에 작성한 클래스가 무엇인지에 따라서만 구분이 가능할 뿐 눈에 한 번에 보일정도로 구분이 잘 되지 않았습니다. 코드를 고치면서도 어느부분에서 고쳐야 하는지 찾느라 시간이 걸리기도 했습니다.
수정된 코드는 메인과 헤더 태그를 통해 보기 쉽게 코드를 작성하여 코드를 한 눈에 알아보기 쉬워졌습니다.
수정을 통해 유지보수성이 크게 증가되었습니다.

  • <Header> 이하의 부분중 비슷한 용도의 블록은 <section> 태그 사용

<수정된 코드>

      <section>
        <article>
          <h2 class="sub_title">About Me</h2>
          <!-- <hr /> -->
          <p class="item1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            einusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim venim, quis nostrud execitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehendrit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </article>

        <article>
          <h2 class="sub_title">EXPERIENCE</h2>
          <ul class="item2">
            <li>
              <div class="cont1">
                <p>Awesome Programming Company</p>
                <p>2020-Now</p>
              </div>
              <p class="cont2">Front-End Web Developer</p>
              <p class="cont3">HTML/CSS,JS,React,....</p>
            </li>
            <li>
              <div class="cont1">
                <p>Ministry of Health</p>
                <p>2015-2018</p>
              </div>
              <p class="cont2">UI/UX Designer</p>
              <p class="cont3">Web desi</p>
            </li>
            <li>
              <div class="cont1">
                <p>Freelance Work</p>
                <p>2011-2015</p>
              </div>
              <p class="cont2">Graphic Designer</p>
              <p class="cont3">Graphic Design,Editorial Design</p>
            </li>
          </ul>
        </article>

수정된 코드에서는 영역을 나눌때 Header 이하의 블록은 <section>으로 묶었으며, 그안에서 <article> 태그를 이용하여 구분지었습니다.

section
section 태그는 섹션(부분, 구역, 영역) 들을 그룹화 해서 분리하는 역할을 합니다.
article
article 태그는 문서내에서 그룹화해서 분리하는 역할을 합니다.

<section article tag의 차이점>

▷ article은 내용이 독립적이다.
article 태그는 section과 다르게 독립적으로 존재할 수 있으며 재사용 할 수 있습니다.
즉 article이 좀 더 구체적입니다.
▷ section은 주제별로 구분한 그룹이다.
논리적으로 관계있는 요소 또는 문서를 분리할 때 사용합니다.
※ 논리적인 관계가 없는 요소들을 그룹화 할 경우에는 div를 사용합니다.

3. <hr /> 태그를 css에서 처리할 것.

=> html은 구조 설계 위주, css에서 꾸밈 용도의 태그 사용.
<기존 코드>

    <body>
        <div class="whole">
            <h1><em>권규리</em></h1>
            <h2 class="a1">Front-End 개발자</h2>

            <div>
                <h2 class="a2">About Me</h2>
                <hr>
                <p class="item1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do einusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim venim, quis nostrud execitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehendrit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <h2 class="a2">EXPERIENCE</h2>
                <hr>
                    <div class="item2">
                        <div class="cont1">
                            <div>Awesome Programming Company</div>
                            <div>2021-Now</div>
                        </div>    
                        <div class="cont2">  
                               <div>Front-End Web Developer</div>
                         </div>      
                         <div class="cont3">  
                                <div>HTML/CSS,JS,React,....</div>
                        </div>        

<수정된 코드 - css>

  .sub_title {
    display: flex;
    position: relative;
    justify-content: left;
    margin-left: 25px;
    font-weight: lighter;
  }
  .sub_title::after {
    content: "";
    /* font-size: 10px;
    font-weight: 700; */
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 930px;
    height: 1px;
    background-color: black;
  }

<hr /> 태그를 통해 각 항목을 선으로 구분짓게 만들 수 있습니다. 그렇지만, 이를 html 코드상에서 일일히 사용하는것보다 css코드에서 작성 후 불러오는것이 바람직합니다.
특히, 가상 요소(after / before)를 사용하여 특정 클래스 앞/뒤에 높이가 1px이고 길이가 매우 긴 사각형을 만든다면 선처럼 보이도록 사용할 수 있는데 이것을 이용한다면 hr 태그를 사용하지 않고도 항목을 선으로 구분지을 수 있습니다.

가상 요소(after / before)
CSS 가상 요소는 선택자로 선택한 요소의 뒤에 붙여 표기하는 미리 약속된 키워드를 말합니다.
요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 기능이 정의되어 있으며, 요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있기 때문에 마치 하나의 하위 요소처럼 사용할 수 있어서 가상 요소(Pseudo-Element)라고 합니다.

■ before : 요소 내용 앞쪽에 새 컨텐츠를 추가.
■ after : 요소 내용 끝에 새 컨텐츠를 추가.
■ selection : 마우스 드래그로 선택한 텍스트 컨텐츠 영역을 선택.
■ marker : 목록 아이템 앞에 붙는 마커를 선택.
■ first-letter : 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 글자를 선택.
■ first-line : 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 줄 내용을 선택.

가상 요소 작성 방법

가상 요소는 키워드 앞에 콜론(:) 2개를 연달아 붙여 표기해서 가상 요소임을 표시합니다.
가상 클래스는 콜론(:) 1개로 표시합니다. CSS1, CSS2 때는 가상 요소 또한 콜론 1개로만 표시를 했었지만, CSS3에 오면서 가상 클래스와 가상 요소를 구분하기 위해서 가상 요소에 콜론 2개를 붙이게 되었습니다.
가상 클래스와 가상 요소는 새로운 가상의 요소를 생성하는지에 따라 구분합니다.
호환성을 위해서 대부분의 메이저 웹 브라우저들은 ":before", "::before" 표기 모두를 지원합니다.
두 가지 표기 방법 모두 사용 가능하지만 가상 요소는 "::before"로 표기하는 것이 CSS3 표준 표기 방법입니다.

가상 요소를 사용하면 드래그 해도 콘텐츠가 블록잡히지 않습니다.(불필요한 내용 드래그되지 않음)
content ="", width : 100%, height : 1px --> 콘텐트 내용이 없는 길이가 문서의 100% 길이 이고 높이가 1px인 사각형 블록
=> 색상 지정시 색깔선으로 보이며 폰트 사이즈, 굵기 설정 가능.

CSS Position
position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정합니다.
top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정합니다.
사용법
1. 기준을 잡는다. (예- position: relative;)
2. 이동시킨다. (예- top: 50px;)

Position 속성
요소를 옮기려면 일단 위치를 옮길 기준점을 잡는다.

static : 기준 없음 (배치 불가능 / 기본값)
relative : 요소 자기 자신을 기준으로 배치
absolute : 부모(조상) 요소를 기준으로 배치
fixed : 뷰포트 기준으로 배치
stickey : 스크롤 영역 기준으로 배치

Relative
요소를 일반적인 문서 흐름에 따라 배치합니다.

요소 자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치합니다.

원래 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정합니다.
위치를 이동하면서 다른 요소에 영향을 주지 않습니다.
문서 상 원래 위치가 그대로 유지됩니다.

Absolute
요소를 일반적인 문서 흐름에서 제거합니다.

가장 가까운 위치에 있는 조상 요소를 기준으로 배치합니다.

조상 요소 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정합니다.
조상 중 Position을 가진 요소가 없다면 초기 컨테이닝 블록(요소)를 기준으로 삼습니다. (static을 제외한 값)
문서 상 원래 위치를 잃어버립니다. (아래에 있는 div가 해당 자리를 차지합니다)

가상 요소 => 클래스의 자식입니다.
<absolute> --> 가장 가까운 <relative>를 따라갑니다.
만약, 자신의 자식이 없는 상태인데 <relative> : 아무일도 일어나지 않으며
자신의 부모가 없는 상태인데 <absolute> : 부모가 없으므로 화면 배열 엉망이 됩니다.

부모 밑에 달린 가상요소 자식 요소와의 거리를 떨어뜨리려면 bottom 에 음의 정수를 입력하거나 top에 양의 정수 입력합니다.

4. class명은 요소를 연상할 수 있는 이름으로 작성하되 명명규칙을 따를 것.

<기존코드>

        <div class="whole">
            <h1><em>권규리</em></h1>
            <h2 class="a1">Front-End 개발자</h2>

            <div>
                <h2 class="a2">About Me</h2>
                <hr>
                <p class="item1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do einusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim venim, quis nostrud execitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehendrit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <h2 class="a2">EXPERIENCE</h2>
                <hr>
                    <div class="item2">
                        <div class="cont1">
                            <div>Awesome Programming Company</div>
                            <div>2021-Now</div>
                        </div>    
                        <div class="cont2">  
                               <div>Front-End Web Developer</div>
                         </div>      
                         <div class="cont3">  
                                <div>HTML/CSS,JS,React,....</div>
                        </div>        

a1, a2등의 클래스명을 지정할 경우 공동으로 작업하는 프로젝트의 경우 해당 클래스명이 무엇을 의미하는지 다른 개발자가 알기 어렵고, 혼자서 작업하는 경우에도 주석으로 별도의 기재를 하지않을 경우 시간이 지남에 따라 무엇을 의미하는 클래스인지 기억이 나지 않을 수 있습니다. 그렇기에 이력서 항목 이름을 따와 "about-me" 로 명명하는 등 해당 블록의 의미를 연상시키는 이름 부여하는것이 좋습니다.
클래스명 명명 규칙의 대표적인 것으로는
BEM (Block Element Modifier) 방법론이 있습니다.

BEM
항상 영어 소문자만을 사용합니다. 카멜 케이스 등은 사용하지 않습니다.
일반적으로 한 요소는 하이픈으로 연결합니다. (예를 들면 input-text, button-submit, modal-alert 등등.. )
네이밍의 조합은 형태-의미-순서-상태 순으로 사용합니다. (예시 button-submit-03-disable)
언더스코어는 파일, 폴더, 이미지 등에만 사용합니다(image_elysia_asset_01.png)
숫자를 사용할 때는 확장성을 고려해 1, 2 이런 식으로 표현하지 않고 01, 02, 03… 혹은 001, 002, 003처럼 사용합니다. 앞에 0을 붙이지 않으면, 이미지 정렬 시 1 다음에 2가 오지 않고 10이 오는 등, 정렬 순서가 엉망이 될 수 있기 때문입니다.

코드상에서 소제목의 경우 여러개의 클래스명이 같을 경우 sub_title 로 명명합니다.
class 명을 적절히 작성하여 유지보수성을 증가시키도록 합니다.

5. 텍스트 일 경우 p태그 사용. div 태그의 무분별한 사용 지양

<div> 태그의 수가 늘어날수록 페이지 로드 시간이 길어지며 텍스트 정보는 <p> 태그 안에 작성합니다. 그 밖의 다른 영역을 나누는 용도는 <div> 태그를 중복으로 겹쳐서 사용합니다.

이상으로 첫번째 과제인 이력서 만들기의 코드 리뷰 겸 개념 정리를 마쳤습니다.
더 자세히 알아볼 개념들에 대해서는 별도의 포스팅으로 작성할 예정입니다.

profile
즐코 행코 하세용

0개의 댓글