[HTML/CSS] 기본 개념 정리 MARK VI

1. 테이블

• 테이블을 표현하기 위해 여러 태그들의 조합이 필요하다. (table,thead,tr,th,td 등 )
• 테이블은 항상 table태그로 감싸져있다.
• 한 행을 시작할 때 tr로 시작한다. (table row)
• 각 셀은 tr태그 내에 td태그를 사용한다.(table data)

<table>
    <tr>
      <td>Row 1, column 1</td>
      <td>Row 1, column 2</td>
    </tr>
    <tr>
      <td>Row 2, column 1</td>
      <td>Row 2, column 2</td>
    </tr>
  </table>

• td 대신 th를 사용하면 볼드체가 적용된다. 테이블의 최상단에 제목을 표시할 때 주로 사용한다.
• td나 th태그에 colspan, rowspan이라는 attribute를 추가해서 구현할 수 있다.
• colspan은 열을 병합, rowspan은 행을 병합한다.
• 테이블에 선을 추가하려면 css에서 border값을 th,td태그에 적용하면된다.

2. input 태그

<input type="text" placeholder="ID"> 
<input type="password" placeholder="비밀번호"> 
<input type="number" placeholder="학번">

type="text"

• text를 입력하는 속성이다.
• 대부분의 input type은 text이다.
• 어느 텍스트나 입력이 가능하다.
• 이름, id, 주소, 닉네임 등을 입력 받을 때 사용

type="password"

• text와 비슷한 속성, 뭔가를 입력하면 까만 원으로 나온다.
• 만약 화면을 공유하고 있다면, 남이 보지 않도록 처리한 것
• 화면에서는 안 보여도 Javascript 쪽에서 무슨 값을 입력했는지 가져올 수 있다.

type="number"

• 숫자만 입력할 수 있다.
• 만약 number로 핸드폰 번호를 받으려면 "-"는 입력 할 수 없다.

placeholder

• placeholder는 도움말을 넣어주는 부분이다.
• 실제 input에 입력되어있는 텍스트가 아니다.

3. Textarea 태그

• textarea는 input보다는 더 긴 텍스트를 입력받고 싶을 때 사용한다.
• 보통 짧은 방명록이나 댓글을 입력할 때 textarea 태그를 사용

4. 디자인 변경 _ inline element

• input, textarea, hutton은 모두 inline element라서 한 줄에 이어서 나온다.
• 실제 사이트를 개발할 때, input이나 textarea의 부모에 div태그로 감싸 영역을 분리한다.
• 아래의 태그는 textarea의 resize기능을 없애준다.

textarea {
  resize: none;
}

5. placeholder, type 스타일

• placeholder는 attribute이고 css의 selector에 :: 콜론 두개를 붙여 표현한다.

input::placeholder {
  color: #bbb;
}

• text 타입인 input태그에만 스타일을 입히고 싶으면 아래와 같이 표현한다.

input[type="text"] {
}

6. button 스타일

button {
  color: white;
  font-size: 15px;
  background-color: #4CAF50;
}

• 버튼의 텍스트 색, 버튼의 폰트 색, 버튼의 배경 색

button {
  padding: 5px 10px;
  border-radius: 5px;
}

• 테두리와 버튼의 여백, 테두리 반경(모서리가 둥근 효과)

button:hover {
    cursor: pointer;
}

• 버튼에 마우스를 올리면 커서 모양이 포인터로 바뀐다.

button:hover {
  opacity: 0.8;
}

• 버튼 위에 마우스를 올리면 투명도가 생긴다.

7. Position

• html 코드를 작성하면, 작성한 순서대로 페이지에 그려진다. CSS의 'position' 프로퍼티를 사용하면, html 코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있다.
• position에서 사용하는 값은 4개가 있는데 static은 거의 사용하지 않는다. (static, relative, absolute, fixed)

8. relative

• relative자체로는 특별한 의미가 없다. 딱히 어느 위치로 이동하지 않는다.
• 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있다.
• top, right, bottom, left는 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼디 이다.

9. absolute

• 절대적인 위치에 둘 수 있다.
• 어떤 기준으로 절대적이냐 하면, 특정 부모에 대해 절대적으로 움직이게 된다.
• 부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다.
• 일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 relative를 부여하면 된다.
• absolute값을 갖게 되면, 내용의 크기만큼만 가로크기가 된다. (block-> inline 크기)