TIL 2 | HTML & CSS (2)

1. Block vs. Inline

1) Block 요소

옆에 다른 요소를 붙여 넣을 수 없는 요소로 <header>,<footer>, <p>, <li>, <table>, <div>, <h1> 등 대부분의 HTML 요소가 해당된다.

• Block 요소를 inline 스타일로 변경할 수 있는 CSS property: display,float

.inline-p {
	display: inline-block;
}

• Block 요소의 레이아웃을 변경하는 방법
  CSS에서 width 값을 주면 그 width 값만큼 가로영역을 차지하며, margin을 auto로 설정하면 가로 중앙에 나타날 수 있다.

.has-width {
    background-color: yellow;
    width: 100px;
    margin: 20px auto;
}

(block 요소인 <p>태그에게 가로길이를 100px로 주었기 때문에 자동 줄바꿈 됨)

2) inline 요소

Block 요소와 반대의 성질을 가진 요소로 요소끼리 바로 옆에 위치할 수 있으며, <span>, <a>, <img> 등이 있다.

• inline 요소를 block 스타일로 변경할 수 있는 CSS property: <display>

.block-span {
	display: block;
}

Ref. display의 기타 속성 : 숨기기
화면 상 어떤 공간을 차지하지 않고 완전 삭제된 것처럼 보이도록 함으로써 interactive한 웹 구현 가능

.hide {
	display: none;
}

2. List (목록)

1) List(목록)을 표현하는 태그

   <li>, <ol>, <ul>

• 부모태그: <ol>, <ul>
  ol(ordered list): 목록에 숫자 표시
  ul(unordered list): 숫자 없이 목록을 표시하며 css를 통해 목록 스타일 변경 가능

• 자식태그: <li>

2) List에 대한 CSS 스타일 적용

목록에 대한 기타 스타일은 border(테두리), padding 등을 통해 스타일 추가가 가능하다.

• CSS selector 표기 방법
  아래 selector는 tag, .class, #id 모두 가능

Selector: first-child {    // 리스트의 첫번째 항목에 스타일 적용
}

Selector: last-child {     // 리스트의 마지막 항목에 스타일 적용
}

Selector: nth-child(odd) { // 리스트의 홀수 번째 항목에 스타일 적용
}

Selector: nth-child(even) { // 리스트의 짝수 번째 항목에 스타일 적용
}

3. Table

테이블을 표현하기 위해서는 <table>, <thead>, <tbody>, <tr>, <th>, <td> 등과 같은 여러가지 태그의 조합이 필요하며, 항상 <table> 태그로 감싸야 한다.

<tr> table row : 한 행을 시작 시 삽입
<td> table data: 각각의 셀은 내 사용
<th> table heading: td 대신 사용 가능하며, 가운데 정렬이 되고 글씨 볼드 처리됨

예시

<table class="border">
    <tr>
      <th>열1</th>
      <th>열2</th>
    </tr>
    <tr>
      <td>Row 1 column 1</td>
      <td>Row 1 column 2</td>
    </tr>
</table>

결과

• 행 또는 열 병합 속성: rowspan, colspan

  ex. 3개 행 병합

<td rowspan="3">text</td>

4. Input

사용자가 직접 텍스트를 입력할 수 있도록 만드는 요소들

1) tag

<input>, <textarea> : inline 요소

2) attribute

• type=”text” : text 입력
• type=”password” : 패스워드 입력할 때 처럼 까만 원으로 출력
• type=”number” : 숫자 입력
• placeholder: 도움말을 넣어주는 텍스트로 실제 입력된 텍스트는 아님.

3) CSS Selector에 html attribute를 표현하는 방법

• 콜론(:) 2개를 붙여서 표현

input::placeholder {
	color: #bbb;
}

• input type(text, password, number) 중 text 타입인 input만 스타일을 입히고 싶은 경우, 대괄호([])와 콜론(:) 2개를 붙여서 표현

input[type="text"]::placeholder {
	color: red;
}

4) 마우스 커서를 올렸을 때 상태변화를 만들 수 있는 selector

hover

ex. 버튼에 마우스를 올렸을 때 커서가 손가락 모양으로 변하도록 만들기

button: hover {
	cursor: pointer;
}

참고링크: cursor 종류 확인하기