7주 : html, css 언어 : flex - basis, grow, shrink, 멀티미디어 태그, 표를 만드는 태그

자식박스의 크기를 지정하는 flex속성들

아래 속성들은 부모 컨테이너가 아닌 자식에 직접 적용하는 속성이다.
이 속성들은 flex자식 요소들의 크기를 정하는 속성들이다.

1. flex-basis
   자식요소의 기본 크기를 지정하는 속성이다. 자식요소를 가로로 배치한다면 flex-basis값은 자식요소의 넓이를 기준으로 하고, 자식요소를 세로로 배치한다면 flex-basis값은 자식요소의 높이를 기준으로 한다. flex-basis의 기본값은 auto인데, 여러가지 의미가 있다. 만약 자식요소에 width가 지정되어 있다면 width값이 flex-basis의 값이 된다. 하지만 만약 자식요소에 width값이 없다면 컨텐츠 영역만큼만 flex-basis의 영역이 된다. flex-basis의 단위는 px, %, vw와 같은 단위를 사용해서 기본영역을 지정할 수 있다.

2. flex-grow
   flex가 적용된 자식요소를 확장하는 속성이다. 부모박스가 자식박스의 총합보다 넓이가 넓으면 빈 공간이 생긴다. 이때 남은 공간을 어떻게 나눌지 결정하는 속성이다. flex-grow의 기본값은 0이며, 0보다 큰 숫자를 사용하면 부모박스를 채운다.(음수값 사용불가)

3. flex-shrink
   컨테이너의 넓이가 줄어들 경우 그 안에 있는 자식박스들은 자연스럽게 줄어들면서 부모영역을 채운다. flex-shrink의 기본값이 1이기 때문이다. flex-shrink속성은 부모영역에 맞춰 자식요소를 줄이는 속성이다. 만약 flex-shrink를 0으로 지정하면 자식요소의 총합이 더 넓더라도 자식요소를 축소하지 않는다.

4. flex
   flex-basis, flex-grow, flex-shrink를 한꺼번에 선언하는 속성이다. 세 속성을 선언할때에는 자리가 지정되어 있어 순서를 지켜야 한다. 순서는 grow shrink basis순서이며 3개의 기본값은 각 0,1,auto이다. flex속성에 값으로 숫자를 하나 지정한다면 flex-grow의 값이다. 나머지 속성인 shrink는 1, basis는 0을 사용한다. 즉, flex:1 = flex:1 1 0과 같다. flex-basis의 값이 0이면 확장, 축소하는 상황에 따라 항목의 기본 크기를 비율대로 설정한다. 만약 flex속성값으로 none을 쓰면 컨테이너 안에서 자식요소를 확장하거나 축소하지 않는다. 그러면 크기는 미리 정해놓은 width, height값을 사용하거나 값이 없다면 내용의 크기에 따라 결정된다. 즉, flex:0 0 auto와 같다. 레이아웃에서 특정부분만 확장, 축소하지 않도록 만들고 싶을때 사용하는 값이다. flex속성값으로 auto를 사용하면 자식박스의 크기를 auto로 설정한다. 자식요소에 width, height 가 들어있으면 그 값을 사용하고, 만약 width, height속성이 없으면 컨텐츠가 차지한 만큼만 영역으로 사용한다. 또, grow shrink는 각각 1의 값을 갖는다. 즉, flex:auto면 flex: 1 1 auto와 같다. flex속성에 값으로 숫자를 두개를 지정한다면 첫 번째 값은 grow의 자리고, 두번째 값은 단위가 붙어있으면 basis로 설정되고 단위가 없으면 shrink값으로 설정됨.

기본형
flex : grow shrink basis;
값이 하나일때
flex : 1; / flex : 1 1 0;/
값이 두개일때
flex : 1 150px; / flex : 1 1 150px; /
flex : 1 1; / flex : 1 1 0; /

이 부분 학습은 글보다 영상이 효과적일 것 같다.
참고 영상1
참고 영상 2

멀티미디어 태그

인터넷 초기에는 웹 사이트에서 영상이나 음원파일을 재생하기 위해 ActiveX라는 프로그램을 설치해야만 확인이 가능했다. 하지만 악성프로그램의 위험이 크다는 단점때문에 멀티미디어를 재생할 수 있는 다양한 태그가 생겼다.

1. < audio >
   소리파일을 재생하기 위해 사용한다. 웹표준에 따라 음원파일이 지원되지 않는 환경을 고려하여 '이 음원파일은 해당 브라우저에서 지원되지 않습니다.'라는 문구를 태그 사이에 넣어줘야 한다.
   

< audio src="연결경로" 속성="값" >

