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

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

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

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

선택자

속성 선택자(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>’ 요소에만 적용시킨다.

상속(Inheritance) 개념과 계단식 상속(Cascading logic)

상속(Inheritance)

특정 개념이 자손(하위 항목)에게도 적용된다.

부모-자식 요소

요소 안에 다른 요소가 포함된다면 위에 설정된 요소는 부모 요소이며 그 안에 포함된 요소는 자식 요소라고 한다.

또 자식 아래에 요소가 포함된다면, 이는 자손 요소라고 한다.

이러한 상위-하위 관계에 있는 요소를 부모-자식 요소라고 한다.

계단식 상속(Cascading logic)

하나의 요소에 여러 규칙을 적용할 수 있으며, 동일한 규칙이나 속성이 두 개 이상 있을 경우 특정 선택자에 대하여 가장 최신 규칙이 우선적으로 적용된다.

이미지의 크기를 바꾸고 싶다면

img {
    width: 200px;
    height: 200px;
    border-radius: 100px;
}

등의 속성을 이용하여 높이, 넓이, 모양 등을 설정 가능하다.

또, 이미지의 위치를 옮기고 싶다면 CSS폴더에서

body {
    text-align: center;
}

을 입력해줄 수 있는데, 이는 이미지가 body에 속한 콘텐츠라는 가정이며, 'text-align: center;'는 콘텐츠를 가운데로 정렬해주는 요소이다.

텍스트 크기와 굵기 설정

font-size와 font-weight를 이용하면 텍스트의 크기를 바꿀 수 있으며

font-size를 사용하면 다양한 단위를 이용하여 글자 크기를 바꿀 수 있고, font-weight를 이용하면 두께를 바꿀 수 있다.

(px, inch, centi등도 입력 가능)

예시

.roboto-regular {
  font-family: "Roboto", serif;
  font-weight: 400;
  font-style: normal;
}

글꼴 설정

글꼴은 외부 페이지에서 로드할 수도 있으며, ‘href’속성을 이용하여 링크를 입력하면 된다.

예를 들어,

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

와 같이 표현할 수 있다.