List, Table, Input/textarea

• list
• table
• input / textarea

---

1. List

List에 변화를 줄만한 속성들

• ul 혹은 ol(부모)
  • list-style
  • border(border-left를 주로 많이 쓸듯)
  • padding/margin
• li(자식)
  • padding : list간 간격을 위해 padding-bottom을 많이 사용할 듯 함

#1
ul{
}

	
#2
ul {
  list-style: none;
  border-left: 3px solid black;
  padding: 0 0 0 15px;
}

li {
  padding-bottom: 10px;
}

아무런 css가 없는 #1 리스트(좌) // css가 적용된 #2리스트(우)

 

List의 자식인자 선택

#리스트의 자식요소들 중 첫번쨰 선택
list:firstchild{
}

#리스트의 자식요소들 중 마지막 선택
list:lastchild{
}

#리스트의 자식요소들 홀수번째 선택
list:nth-child(odd){
}

#리스트의 자식요소들 짝수번째 선택
list:firstchild(even){
}

 

2. Table

열과 행(tr ,td, th)

• Table은 <table>로 시작해서 </table>로 끝난다. 당연한 거긴 한데, 이안에서 행이나 열을 만듬
• <tr>~</tr>이 하나의 행을 나타낸다.
• <td>~</td>은 하나의 행 내부에서 한 칸을 의미함
• <td>~</td>가 들어갈 자리에 <th>~</th>가 들어갈 수 있다. h태그처럼, 강조+가운데정렬을 해줌

 

테이블 선

• css로 테이블 선에 속성을 추가할 수 있음
• table자체에 클래스를 주고, 해당 클래스내부에 있는 element(th,td,tr)에 속성을 추가해주는 식으로 많이 사용함
  • 참고) .border-table tr : border-talbe이라는 클래스 내부에 존재하는 tr선택
• th,td,tr은 해당 태그에게 할당된 공간을 의미함 > 아래의 예시처럼 th로 감싸진 공간만 더 두껍게 해준다든지 하는게 가능

#css
.border-table tr, .border-table td {
  border: 1px solid black; 
}

.border-table th {
  border: 2px solid black; 
}

 

테이블내 셀 병합

• td나 tr태그에 rowspan 혹은 colspan을 적용해서 병합 가능(tr은 적용 못함. 애초에 할수도 없음!)
• 만약 rowspan이나 colspan에 의해 병합된 칸이 존재할 경우, 병합된 칸은 있다고 값이 설정되었다고 생각하고 나머지 칸들만 설정해주면 됨!(colspan은 직관적으로 이해가 되는데, rowspan은 놓칠수도 있음!)

<table class="assignment_table">
      <tr>
        <th></th>   
        <th>1pm</th>   
        <th>2pm</th>   
        <th>3pm</th>   
      </tr>
      <tr>
        <th>Gym</th>   
        <td>Dodge ball</td>   
        <td>Kick boxing</td>   
        <td>Sack racing</td>   
      </tr>
      <tr>
        <th>Exercise Room</th>   
        <td>Spinning</td>   
        <td class="long" colspan=2>Yoga marathon</td>   
      </tr>
      <tr>
        <th>Pool</th>   
        <td class="long" colspan=3>Water polo</td>   
      </tr>

• 3행 3열에 yoga marathon의 가로행이 colspan=2에 의해 병합된 것을 확인할 수 있으며, 병합된 마지막칸(3행 4열)에 대해서는 td로 따로 칸을 만들어주거나 하지 않았음

 

3. input / textarea

input

• type : 입력받을 값의 타입. 예를 들어 type이 password이면 입력된 값이 보이지 않음
• placeholder : 입력받은 값이 없을 때 보여지는 값. 실제 값이 아님(submit될 수 없음)
• value : 값을 입력하기도 전에 입력되어 있는 값(submit)이 가능. 값이 입력되어 있는 상태이므로 placeholder가 보이지 않음

<input type="password" placeholder="비밀번호"> 
<input type="number" value=123456>

placeholder : 비밀번호  // value : 123456

textarea

• 그냥 input에 비해 조금 더 긴 텍스트를 입력받고 싶을 때 사용함.
• 몇 줄의 inputbox로, 보통 허용되는 행수를 정해주는 경우가 많다

 

input과 textarea의 width조절

• input과 textarea는 기본적으로 inline-block임. 따라서 내용에 따라 width가 정해지는게 default지만 inline과는 다르게 그 넓이를 설정해줄 수 있다.
• 일반적으로는 그냥 input이나 textarea의 width를 직접적으로 설정해줄 수도 있다.
• 그외에도 많이 사용하는 방법으로는, input이나 textarea를 block속성의 element(div 등)로 부모 element로 감싸준 후, 부모 element의 넓이를 설정하고(width:200px 등), input이나 textarea에 width:100%를 주는 방식을 많이 사용한다

#HTML
<div class ="survey-container">
    <div class="input-wrap">
    <input type="text" placeholder="ID(필수)"> 
    </div>
    <div class="input-wrap">
    <textarea>소개:</textarea>
    </div>
</div>

#css
.survey-container {
  width: 200px;
}

input, textarea {
  width: 100%;
  }

survey-container로 감싸져 있는 input과 text-area