본문 바로가기
CSS

2022-10-24 [새싹 프론트엔드] 테이블, CSS 레이아웃 강의정리

수코딩딩 2022. 10. 24. 16:17

2022-10-24 학습내용

  • 정렬
  • One True 레이아웃
  • 절대위치
  • 고정위치
  • 글자생략

테이블

  • 테이블 생성하기
  • 테이블 병합하기
  • 테이블 꾸미기

수평으로 요소정렬

float: left; , float: right;  를 주게 된다면 중앙 정렬이 불가하다.

왜냐면 float속성을주면 왼쪽 혹은 오른쪽으로 딱 붙는 성질이 있기 때문이다.

 

수평 가로 정렬일 경우

이럴때 float를 준 해당 태그의 부모태그에 width를 float와 같게 맞춰준 후  margin: auto;

를 주면  float받은 자식속상이 margin을 준 부모태그를 따라서 가운데로 이동한다.

 

수직 세로 정렬일 경우 (float를 받은 요소는 inline요소가 된다.)

부모요소에 line-height: 부모의 높이값을 주면 해당 컨텐츠 안에 있는 요소는 line-height를

상속같아서 수직 중앙 정렬이 가능하다.

 

float를 사용하여 cleafix를 사용 할때 꼭 써야 할것

1. overflow: hidden;   (적용: 부모태그)에 높이값을 찾아주는 속성

2. clear: both; (적용: 다음 오는 태그) 가 말려들어가지 않도록

3. box-sizing: boder-box; (적용: float를 준 해당태그) 경우에 따라서 사용

 

One True 레이아웃 구성

해당레이아웃을 만든다 가정해보자

1. 레이아웃 행 구성

가장 큰 행 부분을 나눠준다 .

아래 이미지로 본다면 3개의 행을 만들어주면 된다.

3개의 행을 만든다.

<body>
<div id=“top”></div>
<div id=“middle”></div>
<div id=“bottom”></div>
</body>

 

2. 레이아웃 열 구성

가장 큰 행 부분을 나눠주었다면 그 다음은 그 열안에 있는 행을 나눠준다.

middel > left,right를 넣어준다

<body>
 <div id=“top”></div>
 <div id=“middle”>
  <div id=“left”></div>
  <div id=“right”></div>
 </div>
 <div id=“bottom”></div>
</body>

절대위치

absolute

웹페이지를 작업할 때 요소를 배치하는 방법은  상대위치, 절대위치, 고정위치 3가지가 있다.

상대위치 relative 원래 있어야할 곳 기준으로 속성값에 따라 새로운 위치를
지정한다.
절대위치 absolute  같은 자손끼리의 관계는 무시하므로 절대적이다.
하지만 부모요소와는 상대적이다. 이때 부모요소는 기본값인
static 이 아닌 다른 값이여야 한다.
고정위치 fixed 기준값은 뷰포트기준으로 설정한 값에서
스크롤을 해도 고정되어진다

*absolut, fixed속성을 가지면 높이값을 잃게 되므로 height를 설정해주어햐한다.

절대위치를 사용하여 위 코드를 실행해보자

 

    <style>
      * {
        margin: 0;
        padding: 0%;
      }

      #container {
        border: 3px solid #000;
        width: 700px;
        height: 300px;
        position: relative;
      }

      .circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        position: absolute;
      }

      #red {
        background-color: red;
        top: 10px;
        left: 10px;
      }

      #green {
        background-color: green;
        right: 10px;
        top: 10px;
      }
      #blue {
        background-color: blue;
        bottom: 10px;
        right: 10px;
      }
      #yellow {
        background-color: yellow;
        left: 10px;
        bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>절대 위치를 사용한 요소 배치</h1>
    <div id="container">
      <div id="red" class="circle"></div>
      <div id="green" class="circle"></div>
      <div id="blue" class="circle"></div>
      <div id="yellow" class="circle"></div>
    </div>
    <h1>안녕하세요 ?</h1>
  </body>
</html>

 

 

고정위치

position: fixed

부모요소가 아닌 뷰표트를 기준으로 위치가 지정됨

스크롤에 영향을 받지않음 (고정됨)

fixed 기본값

left: 0;

top: 0;

 

주의할 점

-position: fixed;

position: absolute;

를 사용하면 block요소의 기본값인 width: 100%; 를 잃게 됨으로

fixed, absolute를 사용하면 해당 태그에 width: 100%를 넣어줘야한다

 

-fixed 에 방향을 적지않으면 엘리먼트는 보이지않는다

  • 블록 요소라 하더라도 position이 absolute나 fixed가 되면 가로너비를 가득 채우지 않게 된다

 

로우 컬럼 헷갈릴때

table 태그의 기본 구조

