[인스타 클론] 사이트제작-박스모델 분석

unu·2021년 1월 4일
네이밍컨벤션레이아웃메인섹션인스타그램카멜클론
0

JavaScript

목록 보기
1/4
post-thumbnail

멘토님께 인스타 클론 사이트를 제작하라는 퀘스트를 받았다.
아직 html과 css 밖에 모르는데 js는 심지어 아직 개념에 대한 수업만 조금 받았을 뿐인데, 이런 나도 제작이 가능할까?

인스타그램 로그인 페이지

우선 새롭게 설계하기 전에 로그인 페이지를 검사, 분석했다.

1. 로그인 페이지 분석


크게 section이 있었고, section 안에 main과 footer가, main 안에는 article이 있고, article은 다시 이미지 div와 로그인관련 div 태그로 나뉘었다.

분석하는 중에 나온 태그들은 이름으로 대충 무엇을 의미하는지는 알겠으나 구체적인 사용법을 알지 못해서 조금 알아보기로 했다.

레이아웃 관련 태그

section 태그

HTML section 요소는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통 section은 제목을 포함하지만, 항상 그런 것은 아닙니다.

  • 각각의 section을 식별할 수단이 필요합니다. 주로 제목(h1-h6) 요소를 section의 자식으로 포함하는 방법을 사용합니다.
  • 요소의 콘텐츠를 따로 구분해야 할 필요가 있으면 article 요소를 고려하세요.
  • section요소를 일반 컨테이너로 사용하지 마세요. 특히 단순한 스타일링이 목적이라면 div요소를 사용해야 합니다. 대개, 문서 요약에 해당 구획이 논리적으로 나타나야 하면 section이 좋은 선택입니다.

    main 태그

    HTML main요소는 문서 body의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어져 있습니다.

  • main 요소의 콘텐츠는 문서의 유일한 내용이어야 합니다. 사이드바, 탐색 링크, 저작권 정보, 사이트 로고, 검색 폼 등 여러 문서에 걸쳐 반복되는 콘텐츠는 포함해선 안됩니다. 그러나 검색 폼이 페이지의 주요 기능이라면 예외로 둘 수 있습니다.
  • main은 요소 개요에 영향을 주지 않습니다. body 등의 요소나 h2와 같은 제목 요소와 달리 main은 페이지의 개념적 구조를 바꾸지 않으며 온전히 정보 제공용입니다.

    HTML footer 요소는 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.

  • address 요소로 감싼 작성자 정보를 footer 요소에 배치하세요.
  • footer 요소는 구획 콘텐츠가 아니므로 개요에 새로운 구획을 추가하지 않습니다.

    article 태그

    HTML article 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다.

    form 태그

    HTML form 요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다. form 요소를 꾸밀 땐, 모든 elements의 유효성을 나타내는 CSS :valid와 :invalid 의사 클래스를 사용할 수 있습니다. (아래와 같은 다양한 특성을 갖고 있다)

  • accept-charset: 스페이스로 구분한, 서버가 허용하는 문자 인코딩의 목록
  • action: 양식 데이터를 처리할 프로그램의 URI. button, input type="submit", input type="image" 요소의 formaction 특성으로 재정의
  • autocapitalize: 양식 요소 내에서 영문을 입력할 때 자동으로 대문자 변환하는 방식. iOS Safari에서만 사용하는 비표준 특성입니다. 각 요소의 autocapitalize 특성이 form에 정의된 값을 재정의합니다.
  • autocomplete: 입력 요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타냅니다. 각 요소의 autocomplete 특성이 form에 정의된 값을 재정의합니다.
  • enctype: method 특성이 post인 경우, enctype은 양식 제출 시 데이터의 MIME 유형을 나타냅니다.
  • method: 양식을 제출할 때 사용할 HTTP 메서드.
  • id
  • novalidate: 지정한 경우 양식의 유효성 검증을 건너뜁니다. novalidate 특성을 지정하지 않은(양식의 검증을 수행하는) 경우에도 button, input type="submit", input type="image" 요소의 formnovalidate 특성으로 재정의할 수 있습니다.
  • target: 양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름. 가능한 값은 브라우징 맥락(탭, 창, iframe)의 이름 또는 키워드입니다. 지정한 경우, 버튼의 양식 소유자가 가진 target 특성보다 우선합니다.

    • form과 관련된 태그

    input 태그

    HTML input 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입력 유형과 특성의 다양한 조합 가능성으로 인해, input요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나입니다.
    input 요소의 동작 방식은 type 특성에 따라 현격히 달라지므로, 각각의 유형은 *별도의 문서에서 더 자세히 확인할 수 있습니다. 특성을 지정하지 않은 경우, 기본값은 text입니다.

    *참조 문서

    label 태그

    HTML 요소는 사용자 인터페이스 항목의 설명을 나타냅니다.
    input과 함께 많이 사용된다. 자세한 항목은 아래를 참조

    *참조 문서

    HTML 설계

    분석한 대로 설계를 하니 큰 문제는 없었다. 다만 css의 역할을 크게 느꼈다. 마치 인터넷 오류있을 때 왼쪽 정렬되어 뜨는 네이버 홈페이지같은 아주 태초의 모습을 볼 수 있었다.

    작성 과정에서 곤란함을 느낀 건 클래스의 지정이었다. 저자가 어떤 것들에 같은 클래스를 줬는지 확인하는 것이 좀 번거로웠다.

    이때 멘토님이 지나가면서 두가지 충고를 해주었는데, 하나는 네이밍컨벤션[1]에 관한 것이었고 다른 하나는 모르는 태그는 공부하기 전까지 쓰지 말라는 것이었다.
    내가 input 태그를 쓸 때 aria-label[2]이 써 있던 것을 그냥 써버려서 그런 말을 해준건데 찾아보니 완전 처음보는 속성이라 어렵긴 하더라.
    잘 모르는 속성 보다는 엘레멘트 작성과 레이아웃을 잡기를 먼저 하는 게 좋을 것 같다.

    문제1 이미지 경로추출


    백그라운드 이미지가 나타나지 않아서 경로를 잘못 추출했을 가능성을 생각했는데 src를 scr로 표기한데서 온 문제였다. 경로추출을 이해할 때 이 사이트를 참고했는데, 그림으로 잘 나타냈다.

    문제2 flex 정렬


    푸터 안에 있는 플렉스 박스를 정렬해야 하는데, align-self, align-item 등 속성들의 정확한 기능을 몰라서 정리를 해보려 한다. (자료출처 1분코딩)

    “justify”는 메인축(오뎅꼬치) 방향으로 정렬
    “align”은 수직축(오뎅을 뜯어내는) 방향으로 정렬


    justify-content (메인축 방향 정렬)

    속성: 값기능
    justify-content: flex-start;아이템들을 시작점으로 정렬합니다.
    justify-content: flex-end;아이템들을 끝점으로 정렬합니다.
    justify-content: center;아이템들을 가운데로 정렬합니다.
    justify-content: space-between;아이템들의 “사이(between)”에 균일한 간격을 만들어 줍니다.
    justify-content: space-around;아이템들의 “둘레(around)”에 균일한 간격을 만들어 줍니다.
    justify-content: space-evenly;아이템들의 사이와 양 끝에 균일한 간격을 만들어 줍니다.



    align-items (수직축 방향 정렬)

    속성: 값기능
    align-items: stretch;(기본값)아이템들이 수직축 방향으로 끝까지 쭈욱 늘어납니다.
    jalign-items: flex-start;아이템들을 시작점으로 정렬합니다.
    align-items: flex-end;아이템들을 끝으로 정렬합니다.
    align-items: center;아이템들을 가운데로 정렬합니다.
    align-items: baseline;아이템들을 텍스트 베이스라인 기준으로 정렬합니다.


    align-content(여러 행 정렬)

    속성: 값기능
    flex-wrap: wrap;아이템들이 수직축 방향으로 끝까지 쭈욱 늘어납니다.
    align-content: stretch;
    align-content: flex-start;
    align-content: flex-end;
    align-content: center;
    align-content: space-between;
    align-content: space-around;
    align-content: space-evenly;



    align-self (수직축으로 아이템 정렬)

    align-items의 아이템 버전입니다. align-items가 전체 아이템의 수직축 방향 정렬이라면, align-self는 해당 아이템의 수직축 방향 정렬입니다.
    기본적으로 align-items의 값을 상속받으나 우선권있음.

    flex-basis(유연한 박스의 기본 영역)

    flex-basis는 Flex 아이템의 기본 크기를 설정합니다(flex-direction이 row일 때는 너비, column일 때는 높이)


    [1]네이밍 컨벤션:
    내가 작성한 선택자의 이름이 css에 적합하지 않다는 충고였는데, 왜 적합하지 않은지 구체적인 이유를 알면 이해와 기억하기에 좋을 것 같아 자료를 찾았다.
    자료를 요약하자면 언어의 구문이 이미 정해져 있으며 더 나은 작동을 위해 저자도 일관성있게 코드를 작성해야 한다는 내용이다.

    CSS는 기본적으로 소문자 + 하이픈을 사용해 표현하는 구문의 언어입니다. CSS 셀렉터에 같은 규칙을 적용함으로써 우리가 작성하는 시트의 논리적 일관성을 더 높게 유지할 수 있습니다.

    그렇다면 언어별로 사용되는 케이스 스타일을 미리 알면 좋을 것 같아, 케이스 스타일 별로 용례, 어느 언어에서 주로 사용되는지를 정리했다.

    케이스 스타일용례사용처
    camel caseloginFooterJavaScript, Java(변수, 함수)
    pascal caseLoginFooterJava(클래스), C#(변수)
    snake caselogin_footerc, c++, php, python
    kebab caselogin-footerhtml, css

    이외에 헝가리언 노테이션이라고 있었는데 지금은 쓰지 않기를 권고하고 있다고 들어 적지 않았다.

    [2]input aria-label: Web Accessibility Initiative의 Accessible Rich Internet Applications(WAI ARIA 또는 ARIA)는 접근성 문제와 관련된 속성이라는 듯하다. aria-label, aria-control, aria-live 와 같은 기능으로 기존의 요소 의미 체계를 수정하거나 네이티브 의미 체계가 없는 요소에 의미 체계를 추가할 수 있다.

    profile
    unu
    나 미대 나온 개발자야~
    다음 포스트

    [인스타클론] 반투명한 안쪽 테두리가 있는 이미지

    0개의 댓글