CSS를 사용하여 웹 사이트에 이력서나 취업 내역 섹션을 추가하는 방법 (4 섹션)

CSS를 사용하여 웹 사이트에 이력서나 취업 내역 섹션을 추가하는 방법 (4 섹션)

2022-06-01 last update

17 minutes reading CSS Spin Up

소개


이 강좌에서는 HTML 테이블과 CSS 클래스를 사용하여 demonstration website 의 취업 섹션 (또는 네 번째 섹션) 을 다시 만듭니다.맞춤형 사이즈를 원하신다면 언제든지 Sammy의 정보를 자신의 정보와 교환하십시오.여기에서 사용하는 방법은 다른 CSS/HTML 웹 사이트 항목에 적용될 수 있습니다.

이 섹션을 구성하려면 섹션 제목을 추가하고 스타일을 설정하고, 넓은 열을 추가하고 스타일을 설정하고, 열에 HTML 테이블을 추가하고 스타일을 설정합니다.

선결 조건


본 강좌를 배우려면 본 시리즈의 이전 강좌How To Set Up You CSS and HTML Practice Project의 설명에 따라 필요한 파일과 폴더가 설정되어 있는지 확인하십시오.

섹션 및 섹션 제목 만들기


시작하려면 클래스를 만듭니다. 이 클래스는 앞의 프로젝트 섹션과 이 취업 섹션의 내용 사이에 공백을 추가합니다. 다음 CSS 주석과 CSS 규칙 집합을 styles.css 파일의 밑에 추가합니다.
스타일css
. . .

/* Section 4 */

/* Add space between sections */
.section-break {
  margin:50px;
  height:500px;
}
이 코드 세션에서 "섹션 4"를 표시하는 CSS 규칙 집합과 설명 section-break 클래스의 용도에 대한 CSS 주석을 추가했습니다.이 클래스를 <div> 파일의 빈 index.html 에 할당합니다. 이 파일의 높이는 500픽셀이고 여백은 50픽셀입니다.<div>는 표시되지 않지만, 그 높이는 다음 내용을 500픽셀로 아래로 밀어서 섹션 문자로 충당할 것이다.index.html 파일을 반환하고 다음 코드 세그먼트를 추가합니다.
지수html
. . .

<!--Section 4: Employment—>
  
<div class="section-break"> </div>
<h2 class="section-heading">Experience</h2>
이 코드 세그먼트는 웹 사이트의 네 번째 부분에 사용되는 HTML 코드를 표시하고 방금 만든 <div> 클래스에 할당된 section-break 용기를 추가하는 HTML 주석을 추가했습니다.코드 세그먼트에는 "체험"부분의 제목이 추가되어 있으며, 이전 강좌 [CSS를 사용하여 배열 레이아웃을 구축하는 방법] https://www./community/tutorials/how-to-build-a-tiled-layout-with-css-section-3 에서 만든 클래스 section-heading 를 사용하여 스타일을 설정합니다.
참고: 이 tutorial series 명령을 따르지 않으면 파일 밑에 다음 코드 세그먼트를 추가하여 section-heading 클래스를 styles.css 파일에 추가할 수 있습니다.
스타일css
. . .
.section-heading {
  text-align:center;
  color:#102C4E;
  margin-top: 150px;
  margin-bottom:70px;
  font-size: 35px;
}
파일을 저장하고 브라우저에 로드합니다.섹션 휴식 후에는 지금 체험이라는 섹션 제목이 있어야 합니다.

와이드 열 및 와이드 테이블 스타일 설정하기


다음은 넓은 흰색 열의 스타일과 그 안에 놓을 테이블을 설정할 수 있는 클래스를 만들 것입니다.index.html 파일의 하단에 다음 코드 세그먼트를 추가합니다.
스타일css
. . .

/* Wide column */
.column-1 {
  width: 90%;
  height: auto;
  padding-top:70px;
  padding-left:70px;
  padding-bottom:70px;
  margin:auto;
  margin-bottom:50px;
  margin-top: 75px;
  background-color:white;
}