• 대부분의 브라우저에서 호환 가능한 음원파일을 출력할때 사용한다.
  < audio src="연결경로" 속성="값" >
  < source src="연결경로" type="audio/mp3">
  < source src="연결경로" type="audio/wav">
  < source src="연결경로" type="audio/wma">
  < source src="연결경로" type="audio/aac">
  < /audio>
• 호환되지 않는 음원파일을 다양한 환경에서 지원할때 사용한다.

속성

• autoplay : 오디오를 자동 재생한다.
• controls : 웹 화면에 오디오 재생바를 출력한다.
• muted : 음소거
• preload : 재생버튼을 누르기 전에 오디오 파일을 다운로드하여 준비한다. 속성값으로는 none / metadata / auto 값이 있고 none은 사용자가 오디오를 틀지 않거나 서버가 최소한의 트래픽을 유지해야할때 사용한다. 즉, 미리 다운로드하여 준비하지 않는다. metadata는 사용자의 의도에 따라 해당 음원을 재생할수도 있고 재생하지 않을수도 있을때 메타데이터(예를들어 길이나 소량의 내용)을 미리 다운로드 받아 준비해 주는 것을 말한다. auto는 사용자의 의도와는 관계 없이 모든 데이터를 미리 다운받아 준비하는 것을 말한다. 용량이 큰 경우 브라우저의 성능과 데이터를 낭비할 수도 있음.
• loop : 반복재생

2. < video >
   동영상을 출력할때 사용한다. 동영상은 박스의 형태이므로 width와 height속성을 넣을 수 있다. 이외의 다른 속성은 audio와 동일하다. 단, 동영상을 자동재생하기 위해서는 muted속성을 함께 포함해야만 자동재생이 되도록 w3c에서 제한했다. audio와 마찬가지로 동영상 파일이 지원되지 않는 환경을 고려하여 '이 동영상은 해당 브라우저에서 지원되지 않습니다.'와 같은 문구를 반드시 포함해야 한다.

< video src="연결경로" 속성>
< video src="연결경로" 속성>
< source src="연결경로" type="video/mp4">
< source src="연결경로" type="video/wav">
< source src="연결경로" type="video/webm">
< /video>

속성

• 위에 있는 audio속성들은 모두 사용가능하다.
• width : 동영상의 넓이를 지정한다.
• height : 동영상의 높이를 지정한다.
• poster : 동영상이 지원되지 않는 환경에서 보여줄 대체 이미지. 대체 이미지가 있다면 대체 텍스트는 생략한다.

표를 만드는 태그

로웹사이트에서 게시판과 같은 영역을 만들때 사용한다.
또한 일반적인 표를 만들때에 주로 사용된다. table태그 안에는 자식태그로 tr, td태그를 사용한다. 모든 태그는 block속성을 가진다. table태그 안에서 tr은 칸들을 묶어주는 한 줄을 의미하고, td는 한 칸을 의미한다. 한 행의 td의 갯수는 모두 동일해야 한다.★

[기본형]
< table> -> 표 전체
< tr > -> 행. 칸들을 묶어주는 한 줄
< td >내용< /td > -> 열. 1칸
< /tr >
< /table >

< th>, < caption>, < figcaption>
표를 만들다보면 표에 제목을 넣고 싶을때가 있다. 표에 제목을 넣을때에는 행이나 열의 제목을 뜻하는 th태그나 표전체의 제목을 지정하는 catption, figcaption 태그를 사용한다. 하지만 표 전체 제목을 지을 때 반드시 이 태그를 써야하는 것은 아니고 h2~h6까지의 태그로 나타내도 된다. th는 제목을 나타내는 한 칸을 지정한다. 또한 글자가 굵게 표시되고, 칸의 중앙에 나오는 것이 기본값이다. td태그는 내용칸을 의미하고 글자는 왼쪽정렬되어 표시된다.

caption태그는 표 전체에 제목을 붙일때 사용한다. table태그의 바로 안쪽에 출력해야 한다.
figcaption태그도 표 전체에 제목을 붙일때 사용하고 table태그의 위나 아래쪽에 출력한다.

colspan과 rowspan

colspan은 가로 방향으로 칸을 합칠때 사용하는 속성이다.
rowspan은 세로 방향으로 칸을 합칠때 사용하는 속성이다.
각 속성에는 숫자를 쓸 수 있는데 속성이 쓰여진 해당 칸부터 숫자만큼 합쳐진다.
이 속성들은 td나 th처럼 '칸'을 의미하는 태그에 사용해야 한다.

[기본형]
< td colspan='2'>내용 : 해당 칸은 가로로 2칸짜리임
< td rowspan='2'>내용 : 해당 칸은 세로로 2칸짜리임

표의 구조를 나눌때 < thead>, < tbody>, < tfoot>으로 나눌 수 있다
< thead>태그는 제목을 나타내는 영역으로 제목들을 포함한다.
해당 태그안에는 제목을 나타낼 tr과 th들로 구성되어 있어야 한다.