<thead> 테이블의 헤더 부분 <tbody> 앞에 와야 함
<tbody> 테이블의 본문 본 내용을 담음
<tfoot> 테이블의 푸터 부분 <tbody> 뒤에 와야 함
<th> 열 또는 행의 헤더 scope 속성으로 row, col 중 선택
  •  tr을써주면 줄바꿈이 된다 (br과 비슷) td단독으로 쓰면 안되고 꼭 tr로 감싸주자
  •  caption의 위치도 css로 변경할수있다.
  •  th(테이블의 제목)이 scope(범위)가 col(열)인지 row(행)인지  scope="col", scope="row"로 지정해준다
<table>
        <caption>웹 개발 주요 언어</caption>
        <colgroup>
          <col>
          <col>
          <col>
        </colgroup>
        <thead>
          <tr>
            <th>언어</th>
            <th>종류</th>
            <th>역할</th>
          </tr>
        </thead>
        <tbody></tbody>
        <tr>
          <th>HTML</th>
          <td>마크업 언어</td>
          <td>갖다 놓기</td>
        </tr>
        <tr>
          <th>CSS</th>
          <td>스타일 언어</td>
          <td>꾸미기</td>
        </tr>
        <tr>
          <th>JavaScript</th>
          <td>프로그래밍 언어</td>
          <td>시키기</td>
        </tr>
      </table>

결과값

table은 기본값으로 border-collapse: separate; 이다

border-collapse= separate = 테두리 붕괴: 분리;

border-collapse= collapse =  테투리 붕괴: 붕괴

table의 초기값은 border의 간격이 위의 결과값처럼 떨어져 두줄로 보인다.

이것을 합치고 싶을때 border-collapse: collapse 를 준다

table {
      border-collapse: collapse;
    }

 

border-collapse: collapse; 결과값

table > caption을 아래로 변경

 

caption {
      caption-side: bottom;
    }

caption: caption-side; 적용값

셀 병합 속성

 

-칼럼을 병합할땐 같은 tr에서, 로우를 병합할땐 다른 tr에서 td를 지워줘야한다.

colspan 열 병합
rowspan 행 병합

 

<table>
    <caption>셀병합하는 방법</caption>
    <tr>
      <td>123</td>
      <td colspan="2">123</td>
      <td>123</td>
    </tr>
    <tr>
      <td rowspan="3">123</td>
      <td>123</td>
      <td>123</td>
      <td>123</td>
    </tr>
    <tr>
      <td>123</td>
      <td colspan="2">123</td>
    </tr>
    <tr>
      <td rowspan="2">123</td>
    </tr>
  </table>

셀 병합하기 결과값

 

table-layout =  table > td의 너비 설정

table-layout: auto;

- table의 크기를 텍스트 크기에 맞춰 width를 자동으로 설정한다.

table-layout: fixed;

- table의 크기를 text가 삐져나오거나 이상해도 정확한 등분을 유지한다.

- table의 colgroup 태그 을 주면 width크기를 각각 줄 수 있다.(밑에 설명)

th,td에 padding, margin적용 시키기

    table {
      width: 200px;
      table-layout: fixed ;
    }

 

긴 이미지가 auto 짧은 이미지가 fixed

 

 

 

<colgroup>

- 그룹을 지어 css를 주거나 width를 따로 주고 싶은경우 그룹을 묶어준다

 

- <colgroup>은 thead 위쪽 , caption 아래에 위치되어야한다.

- colgroup > col의 개수는 tr의 개수와 같지 않아도 된다 (변경하고싶은 행의 개수만큼 써주면 된다.)

- <col span="정수"> 가 끝나는 시점의 col에 css가 적용된다

- <col span="정수"> 만큼 띄어쓰기가 된다

  /* css */
.test01 {
      background-color: gray;
      width: 20px;
}
  
  
 /* html */ 
  <table>
    <caption>웹개발 주요 언어</caption>
    <colgroup>
      <col class="test01">
      <col span="2"> /*2칸을 띄고 test01의 css를 적용시켜라*/
      <col class="test01">
    </colgroup>
    <tr>
      <th>언어</th>
      <th>종류</th>
      <th>역할</th>
      <th>스터디</th>
    </tr>
    <tr>
      <th>HTML</th>
      <td>마크업 언어</td>
      <td>스타일 언어</td>
      <th>스터디</th>
    </tr>
    <tr>
      <th>CSS</th>
      <td>스타일 언어</td>
      <td>꾸미기</td>
      <th>스터디</th>
    </tr>
  </table>

 

 

 

결과값

 

 

 

 

 

새싹 DT 기업연계형 프론트엔드 실무 프로젝트 2주차 블로그 포스팅

'CSS' 카테고리의 다른 글

2022-10-26 [새싹 프론트엔드] 반응형 웹  (0) 2022.10.26
2022-10-25 [새싹 프론트엔드] 목록태그  (0) 2022.10.25
2022-10-21 [새싹 프론트엔드] 강의정리  (0) 2022.10.21
2022-10-21 box-sizing[새싹 프론트엔드]  (0) 2022.10.21
2022-10-20[새싹 프론트엔드] 강의정리  (0) 2022.10.20

'CSS' Related Articles

티스토리툴바