양수로 계산할 때는 열 기준 맨 왼쪽부터 1,2,3,4,5
음수로 계산할 때는 열 기준 맨 오른쪽부터 -1,-2,-3,-4,-5 이런 식이다.
( 이는 row, 즉 행도 마찬가지 )
https://www.youtube.com/watch?v=DsrhJV0mfL0
grid-column-end의 값이 2번이었던 이유. 맨 왼쪽에서부터 1번 2번 이런 식으로 되어있기 때문에
5번째 열부터 시작해서 2번째 열에서 끝난다. 그래서 값이 2번이었던거임 ( 해결완료 )
grid-column-end: span 2; ( 그리드의 넓이를 2만큼 넓히겠다. )
grid-column-end: 4; 와 똑같은 값.
span -> 열의 넓이 값으로 지정할 수 있게 해줌 ( 그래서 양수만 해당 가능 )
* 일단 9단계 까지. ( 추후에 더 공부 )
* 디스플레이 table에 대해서 설명하라. 그리고 만약 쓴다면 쓰는 이유도 서술하라.
-> 부모 태그에 display : table을 선언해주고,
자식 태그에 display: table-cell을 선언해주면
갯수가 몇개가 되든 동일한 간격으로 영역을 가지게 된다.
그럼 이런 형식이 된다.
* 굳이 이렇게 하는 이유 ?
-> float로 설정하고 각각의 li에다가 width값을 33.33%나 25%로 설정할 수도 있겠지만
개발자와 협업을 했을시 만약 이 게시물들이 꼭 4개나 3개가 아니라 5개, 6개일 경우엔 레이아웃이 확 틀어져버린다.
( 유지보수 하기에도 엄청 불편하고 코드도 엄청 늘어나게됨. 클래스도 계속 늘려야하는 불편함이 있음 )
그래서 이럴 땐 테이블을 지정해준다.
그리고 부모 태그에 table-layout:fixed를 선언해주면
이런 식으로 동일한 넓이를 가지게 된다.
* 그럼 flex도 쓰면 되지 않나? 굳이 table을 쓰는 이유는?
-> 익스플로러 환경에서 ( IE ) flex는 동작을 안하기 때문에 그런 환경까지 고려해야 하는 웹 사이트의 경우엔
display : table을 쓰기도 한다.
* table이 사용되는 또 다른 예제는 없나? 있다면 서술하라.
말 그대로 테이블. 그러니까, 레이아웃을 잡는 것 이외에도 표를 만들 때에도 테이블을 사용한다.
display:table이 아니라, html 단에서 table을 사용하여 표를 작성한다. 이와 관련된 태그로는
table, th, td 등이 있다.
HTML 테이블 -
테이블이란 여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표를 의미한다.
HTML에서 <table> 태그를 사용하여 이러한 테이블을 작성할 수 있다.
테이블에서 <tr>은 열을 구분해준다. ( 테이블 로우 )
테이블에서 <th> 태그는 각 열의 제목을 나타내며 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 된다.
<td> 태그는 테이블의 열을 각각의 셀로 나누어 준다 ( 엑셀과 동일함 테이블 데이터 )
CSS의 border 속성을 이용하여 테이블에 테두리를 표현할 수 있다.
border 속성값을 따로 명시하지 않으면 해당 테이블은 늘 빈 테두리를 가지게 된다.
border-collapse : collpase 로 설정해주면 테이블의 테두리를 한 줄로 표현할 수 있다.
collapse:붕괴되다,무너지다
colspan 속성을 사용하면 테이블의 열 ( column ) 을 합칠 수 있다.
rowspan 속성을 사용하면 테이블의 행 ( row ) 을 합칠 수 있다.
* caption 이란?
-> <caption> 태그를 사용하면 테이블 상단에 제목이나 짧은 설명을 붙일 수 있다.
전체를 테이블로 묶어주고 하나의 행은 tr이라는 태그로 묶어줌 그리고 그 안에 td라는 데이터 하나 하나로 ( 셀 ) 구성되는 것.
thead -> 제목
tbody -> 본문
tfoot -> 하단 ( tfoo은 맨 밑이 아닌 가운데 또는 위에다가 두어도 웹브라우저 상에선 표의 가장 아래에 배치되게 된다. thead도 동일함. )
th -> thead의 td
* 표를 병합하는 방법에 대해서
병합엔 총 2가지의 종류가 있음. 수평 병합과 수직 병함.
병합을 해주고 그 값을 없애주면 됨. ( td )
수직 병합 = rowspan ( 행 )
수평 병합 = colspan ( 열 )
* form 태그에 대해서 설명하라.
<form> 태그는 웹페이지에서의 입력 양식을 의미한다.
로그인 창이나, 회원가입 폼 등이 이에 해당함.
텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어
정보를 처리하게 된다.
실제로 백엔드 코드와 함께 <form>을 사용하기 위해서는 다음 속성들이 사용된다.
name : 폼의 이름
action : 폼 데이터가 전송되는 백엔드 url
method : 폼 전송방식
* input 태그란 무엇이며 어디에 쓰이는지 서술하라
<form> 태그는 전체 양식을 의미하며, 화면에 보이지 않는 추상적인 태그이다 ( div처럼 )
실제로 사용자가 양식을 입력하기 위한 태그는 <input> 태그 등이 사용된다.
type 속성을 통해 종류를 나타내며, name을 통해 데이터의 이름, value를 통해 기본 값을 지정한다.
- type
text : 일반 문자
password : 비밀번호
button : 버튼
submit : 양식 제출용 버튼
reset : 양식 초기화용 버튼
radio : 한개만 선택할 수 있는 컴포넌트
checkbox : 다수를 선택할 수 있는 컴포넌트
file : 파일 업로드
hidden : 사용자에게 보이지 않는 숨은 요소
등의 유형이 있으며 HTML5에는 다양한 종류의 input이 있다!