노드버드 리뉴얼 강의 정리 #10 반응형 그리드 사용하기

jakeseo_me·2020년 7월 26일
0

노드버드리뉴얼

목록 보기
11/13

노드버드 리뉴얼 강의 정리 #10 반응형 그리드 사용하기

Prologue

노드버드에서 배운 지식들로 레퍼런스를 만들어보자.

주요 내용

반응형 그리드를 사용할 때 유의할 점 (원칙)

가장 작은 해상도에서의 모바일 > 태블릿 > 데스크탑 순으로 생성하는 것이 좋다. 왜냐하면 나중에 디버깅하기 편하기 때문이라고 한다. 아직 경험해본적이 없어서 공감은 되지 않았지만 일단 적어본다.

그리고 가로를 먼저 디자인하고 세로를 디자인한다. Row먼저 생성하고 그 안에 Column을 넣는 방식으로 한다.

위와 같은 원칙들은 꼭 지켜주는 것이 아무래도 추후에 코드를 유지보수할 때 많이 도움될 것이다.

반응형 그리드 개념 익히기

사이즈 이름 개념

  1. xs(extra small screens / mobile phones) : 모바일
  2. sm(small screens / tablets) : 태블릿
  3. md(medium screens / some desktops) : 작은 데스크탑
  4. lg(large screens / remaining desktops) : 일반 데스크탑

이 스택오버플로 링크에 사이즈에 대한 정보가 잘 나와있다.

사이즈 크기 개념

기본으로 24를 전체 화면이라 생각하면 된다. 그래서 우리가 할당한 사이즈 n은 화면에서 n/24를 차지한다고 보면 된다.

6이라고 했을 때, 6/24면, 화면의 약 1/4을 차지한다고 보면 되는 것이다.

반응형 그리드 코드 작성하기

<Row>
  <Col xs={24} md={6}>
    왼쪽 메뉴
  </Col>
  <Col xs={24} md={12}>
    {children}
  </Col>
  <Col xs={24} md={6}>
    오른쪽 메뉴
  </Col>
</Row>

이렇게 코드를 작성하면 어떻게 될까? 화면이 작을 때는 각 Col이 화면 전체를 차지하겠지만, 화면이 커지면 (medium screen 만큼 커지면) 각 1/4 2/4 1/4 씩 화면을 차지하게 될 것이다.

n/24이기 때문에 24를 넘어가면 한 화면 자체를 넘어가게 되니 주의해야 한다.

큰 화면일 때 (3등분)

모바일만큼 해상도가 작아졌을 때

a태그를 사용할 때, Tapnabbing 공격에 대비하기

<a href="https://naver.com" target="_blank" rel="noreferrer noopener">
  NAVER
</a>

위와 같이 rel="noreferrer noopener" 속성을 꼭 주어야 한다. 그렇지 않으면, 이 페이지에 나와있는 방법대로 공격 당할 수 있다.

아마 이 공격을 대비하기 위해서는 내가 a태그에 저 속성을 부여하는 것도 중요하겠지만, a태그를 감지하여 자동으로 rel="noreferrer noopener"를 붙여주는 방법을 써야할 것 같다.

보안 위협은 자식 탭에서 부모 탭의 location정보를 수정할 수 있는데서 시작한다.

profile
대전에 있는 (주) 아이와즈에서 풀스택 웹개발자로 일하고 있는 서진규입니다. 주로 Jake Seo라는 닉네임을 많이 씁니다. Javascript를 좋아합니다.

0개의 댓글