[웹 서비스 개발] TableFormat

[1] nth-child

1) 형태

tr:nth-child(odd) {
	background-color: cyan;
}

2) 설명

• nth-child는 선택자가 해당 요소의 형제들 중에서 몇 번째인지에 따라 스타일을 적용하는 CSS 함수이다.
• odd는 홀수를 의미하며, even은 짝수를 의미한다. 정수값이나 수식을 통해서도 지정할 수 있다.

예시:

• nth-child(odd) : 홀수 번째 요소에 스타일을 적용
• nth-child(2) : 두 번째 요소에 스타일을 적용
• nth-child(3n) : 3의 배수인 요소에 스타일을 적용

[2] border-collapse

1) 형태

border-collapse: collapse;

2) 속성 종류

1. collapse: 테이블의 셀 간 경계선을 하나로 결합하여 경계선이 중복되지 않도록 설정한다. 일반적으로 테이블 레이아웃이 더 깔끔하게 보인다.
2. separate: 각 셀의 경계선이 분리된 상태로 유지된다. 셀 간의 간격이 생기며, 개별 셀에 구분이 명확히 드러난다.

3) 설명

• border-collapse 속성은 HTML 테이블에서 셀의 경계선이 어떻게 처리될지 결정한다.
• collapse를 사용하면 셀 사이의 경계선이 결합되어 하나로 처리되며, 테이블이 더 깔끔하게 보이는 반면, separate는 경계선이 셀마다 분리되어 좀 더 넓은 간격을 제공한다.

[3] border-radius

1) 형태

border-radius: {size};

2) radius 속성 방향

• x : border-radius의 단일 값은 네 모서리에 동일한 둥근 모서리를 적용한다.
  • 예: border-radius: 10px; (네 모서리 모두 10px)
• x, y : 두 개의 값을 사용할 경우 첫 번째 값은 상단 왼쪽과 하단 오른쪽 모서리에, 두 번째 값은 상단 오른쪽과 하단 왼쪽 모서리에 적용된다.
  • 예: border-radius: 10px 20px;
• x, y, z : 세 개의 값을 사용할 경우 첫 번째 값은 상단 왼쪽, 두 번째 값은 상단 오른쪽과 하단 왼쪽, 세 번째 값은 하단 오른쪽에 적용된다.
  • 예: border-radius: 10px 20px 30px;
• x, y, z, k : 네 개의 값을 사용할 경우 시계 방향으로 각 모서리에 개별 값을 적용한다. 첫 번째 값은 상단 왼쪽, 두 번째 값은 상단 오른쪽, 세 번째 값은 하단 오른쪽, 네 번째 값은 하단 왼쪽에 적용된다.
  • 예: border-radius: 10px 20px 30px 40px;

3) 설명

• border-radius는 요소의 모서리를 둥글게 만드는 속성으로, 4개의 방향 값을 제공하여 각 모서리의 둥근 정도를 개별적으로 지정할 수 있다.
• 이를 통해 버튼이나 카드 등의 디자인 요소에 부드러운 곡선을 줄 수 있다.

[4] border-style

1) 형태

border-style: solid;

2) 설명

• border-style은 요소의 테두리(border)가 어떤 모양으로 표시될지 결정하는 CSS 속성이다.
• 테두리의 스타일을 지정하여 요소의 외곽을 강조하거나 구분하는 역할을 한다.
• 기본적으로 8가지 스타일을 제공하며, 각 테두리는 스타일에 따라 다양한 시각적 효과를 줄 수 있다.

3) 속성 종류

1. none : 테두리가 표시되지 않는다.
2. solid : 단색의 직선 테두리이다.
3. dashed : 짧은 대시(선분)들로 이루어진 테두리이다.
4. dotted : 점선으로 이루어진 테두리이다.
5. double : 두 줄의 직선으로 이루어진 테두리이다.
6. groove : 테두리가 요소 안으로 파인 것처럼 보이도록 입체감을 준다.
7. ridge : 테두리가 요소 밖으로 솟아오른 것처럼 보이도록 입체감을 준다.
8. inset : 요소 안으로 들어간 것처럼 보이는 테두리이다.
9. outset : 요소 밖으로 튀어나온 것처럼 보이는 테두리이다.

4) 추가 설명

• border-style은 테두리의 모양을 결정하는 핵심적인 속성으로, 여러 스타일을 적용하여 페이지 내에서 강조하고자 하는 요소를 시각적으로 표현할 수 있다.
• 특히, solid, dashed, dotted는 자주 사용되는 스타일이며, 나머지 스타일은 특정한 입체 효과를 줄 때 유용하다.

[5] border-color

1) 형태

border-color: red;

2) 설명

• border-color는 요소의 테두리 색상을 지정하는 CSS 속성이다.
• 이 속성을 통해 테두리의 색을 변경하여 요소를 시각적으로 구분하거나 강조할 수 있다.
• 단일 색상뿐만 아니라 각 방향별로 다른 색상을 설정할 수 있다.

3) 속성 종류

1. 단일 색상 : border-color: red;
   테두리의 모든 방향에 같은 색상이 적용된다.
2. 두 개의 색상 : border-color: red blue;
   첫 번째 색상은 상단과 하단 테두리에, 두 번째 색상은 좌우 테두리에 적용된다.
3. 세 개의 색상 : border-color: red blue green;
   첫 번째 색상은 상단 테두리, 두 번째 색상은 좌우 테두리, 세 번째 색상은 하단 테두리에 적용된다.
4. 네 개의 색상 : border-color: red blue green yellow;
   상단, 우측, 하단, 좌측 테두리에 각각 순서대로 색상이 적용된다.

4) 추가 설명

• border-color는 시각적인 디자인을 향상시키기 위해 사용되며, 다양한 색상 값을 사용할 수 있다.
• CSS의 색상 값은 색상 이름(red, blue), RGB(rgb(255, 0, 0)), HSL(hsl(0, 100%, 50%)), 또는 16진수 코드(#ff0000)로 지정할 수 있다.
• border-style 속성이 없으면 테두리가 보이지 않으므로, 두 속성을 함께 사용해야 한다.