/* Table formatting */
.table-style {
  width:100%;
  border-spacing: 24px;
}
첫 번째 규칙 집합에서, 당신은 이미 클래스에 많은 스타일 규칙 styles.css 을 성명했습니다.열 크기가 뷰포트 너비에 따라 변경될 수 있도록 백분율로 지정했습니다column-1.width을(를) height로 지정했습니다. 이 경우 테이블에서 HTML 컨텐트의 높이에 따라 높이를 조정할 수 있습니다.클래스 auto 에 할당된 <div> 의 배경색을 설정하는 규칙도 만들었습니다.
이 규칙에 대한 자세한 내용을 보려면 이 강좌 시리즈의 설정 content, paddingmargins 크기의 앞부분을 보십시오.
두 번째 규칙집에서 클래스 white 를 정의하고 많은 규칙을 설명했습니다.table-style 테이블의 너비가 컨테이너의 전체 너비를 차지하도록 선언합니다. 이것은 당신이 만들고 있는 너비 열입니다.width:100% 테이블의 셀 사이에 24개의 픽셀 공간을 배치하여 테이블의 내용이 열의 폭을 차지할 수 있도록 합니다.이 규칙이 없으면 각 테이블 셀 사이의 거리가 더 가깝습니다.

열 및 테이블 추가


이제 HTML 파일에 열과 테이블을 추가합니다.border-spacing:24px; 파일을 저장하고 styles.css 파일로 돌아가 HTML 코드 행index.html 아래에 다음 코드 세그먼트를 추가합니다.
지수html
. . .

<div class="column-1">
  <h2>Employment</h2>
  <table class="table-style"> 
    <tr>
      <td>Freelance designer</td>
      <td>Seven Seas</td>
      <td>2015-present</td>
   </tr>
    <tr>
      <td>Associate Sea Creature</td>
      <td>Small Pond Productions</td>
      <td>2019-2020</td>
   </tr>
   <tr>
      <td>Associate Surfer</td>
      <td>Open Watery Web</td>
      <td>2018-2019</td>
   </tr>
   <tr>
      <td>Open Web Advocate</td>
      <td>Kiddie Pool Kubernetes</td>
      <td>2017-2018</td>
   </tr>
   <tr>
      <td>Assistant Shark</td>
      <td>Small Pond Pictures</td>
      <td>2016-2017</td>
   </tr>
  </table>
 </div>
</div>
이 코드 세션에서 클래스 설정 스타일에 따라 <h2 class="section-heading">Experience</h2> 컨테이너를 추가하고 클래스 설정 스타일을 사용하는 HTML 테이블을 설치합니다.표에 취업 기록 내용을 놓았습니다.<div> 표시는 다음 세 개의 표 데이터를 삽입하는 표 줄을 엽니다. column-1 표시를 사용합니다.HTML 테이블의 작동 원리에 대한 자세한 내용을 보려면 자습서How To Create Tables With HTML 를 참조하십시오.
이 두 파일을 저장하고 브라우저에서 웹 페이지를 다시 불러옵니다.이 강좌의 시작과 같이 네 줄 세 열을 포함하는 표를 포함하는 넓은 열이 있어야 합니다.
첫 번째 세 가지 요소table-style는 첫 번째 그룹 <tr> 태그의 열기와 닫기 사이에 삽입됩니다.같은 표 줄과 데이터 형식을 사용하여 줄을 계속 추가할 수 있습니다. 열의 높이는 <td> 클래스 <td><tr> 로 설정했기 때문에 조정됩니다.또는 height 줄에 auto 요소를 추가하여 다른 열을 추가할 수 있습니다.

결론


이제 CSS를 사용하여 작업 내역을 구조화된 레이아웃에 표시하기 위해 테이블의 스타일을 만들고 설정했습니다.크기를 조정하고 줄과 열을 추가하여 다른 목적에 사용할 테이블을 사용자 정의해 보십시오.다음 강좌에서'교육'과'기술'표를 작성하여 표의 배치 가능성을 계속 탐색할 것입니다.