< tbody>는 제목에 따른 본문 내용을 표시하는 공간이다. 여러 tr과 td들로 구성된 영역이다.

< tfoot>는 표의 요약내용을 나타낼때 사용한다. 예를 들어 총 게시물의 갯수나 표의 통계 내용 같은것을 포함하고 생략이 가능한 영역이다.

[기본형]
< table>
< thead>tr과 th가 들어간다
< tbody>tr과 th,td가 들어간다
< tfoot>tr과 th,td가 들어간다
</ table >

< colgroup>, < col/>
한 열(세로줄)에 있는 모든 셀(칸)에 같은 스타일을 적용하고 싶을때 사용한다.
< col/>태그는 두 줄 이상의 열을 묶어 같은 스타일을 지정하려면 span속성을 사용할 수 있다.
만약 < col span='2'>형식으로 두 줄을 묶어주면 세로 두 줄에 동일한 스타일을 지정할 수 있다. < colgroup>은 < col>들을 묶어주는 태그이다. col의 갯수는 tr안의 td또는 th의 갯수와 같아야 한다. col태그 안에는 width속성을 함께 쓸 수 있고, col마다 차지할 영역을 지정할 수 있다.

[기본형]

  <table>
    <colgroup>
      <col span='2' width='10%'/>
      <col /> 
      <col />
    </colgroup>
  </table>

표를 꾸미는 속성

1. border-collapse
   table태그에 border를 사용하게 되면 table과 td사이는 두 줄로 표현된다.
   이때 border-collapse속성을 사용하면 표와 표사이의 여백을 없애고 한 줄로 표현해준다.
   이 속성은 table태그자리에 선언되어야 한다.

[속성값]
collapse : table과 td사이의 여백을 없애고 border를 한 줄로 합친다.
separate : 기본값으로 table과 td사이 테두리를 따로 표시한다.

2. border-spacing
   table태그에 border를 사용하게 되면 table과 td사이의 간격을 지정하는 속성이다.
   border-collapse:collapse일땐 사용할 수 없고, border-spacing도 table태그에 지정해야 한다. border-spacing의 값을 1개만 쓰면 모두 동일한 간격을 가지고 값을 2개로 나눠 쓰면 첫 번째 자리는 좌우 간격의 자리, 뒤의 자리는 세로 간격의 자리이다.

3. empty-cells
   표에서 내용이 없는 칸이 있을 때 해당 칸에 있는 border를 보여줄것인지 안 보여줄것인지 정하는 속성이다. 마찬가지로 border-collapse:collapse일땐 사용할 수 없다.

[속성값]
show : 내용이 없더라도 빈 셀 주위에 테두리를 표시해준다. 기본값
hide : 내용이 없는 칸은 테두리를 없앤다.

table-layout

컨텐츠에 맞게 셀 넓이를 지정할 수 있다. 셀의 width값을 지정하면 해당 크기에 맞게 화면에 표시된다. 하지만 영문일 경우 여백없이 길게 입력하면 셀의 width값은 무시되고 영문 내용은 한 줄로 길게 표현된다. 만약 width값을 고정하여 칸의 넓이를 적용하려면 table-layout을 사용한다. table태그에 직접 적용해야 한다. table-layout을 적용하면 칸의 넓이가 고정되면서 길게 작성된 영문이 옆 칸을 뚫고 나갈 수 있다. 이때에는 word-break속성을 지정하여 칸에 맞춰 영문이 아래로 내려오도록 할 수 있다. 해당 속성도 table태그에 선언한다.

[속성값]

• fixed : 칸에 적용한 width값을 고정한다. 한 줄로 영문이 길게 들어가더라도 무시하지 않는다.
• auto : 기본값으로 내용이 띄어쓰기없이 영문이 한 줄로 길게 들어가면 width값을 무시한다.
  [word-break]
• break-all : 문자가 칸에 맞춰 아래로 내려온다.
• keep-all : 문자가 칸을 벗어나더라도 유지한다.

vertical-align

표를 작성하면 글자는 칸의 세로 중앙에 위치한다. 만약 이 글자들의 정렬을 top/middle/bottom
위치로 보내고 싶다면 vertical-align을 사용한다. 가로로 정렬하려면 text-align을 이용한다.
vertical-align은 table태그안에서만 사용할 수 있다.

[속성값]

• baseline : 셀의 글자 기준선에 맞춰 글자의 기준선을 맞춘다.
• top : 패딩이 있을 경우 패딩영역을 제외한 칸의 윗쪽에 글자를 맞춘다.
• bottom : 패딩이 있을 경우 패딩영역을 제외한 칸의 아래쪽에 글자를 맞춘다.
• middle : 기본값으로 칸의 세로 중앙에 글자를 나타낸다.