[JavaScript를 들어가기 전] Selector와 Layout

Selector와 Layout

Selector

해당 element 선택

/* element {...} */
div {...}

전체 element 선택

/* * {...} */
* {...}

class와 id 선택

/* class는 .class, id는 #id로 선택 */
.people {...}
#man {...}

AND 선택

/* class와 id를 만족하는 선택은 붙여서(and) */
#man.people {...}

OR 선택

/* ',' - 다중 선택(or) */
h1, div {...}

여러 element 선택

/* '띄어쓰기' - parent element 중 descendants(자손) element 선택 */
div p {...} 
/* div의 자손 p element 모두 선택 
 * <div>
 *      <p></p> <-- 선택
 *      <ul>
 *          <li>
 *              <p></p> <-- 선택
 *          </li>
 *      </ul>
 *  </div>
 */

자식(children) element 선택

/* '>' - parent element 중 children(자식) element 선택 */
div > p {...}
/* div의 자식 p element 모두 선택 
 * <div>
 *      <p></p> <-- 선택
 *      <ul>
 *          <li>
 *              <p></p>
 *          </li>
 *      </ul>
 *  </div>
 */

가장 가까운 형제(Sibling) element 선택

/* '+' - 해당 element에서 가장 가까운 아래쪽 형제 element 한개 선택 */
div + p {...}
/* div의 아래쪽 형제 중 가장 가까운 p element 선택 
 * <div>
 *      <p></p> <-- 선택
 *      <ul>
 *          <li>
 *              <p></p>
 *          </li>
 *      </ul>
 * </div>
 * <p></p> <-- 선택
 * <p></p>
 */

형제(Sibling) elements 모두 선택

/* '~' - 해당 element에서 아래쪽 형제 element 모두 선택 */
div ~ p {...}
/* div의 아래쪽 형제 p element 선택 
 * <div>
 *      <p></p> <-- 선택
 *      <ul>
 *          <li>
 *              <p></p>
 *          </li>
 *      </ul>
 * </div>
 * <p></p> <-- 선택
 * <p></p> <-- 선택
 */

해당 element 중 attribute의 value가 일치하는 elements 선택

/* element[attribute="value"] - 해당 element 중 해당 attribute을 갖고, 속성의 값이 "value"이면 선택*/
p[id="man"]{...}

해당 element 중에서 첫 번째 자식 엘리먼트를 선택

/* 'element:first-child'*/
div:first-child {...}

해당 element 중에서 마지막 자식 엘리먼트를 선택

/* 'element:last-child'*/
div:last-child {...}

해당 element 중에서 n번째 자식 엘리먼트를 선택

/* 'element:nth-child(n)' */
div:nth-child(2) {...}
div:nth-child(2n) {...} /* 짝수번째 엘리먼트 선택 */
div:nth-last-child(2) {...} /* 마지막에서 두번째 선택 */

해당 element의 형제 element 중에서 첫번째 element 선택

/* 'element':first-of-type */
div:first-of-type {...}

해당 element의 형제 element 중에서 마지막 element 선택

/* 'element':last-of-type */
div:last-of-type {...}
div:last-of-type(2) {...}  /* 처음에서 두번째 형제 element 선택 */

해당 element의 형제 element 중에서 n번째 element 선택

/* 'element':nth-of-type(n) */
div:nth-of-type(2) {...}
div:nth-of-type(2n) {...}
div:nth-last-of-type(2) {...} /* 마지막에서 두번째 형제 element 선택 */

element 중에서 인자가 아닌 element 모두 선택

/* element:not(#id|.class|...) */
div:not(#man) {...}
div:not(:nth-of-type(2n)) {...}

Layout

기본적으로 화면을 분할할 때, 수직분할과 수평분할이 있습니다. 이는 대부분의 콘텐츠의 흐름이 위에서 아래, 왼쪽으로 오른쪽으로 설정하여 작업이 진행하기 때문입니다.

• 수직분할 : 콘텐츠가 가로로 배치될 수 있도록 화면을 수직으로 분할

• 수평분할 : 콘텐츠가 세로로 배치될 수 있또록 화면을 수평으로 분할

Layout Reset

웹브라우저 마다 기본적인 스타일이 존재하여 직접 디자인한 페이지를 열었을때 원하는 스타일 적용이 되지 않을 경우가 있습니다. 따라서, 기본 스타일링을 제거 후 디자인할 수 있습니다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

display: flex

flex는 flexible의 줄인말로 유연하다는 뜻을 가집니다. flex로 layout을 구성하면 유연하게 설정할 수 있습니다.

section {
    display: flex; /* flex 설정 */

    /* flex-direction - flex 요소 방향 지정 (기본값 : row) */
    flex-direction: column;

    /* justify-content - 수평 정렬 */
    justify-content: center;
    /*
     * 주요 옵션
     * - flex-start <-- default
     * - flex-end
     * - center
     * - space-between 
     */

    /* align-items - 수직 정렬 */
    align-items: center;
    /* 
     * 주요 옵션
     * - flex-start
     * - flex-end
     * - center
     * - stretch <-- default
     */


}

section > div {
    /* flex: <grow> <shrink> <basis> - children element에 적용하는 속성으로, grow(팽창 지수 - 1/n), shrink(수축 지수 - 1/n), basis(기본 크기)를 의미(기본적으로 왼쪽부터 콘텐츠의 크기만큼 배치)*/
    flex: 0 1 auto; /* 기본값 */
    /* flex-grow - 다른 children element의 content 길이를 제외한 나머지 길이를 기준으로 길이 비율을 정함(n = n/1+<other grow>) */
    flex-grow: 0;

    /* flex-shrink - flex-grow와는 반대로 설정한 비율만큼 길이가 줄어듦(단, flex-grow 속성과 함께 사용 x)*/
    flex-shrink: 1;

    /* flex-basis: flex-grow 속성의 값이 0일 경우, 이 속성의 값으로 길이 유지 */
    /* + width와 flex-basis 속성을 동시에 적용한 경우에는 flex-basis의 우선순위가 더 높음 */
    /* + flex-basis를 사용하지 않을 경우, width 대신 max-width 사용 */
    flex-basis: auto;
}