글자의 색을 바꾸고자 할 경우, HTML태그 안에 style=”(원하고자 하는 색상 값)”을 넣어서 색상을 변경할 수 있으며, 더 자세한 설정값을 위해서 16진법을 이용하여 코드를 입력할 수 있다.

 16진법을 이용한다면, 모든 색상을 6자리로 표현할 수 있고 2자리씩 세 쌍으로 나눌 수 있는데 이는 각각 빨강, 초록, 파랑 부분을 의미하며 이 세가지 색상을 이용하여 모든 색상을 조합할 수 있다.

 원하고자 하는 색상이 명확할 경우, 구글에서 ‘색상 선택도구’를 검색하여 구글에 내장된 색상 선택도구를 이용할 수 있으며 vs코드에 색상코드 위로 마우스 커서를 이동하면 내장된 색상 선택도구 창이 열려 색상을 선택하며 코드로 표현될 수 있다.

 이 외에도 코드로 표현하는 것이 아닌 RGB로 표현하는 등의 다양한 표현방법이 존재한다.

CSS 플렉스는 레이아웃 배치를 위한 강력하고 유연한 방법이다.

 기본 구조
   - 부모 요소(Flex Container)와 자식 요소(Flex Items)로 구성된다.
   - 부모 요소에 `display: flex;`를 적용하여 Flex 컨테이너를 생성한다.

주요 속성
   - 부모 요소(컨테이너) 속성:
     - `flex-direction`: 주 축의 방향을 설정한다. (row, column 등)
     - `flex-wrap`: 아이템의 줄 바꿈을 제어한다.
     - `justify-content`: 주 축 방향으로 아이템을 정렬한다.
     - `align-items`: 교차 축 방향으로 아이템을 정렬한다.

   - 자식 요소(아이템) 속성:
     - `flex`: grow, shrink, basis 값을 한 번에 지정한다.
     - `align-self`: 개별 아이템의 교차 축 정렬을 설정한다.
     - `order`: 아이템의 순서를 지정한다.

이는 복잡한 레이아웃을 쉽게 구현하는 것에 용이하며, 반응형 디자인에 적합하다.
예를 들면,

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1 0 auto;
}

와 같이 나타날 수 있으며 이러한 특징으로 Flex는 현대적인 웹 레이아웃 구성에 널리 사용되고 다양한 화면 크기에 대응하는 유연한 디자인을 가능하게 한다.

출처:
https://velog.io/@rlatp1409/HTMLCSS-Flex-%EC%86%8D%EC%84%B1%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90
https://shin1303.tistory.com/entry/CSS-Flex%EC%97%90-%EB%8C%80%ED%95%9C-%EC%84%A4%EB%AA%85%EA%B3%BC-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95
https://manbalboy.github.io/front/css-flex01.html
https://www.heropy.dev/p/Ha29GI
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-%ED%94%8C%EB%9E%99%EC%8A%A4Flex-%F0%9F%92%AF-%EC%B4%9D%EC%A0%95%EB%A6%AC
https://en.wikipedia.org/wiki/CSS_Flexible_Box_Layout

선택자

속성 선택자(Type Selector) : 특정 요소를 입력한 다음, 이에 관한 CSS 규칙을 추가하면 이를 특정 요소의 속성으로 추가할 수 있다

ID 선택자(ID Selector) : 특정 HTML 요소에 대한 ID 속성 및 ID 이름을 추가하여 생성할 수 있다. (’#id’를 사용)

그룹 선택자(Group Selector) : 여러 요소 유형을 함께 그룹화 할 수 있으며 선택자를 이용해 정의한 특정 CSS 규칙을 일괄적으로 적용할 수 있다.

클래스 선택자(Class Selector) : ID 선택자와 흡사하며 클래스를 HTML 요소에 속성으로 추가한 후 클래스의 이름을 정의하고 CSS에서 클래스 이름을 입력하며 ID 선택자는 고유성으로 인해 특정 요소에 대해 한 번만 사용할 수 있지만 클래스 ’.class’를 사용)

결합자

결합자는 서로 다른 선택자들을 결합하는 것이다.

 '후손 결합자 (Descendant Combinator)'는 '공백(space)'를 사용하여 표현하며

예를 들어,

div p {
color: blue;
}

와 같이 표현되며 이는 ‘<div>’ 요소 내의 모든 ‘<p>’ 요소에 스타일이 적용된다.

여기서, ‘<p>’ 요소는 직계 자식보다 더 아래인 후손까지 포함된다.

자식 결합자 (Child Combinator)

자식 결합자는 ‘>’ 기호를 사용하며

예를 들어,

div > p {
font-weight: bold;
}

와 같이 나타낼 수 있다. 이는 ‘<div>’ 요소의 직계 자식인 ‘<p>’ 요소에만 적용시킨다.