CSS-기사, 테이블, 목록 스타일 -

문장 양식

글의 크기를 조절하다.

사용자 정의 크기

크기는 배율에 따라 지정할 수 있습니다.
다음 그림에서 보듯이 한 페이지에 녹색 사각형의 부모 요소가 포함되어 있다고 가정하십시오.

부모 원소의 width와 Height는 각각 100px를 지정하고, 하위 원소의 width에서 50%를 Height로 지정할 때 70%를 선택한다.
부모 요소의 크기가 지정되지 않은 경우 위 요소의 크기가 적용되고 화면 크기의 배율이 최종적으로 표시됩니다.
여기에 글의 크기를 조정하기 위해서 먼저 p 라벨 (글을 둘러싼 라벨) 에class 속성을 추가합니다.
여기는class="conntent"입니다.
그리고 css에서 사이즈 조정을 진행합니다.
가로폭을 부요소의 70% 로 변경한 것은 아래와 같다.

.content{
width:70%;
}

또한 문장을 굵게 하려면 font-weight라는 CSS 속성을 사용해야 한다.
기본적으로 bold를 사용하면 굵은 글씨체다.
숫자로 표시하면 700과 같다.
그러나 bold를 사용하면 환경에 따라 문자의 굵기도 달라진다.
그래서 기본적으로 700을 추천합니다!
실제로 쓰면 이렇다.

.content{
font-weight:700;
}

테이블 스타일

표를 조정하다.

테두리 및 배경

경계는 border를 사용하고 배경은 CSS 속성 백그라운드를 사용합니다.
예를 들어 배경색을 빨간색으로 바꾸려면 다음과 같이 하십시오.

background: red;

또한border와background는 함께 기술할 수 있다.
예를 들어 테두리가 굵기 10px, 선 형식 solid, 색상 레드로 지정되었을 때

border-width: 10px;
border-style: solid;
border-color: red;

의 절차

border: 10px solid red;

와 빈칸으로 나누어 합치면 기술량을 현저히 줄일 수 있다.
이 두 개 이외에 몇 개의 CSS 속성을 함께 기술할 수 있기 때문에 다음에 다시 글을 쓰고 싶습니다!
경품이지만 테두리의 간격을 없애기 위해border-collapse라는 CSS 속성collapse를 지정합니다!

다중 선택기

선택기는 한 번에 여러 조건을 추가할 수 있다.
여러 조건을 추가하면 기술량을 줄일 수 있다.
예를 들어, 다음 CSS가 있다고 가정합니다.

.elem1 {
  text-align: center;
  font-size: 20px
  color: red;
  }

.elem2 {
  text-align: right;
  font-size: 20px
  color: red;
}

이걸 쓴 곳을 요약하면 다음과 같다.

.elem1{
  text-align: center;
  }

.elem2{
  text-align: right;
  }

.elem1, .elem2{
  font-size: 20px;
  color: red;
  }

여러 선택기를 설명할 때 쉼표로 구분합니다.
또 선택기는 두 개뿐 아니라 세 개, 네 개로 나눌 수 있다.

조합 선택기

조합 선택기를 사용하여 하위 요소 또는 인접 요소에 스타일을 적용할 수 있습니다.
조합선택기는 4가지지만 이번에는 자손선택기만 소개한다.
이곳은 좀 복잡하기 때문에 다른 기사로 다른 종류도 정리해서 깊이 파헤치는 글을 쓰고 싶습니다.

자손선택기
자손 선택기는 공간에 따라 구분된다.

예를 들어, HTML에 다음과 같은 내용이 적혀 있다고 가정합니다.(양식을 작성하는 프로그램)

<table class="sales-table">
                    <thead>
                        <tr>
                            <th></th>
                            <th>2017年</th>
                            <th>2018年</th>
                            <th>2019年</th>
                            <th>2020年</th>
                        </tr>
                        <tr>
                            <th>10~20代</th>
                            <td>380</td>
                            <td>2300</td>
                            <td>5300</td>
                            <td>1500</td>
                        </tr>
	            </thead>
</table>

여기서부터 자손 선택기를 활용하여 CSS에 다음과 같이 쓰면class 속성을 가진ales-table 내의 모든th요소에 적용된다.

.sales-table th{
    font-weight: 700;
    background:#808080;
}

또한, 예를 들어'ales-table 원소와 하위 원소 중의th원소, 하위 원소 중의 td원소와 함께
두께 1px, 선 유형 solid, 색상 #000000"은 다음과 같습니다.

.sales-table,
.sales-table th
.sales-table td{
border: 1px solid #000000;
}

선택기는 쉼표로 칸막이와 빈칸으로 칸막이를 하여 위에서 말한 바와 같이 정리합니다!

목록 스타일

목록을 조정하다.

사용자 지정 목록

l 요소나ol 요소의 태그를 수정할 수 있습니다.
목록은 list-style이라는 CSS 속성을 사용하여 사용자 정의합니다.
표시된 태그는 몇 개입니다.
다음은 태그가 변경되었을 때의 예입니다.

또한 none을 사용하면 표시가 숨겨집니다.

요소 변경

HTML 요소의 배열은 블록 수준(block) 요소와 인라인 요소 두 가지로 나눌 수 있습니다.
블록 레벨 요소는 수직으로 정렬됩니다.
반대로 내연 원소는 가로로 배열된다.
또한 블록 레벨 요소는 기본적으로 가능한 너비를 사용할 수 있으며 세로와 가로를 지정할 수 있습니다.
인라인 요소는 기본적으로 요소의 너비만 사용하며 기본적으로 너비와 너비를 지정할 수 없습니다.
각자 대표적인 요소는 다음과 같다.

블록 레벨 요소
div、h1~h6、p

인라인 요소
a、img、span

이거 꼭 외워야 돼.
블록 수준의 요소를 가로로 정렬하거나 내부 요소의 가로 및 세로 폭을 수정하려면 CSS 속성의 display를 사용합니다.
예를 들어 제목을 가로로 배열하고자 하는 경우

h1{
 display: inline;
 }

h1원소를 내연원소로 하고 가로로 배열한다.
그러면 기본적으로 너비를 지정할 수 없는 내연 요소가 너비를 지정하려면 어떻게 해야 합니까?
이런 상황에서

span{
 display: block;
 width: 20px;
 }

를 통해 스핀 요소는 블록 요소에서 세로와 가로를 지정할 수 있다.
즉, 인라인 요소를 블록 요소로 변환하여 너비를 지정할 수 있습니다.
또한 선 요소의 가로와 세로 너비를 지정하거나 직사각형 요소의 가로와 세로 너비를 지정하려면 inline block을 사용하십시오.
inline-block을 사용하면 내연 요소처럼 가로로 배열할 수 있고 블록 레벨 요소처럼 너비와 너비를 지정할 수 있습니다.
용도에 따라 inline, block, inline block을 구분하세요!