[Java 풀스택 과정 강의] 1월 5-6일차

※ TIL와는 별개로 적는 개인 개발 일지라서 말은 좀 편하게하는 페이지입니다.
일지이기 때문에 일기의 성격이 더 강합니다.

 

 

1월 5일

1월 5일은 개인적인 사정으로 쉬었기 때문에 주셨던 자료를 보면서 확인하겠다. 이에 따라 6일과 붙인다.

이어서 CSS에 대한 내용이다. 사실 TIL 기록에서 선택자(상속 선택자를 포함하여)에 대해서는 이미 다뤘지만, nth-child, 동적 선택자 등등은 여기에서도 제대로 다루지 않았다.

 

선택자

선택자에 대해서는 다음과 같이 정리할 수 있다.

 

element { /*element라는 요소를 선택*/ }
.element { /*element라는 class를 가진 대상을 선택*/ }
#element { /*element라는 id를 가진 대상을 선택*/ }
input[name="element"]  { /*element라는 이름을 가진 input을 선택*/ }
input:disabled { /*disabled 상태인 input을 선택*/ }

/** 상속 선택자 **/
parent child { /*parent의 자손인 child를 선택*/ }
parent > child { /*parent의 자식인 child를 선택*/ }
element ~ sibling { /*element의 형제인 sibling을 선택*/ }
element + sibling { /*element의 바로 옆에 있는 sibling을 선택*/ }

/** 구조 선택자 **/
parent child:first-child { /*parent의 자식에서 가장 첫번째 요소인 child를 선택 */ }
parent child:last-child { /*parent의 자식에서 가장 마지막 요소인 child를 선택 */ }
parent child:nth-child(n) { /*parent의 자식에서 n번째인 child를 선택 */ }
parent child:nth-child(even) {/*parent의 짝수번째인 child를 선택 */ }
parent child:nth-child(odd) {/*parent의 홀수번째인 child를 선택 */ }
parent child:nth-of-type(n) { /* parent의 자식인 child 중에 n번째를 선택  */ }

/** 동적 선택자 **/
element:active { /*element를 클릭 할 때*/ }
element:hover { /*element를 마우스 오버할 때*/ }

 

최근은 first-child나 last-child보단 nth-child를 많이 쓰는 듯하다.

nth-of-type과 nth-child의 차이가 궁금할 텐데, nth-child는 n번째 자식인 것이 선행되고, nth-of-type은 element라는 것이 선행된다. 즉, nth-child는 AND 문에 가깝다. n번째 자식이자 해당 선택자의 요소인 것. 반면 nth-of-type은 자식인 것은 관계 없고, 해당 선택자(타입)에서 n번째 요소인 것이다.

 

덧붙여 nth-of-type은 class나 id와 같은 식별은 되지 않고 오로지 요소 선택과만 같이 사용할 수 있다.

이후로는 overflow, shadow, opacity와 같은 박스 꾸밈에 관한 정리가 있었다.

 

CSS 단위

1. 키워드

inline, inline-block, block과 같이 키워드에 해당하는 스타일이 자동 적용되는 것이다. 각 요소(tag)에 따라서 키워드가 다르게 나타날 때도 있다. 자주 쓰이는 키워드 태그는 다음과 같다. 상속과 관련해서는 TIL 게시글에 추가한 부분이 있다.

currentColor의 경우 참조 순서가 있다. 참조 순서는 다음과 같다.

 

모든 곳에서 적용되는 것은 아니고, 컬러를 사용해야할 때 쓰는 키워드라고 할 수 있겠다. border의 경우 기본적으로 currentColor가 적용되어 있다. 이 때문에 폰트 색상(color)이 수정되면 같이 수정된다. 이 참조들은 기본적인 CSS 상속과 비슷하다.

 

2. 크기

크기 단위에 따라서 사용한다. width나 font-size 등 크기를 지정해야하는 곳에서 자주 사용한다. 다음처럼 정리할 수 있다.

뷰포트에 대한 것은 후술.

 

여기서 em과 rem이라는 것이 눈에 띄는데, 둘은 다 상대단위다. px와는 달리, 다른 요소에 그 크기가 영향을 받는 것이다. 예를 들어 em의 경우 font-size가 16px라면, 1em는 16px가 된다.

 

.class {
  font-size:20px;
  width:1em; /* 이 경우 1em은 20px가 된다. */
}

 

rem의 경우는 루트의 폰트 크기를 참조한다고 되어 있는데, 구체적으로 말하면 HTML요소- 브라우저의 폰트 크기를 사용한다. html에서 따로 폰트의 기본 크기를 설정하지 않았다면, 브라우저의 폰트 크기가 그대로 된다. 즉, 기기의 폰트 크기를 조정하는 사람들을 위한 용도인 것. 이 부분들은 아래에 말할 반응형 웹의 최적화와도 긴밀하다고 할 수 있다.

 

3. 색상

색상을 지정한다. color에서 자주 사용한다. 색상 단위는 다음과 같다. 

여기서 alpha값은 0부터 1까지 있는데, 0에 가까울 수록 투명, 1에 가까울 수록 불투명해진다.

 

4. url

url('')로 명시된, 그야말로 외부링크 등 파일/미디어를 불러올 때 사용한다.

 

 

1월 6일

계속해서 CSS에 대해서 다룬다. JS에 대한 이론을 끝쯤에 했다. 

 

반응형 웹

