HTML/CSS

img

태그 활용(semantic tag)

<img alt="문자" src="http://www..">

• alt: 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때..), 이미지 대신 보여줄 텍스트
• src: 이미지 파일 경로 or 이미지 url 주소

class 활용

<div class="bg-img">배경이미지</div>

.bg-img {
  background-color: yellow;
  background-image: url("https://www..");
}

• div태그는 자식태그나 내부에 있는 내용의 세로크기가 곧 div태그의 세로크기로 됩니다.
• div태그의 가로크기는 div태그의 내부에 뭔가가 있기만 하면 화면 전체의 너비가 곧 자기의 가로크기가 됩니다.

Block vs inline

Block

• 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻
• block 성질 갖도록 하는 설정

.block-span {
  display: block;
}

inline

• 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻
• inline 성질 갖도록 하는 설정

.inline-p {
  display: inline-block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

none

• 요소를 보이게/안보이게 할 수 있는 기법

.hide {
  display: none;
}

margin: auto

• 중앙으로 정렬하는 설정
• 1개 값이 있을 때는 사방 모두 같은 margin을 준다는 의미였고,
  4개 값이 있을 때는 위/오/아래/왼 순서로 margin을 준다는 의미였습니다.
  2개의 값만 있을 때는 첫 번째가 위, 아래(수직) / 두 번째는 왼, 오른쪽(수평)

List

• (숫자)목록

<ol>
  <li>List</li>
  <li>Set</li>
  <li>HashMap (Dictionary)</li>
  <li>Queue</li>
  <li>Stack</li>
  <li>Tree</li>
  <li>Sorting</li>
  <li>Search</li>
</ol>
<!-- <ul> 숫자 없는 목록-->

• list 지정하여 수정 가능

li:first-child {
}
li:last-child {
}
li:nth-child(odd) {
}
li:nth-child(even) {
}

Table

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

병합

• colspan="숫자": 가로 병합
• rowspan="숫자": 세로 병합

Input

input/textarea

<input type="text" placeholder="ID(필수)"> 
<input type="password" placeholder="비밀번호"> 
<input type="number" value="123456">
<textarea>소개:</textarea>

1. type="text"
   text를 입력하는 속성입니다.
   대부분의 input type은 text 입니다.
   어느 텍스트나 입력할 수 있습니다.
   이름, id, 주소, 닉네임 등을 입력 받을 때 사용합니다.

2. type="password"
   text와 비슷한 속성인데, 뭔가를 입력하면 까만 원으로 나옵니다.
   만약 화면을 공유하고 있다면, 남이 보지 않도록 처리한 것입니다.
   화면에서는 안 보여도 JavaScript 쪽에서 무슨 값을 입력했는지 가져올 수 있습니다.

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

4. placeholder
   placeholder는 도움말을 넣어주는 부분입니다.
   실제 input에 입력되어있는 텍스트가 아닙니다.
   textarea처럼 input에도 미리 값을 세팅해놓고 싶을 수가 있죠.
   그때는 value라는 attribute를 사용합니다.

button

• 커서 반응

button:hover {
    cursor: pointer;
    opacity: 0.8;
}/* 손가락모양 + 밝기 */

Position / float

https://velog.io/@sgyos000/About-Layout