자기소개 웹페이지 제작

수경, Sugyeong·2021년 10월 2일
1
post-thumbnail

HTML / CSS 를 통하여 자기소개 웹페이지를 만들어 보았다. 배우면서 새로 알게된 점이나 느낀점 등을 기록해보았다.

자기소개 웹페이지 바로가기 :)
*개인정보를 위하여 비공개 처리함


1. Wireframing

핀터레스트나 다른 분들이 만드신 웹페이지 등을 참고하여 나만의 웹페이지의 디자인을 대략적으로 구성해보았다. 총 3페이지이며 nav bar, main content, footer로 구성되어 있다. nav bar의 menu 링크를 통해 각 페이지로 연결된다.



2. HTML


  • index.html

  • interest.html

  • resolution.html

3. CSS


  • index.html

  • interest.html

  • resolution.html


4. 새로 알게된 점


🥝 BEM

CSS 클래스의 이름을 짓는 방식에는 여러 방식이 있는데 그 중 BEM 이라는 방법론이 가장 유명하다. BEM은 Blocks, Elements and Modifier 의 약자이며 말 그대로 이름을 지을 때 위의 순서대로 짓는다는 의미이다.

  • Block
    🥕 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트(A functionally independent page component that can be reused)를 블럭이라 부른다. 쉽게 말해 레고의 블럭처럼 쉽게 떼고 붙일 수 있다.
    🥕 naming : 이름은 라틴 문자, 숫자 및 대시로 구성될 수 있다. .block , .search-form 등 으로 표기할 수 있다.
    🥕 HTML : <div class="block">...</div> 으로 표기한다.
    🥕 CSS : .block { color: #042; } 으로 표기한다.

  • Element
    🥕 블럭의 구성요소이다. 엘리먼트는 의존적인 형태를 띄기 때문에 자신이 속한 블럭 내에서만 의미를 가지기 때문에 다른 곳에서 해당 엘리먼트를 사용할 수 없다.
    🥕 naming : 이름은 라틴 문자, 숫자 및 대시 및 밑줄로 구성될 수 있다. CSS 클래스는 블록 이름과 두 개의 밑줄과 요소 이름으로 구성된다. .block__elem , .search-form__button 등 으로 표기할 수 있다.
    🥕 HTML : <span class="block__elem"> </span> , <button class="search-form__button">Search</button> 등 으로 표기한다.
    🥕 CSS : .block__elem { color: #042; } , .search-form__button { } 등 으로 표기한다.

  • Modifier
    🥕 블럭이나 엘리먼트의 속성을 담당한다. 생긴 게 조금 다르거나, 다르게 동작하는 블럭이나 엘리먼트를 만들 때 사용한다. CSS 클래스는 블록 혹은 요소의 이름과 두 개의 대시로 구성된다.
    🥕 naming : 이름은 라틴 문자, 숫자 및 대시 및 밑줄로 구성될 수 있다. .block--mod , .block__elem--mod , .block--color-black , .block--color-red. 등 으로 표기할 수 있다.
    🥕 HTML : <div class="block block--size-big block--shadow-yes">...</div> , <li class="tab__item tab__item--focused">탭 01</li> 등 으로 표기한다.
    🥕 CSS : .block--hidden { } , .block--mod .block__elem { } , .block__elem--mod { } 등 으로 표기한다.

실제로 사용해보니 일반 요소들과 그에 종속하는 요소들의 구조를 쉽게 파악할 수 있었다. 관리하기에도 더욱 편리했다. 개인 프로젝트 뿐만 아니라 팀 프로젝트 상에서도 BEM 방법을 사용한다면 명확하게 이해하고 프로젝트를 진행하는 데 있어 많은 도움이 될 것 같다.

🥝 : root

코드의 양이 방대하게 많아짐에 따라 폰트 크기, 컬러, 두께 등의 CSS 디자인 요소를 일일히 수정하기 어려워지는 상황이 발생하게 된다. 이 때 효율적인 유지보수를 위하여 :root 와 같은 CSS 가상 클래스를 사용하게 된다. 가상 클래스는 선택된 요소들의 어떤 특정한 상태를 구체화하는 선택자가 추가된 키워드이며 id 선택자나 class 선택자로 사용할 수 없는 요소들을 선택하는 선택자이다.

  • Tree-structural pseudo-classes
    트리 구조적 가상 클래스는 문서 트리 내의 요소의 위치와 관련이 있다. :root 가상 클래스의 적용 우선순위가 html 보다 높다. :root 가 이에 속한다. 그 외 :nth-child , :nth-last-child 등이 있다.

e.g.

  • 변수 선언 시 (-) 하이픈과 (:) 콜론 사용
:root {
  /* Color */
  --color-white: #ffffff;
  --color-light-white: #eeeeee;
  --color-dark-white: #bdbdbd;
  --color-pink: #fe918d;
  --color-dark-pink: #ff6863;
  --color-dark-grey: #4d4d4d;
  --color-grey: #616161;
  --color-light-grey: #7c7979;
  --color-blue: #73aace;
  --color-yellow: #fff7d1;
  --color-orange: #feb546;
  --color-black: #000000;
  --color-light-beige: rgb(238, 232, 212);
  /* Font size */
  --font-large: 48px;
  --font-medium: 28px;
  --font-regular: 18px;
  --font-small: 16px;
  --font-micro: 14px;
  /* Font weight */
  --weight-bold: 700;
  --weight-semi-bold: 600;
  --weight-regular: 400;
  • 변수 사용 시 var 변수로 선언한 뒤 소괄호 뒤에 속성 값 입력
h1 {
  font-size: var(--font-large);
  font-weight: var(--weight-bold);
  color: var(--color-grey);
  margin: 0px 0px;
}
h2 {
  font-size: var(--font-medium);
  font-weight: var(--weight-semi-bold);
  color: var(--color-grey);
  margin: 8px 0;
}

5. 느낀 점


github에서 웹페이지를 퍼블리싱 하는 과정에서 문제가 발생하였다. 😱 그동안 비공개로 커밋을 해오다가 공개로 전환 커밋하고 최종 퍼블리싱을 하는 데 404 Not Found 에러가 발생하였다. 사유는 index.html 파일이 없다는 것이었다!

살짝 멘붕이 왔지만 구글링 후 문제의 원인을 금방 찾을 수 있었다. index.html 이 아닌 Index.html 로 커밋을 해왔던 것이다. 대소문자 구분이 중요한 상황인데 대문자로 커밋을 하여 에러가 발생한 것이다.

대문자를 소문자로 고치고 다시 커밋을 하여도 웹페이지는 뜨지 않았다. 그래서 다시 구글링하여 몇 가지 비슷해보이는 원인의 해결책들을 적용해보았다. read.me 파일도 만들고 빈 커밋을 만들어보았더니 그제서야 적용이 되었다.

아래는 내가 멘탈을 부여잡고 이것 저것 커밋해본 결과들이다. 😭

해결을 하였으나 사실 어떤 부분에서 에러가 수정되었는지 명확하게 파악하기 어려웠다. 다음에 이와 똑같은 에러가 발생하면 그 때는 정말 차근차근 추적을 해나가서 문제의 원인과 해결방법을 명확히 파악할 것이다.

직접 자기소개 웹페이지를 제작하는 것은 처음이었기 때문에 맨 땅에 헤딩하듯 만들게 되었다. 역시 개념을 알고 있는 것과 실천하는 것은 어렵다. 필요할 때마다 머릿속에서 쏙쏙 뽑아서 사용하거나 정확히 검색하여 필요한 정보를 얻을 수 있어야 하는데 아직은 미숙하다. HTML과 CSS 기본기가 중요하다는 것을 다시 한번 깨닫게 되었다. 그래도 도전을 하는 나에게 박수를 보내고 싶다. 👏🏻

개념의 예시만 공부하는 것보다 체득 속도가 빠르게 느껴졌다. BEM 방법론이 그러했다. 이번에 웹페이지를 제작하며 처음 알게 된 개념이었는데 직접 적용해볼 수 있어서 유익했다. 엘리의 드림코딩 아카데미에서 배운 내용이 많은 도움이 되었다. 참고도 하였다.

아직은 HTML과 CSS 만을 사용하여 웹페이지를 만들어보았는데 앞으로는 Javascript 도 함께 사용하여 동적인 웹페이지를 구현해내고 싶다. 시간적 여유가 생긴다면 현재 만든 웹페이지에 Js 코드를 한 줄씩이라도 추가해볼 것이다.


<출처>
nana_log
Get BEM
디자이너의 기록
MDN

0개의 댓글