기기에 따라서 화면을 다르게 보여주기 위한 개념이다. 스마트기기의 보편화에 따라서 이 반응형 웹의 지원이 더 중요해지고 있다.  반응형 웹에서 핵심적인 부분은 다음과 같다.

 

1. 가변 그리드

크기를 %(퍼센트)로 표현한다. 부모의 크기(부모가 없다면 창의 크기)를 참조하여, 딱딱한 px를 대신하여 좀 더 유연하게 표현한다. 다만 %를 사용할 때 고정적인 크기가 필요할 때도 있기도 하고, 여러모로 기기에 맞춤형태는 아니기에 한계가 있다.

 

 

2. 미디어 쿼리

브라우저의 크기를 감지하여 이에 따라서 스타일의 조정이 가능하도록 하는 것이다. 미디어를 감지하기도 한다(tv나, screen 등). 다음과 같이 쓰인다.

 

@media screen { /* 화면&스마트기기용 */ }
@media print { /* 인쇄용 */ }                     
@media screen and (min-width: 768px) { /* 스마트기기용이자 크기가 768px 이상일 경우 */ }        
@media all and (max-width: 767px) {  /* 크기가 767px 이하일 경우 */ }

 

3. 뷰포트

화면에 보이는 실제 영역을 감지한다. 스마트 기기는 실 해상도가 1000이 넘어도 실 화면은 300px가 안 되기도 한다. 그 경우에는 해상도에 맞춰 작업하여도 의미가 없다. 이 때문에 뷰포트를 사용한다. 미디어쿼리의 정확도를 높이기 위해서 사용한다. 다음 메타태그를 사용한다.

<meta name="viewport" content="width=divice-width, initial-scale=1, minimum-scale=1, maximun-scale=1, user-scalable=no">

 

여기서 사용된 속성들은 다음과 같은 뜻이다.

• width 뷰포트의 너비
• initial-scale 뷰포트의 초기 배율. 1이하는 축소, 1이상은 확대
• minimum-scale 뷰포트의 최소 축소 비율. 기본값은 0.25
• maximum-scale 뷰포트의 최대 확대 비율. 기본값은 5
• user-scalable 뷰포트의 확대/축소 여부. 기본값은 yes. no를 설정하면 사용자가 임의로 축소/확대가 불가능하다.

그리고 vw나 vh와 같은 단위는, 바로 이 뷰포트를 기반으로 나온다.

 

 

플렉서블 박스

실제로도 자주 사용되는 플렉서블 박스다. 이전(링크)에 float과 함께 이야기했지만, 플렉서블 박스를 사용하는 것이 기본이다. table이야 grid와 겸용하는 경우가 많다지만, flex의 경우는 겸용하는 경우를 거의 못 봤다.

일종의 wrapper 형태로 content를 감싸는 형태다. 부모는 display:flex로 설정하여 사용할 수 있다. 이 부모 안에 있는 자식들은 flex-item이라고 불리는데, 이 자식들은 부모에서 새로운 정렬을 제시하지 않으면 움직이기 어렵다.

 

flexable box는 신기하게도 축이 존재하는데, 이 축에 따라서 item이 정렬된다. flex에 관한 내용은 다음 코드블럭으로 정리해놓았다.

 

  display: flex; /* 기본 설정 */
  
  /* 방향(flex-direction) */
  flex-direction: row;           /* 가로로 배치 (기본값) */
  flex-direction: column;        /* 세로로 배치 */
  flex-direction: row-reverse;   /* 가로 역순 */
  flex-direction: column-reverse; /* 세로 역순 */
  
  /* 가로 정렬 (flex-direction이 row일 때, flex-direction이 column이라면 이쪽이 세로가 된다.) */
  justify-content: flex-start;     /* 왼쪽 정렬 */
  justify-content: flex-end;       /* 오른쪽 정렬 */
  justify-content: center;         /* 가운데 정렬 */
  justify-content: space-between;   /* 양 끝 정렬 */
  justify-content: space-around;    /* 양쪽 여백 동일 */
  justify-content: space-evenly;    /* 모든 간격 동일 */
  
  /* 세로 정렬 (flex-direction이 row일 때, flex-direction이 column이라면 이쪽이 가로가 된다.) */
  align-items: flex-start;    /* 위쪽 정렬 */
  align-items: flex-end;      /* 아래쪽 정렬 */
  align-items: center;        /* 세로 가운데 정렬 */
  align-items: stretch;       /* 늘려서 채움(기본값) */
  align-items: baseline;      /* 텍스트 기준선 맞춤 */
  
  /* 줄바꿈 */
  flex-wrap: nowrap;         /* 한 줄 (기본값) */
  flex-wrap: wrap;           /* 넘치면 다음 줄로 */
  flex-wrap: wrap-reverse;   /* 여러 줄 역순 */
  
  /* 여러 줄일 때 세로 정렬 */
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  
  /* 요소 사이 간격 */
  gap: 10px;

 

flex 정렬의 상세에 대해서는 그림으로 그려보았다. 사실 좋은 블로그가 많아서 그쪽을 참고하는 게 더 좋겠지만… 복습할 겸 기록해본다.

 

각각 가로와 세로 정렬

 

grid에 대해서는 아쉽게 다루지 않아 정리하지 않는다. 다만, grid 또한 꽤 많이 사용되기 때문에 이 부분은 보충학습으로 처리할 예정이다.

1월 8일이 되어서야 6일까지의 공부를 정리했다. 시간이 된다면 9일에는 7일과 8일의 공부를 각각 정리해보려고 한다.