TIL 2 | HTML & CSS (2)

hjulee12·2020년 11월 17일
0

HTML & CSS

목록 보기
2/4

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(목록)을 표현하는 태그
&nbsp;&nbsp;&nbsp;`<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: 각각의 셀은 <tr><td> 사용
`<th>` table heading: td 대신 사용 가능하며, 가운데 정렬이 되고 글씨 볼드 처리됨

예시
열1 열2
Row 1 column 1 Row 1 column 2
``` 결과 ![](https://media.vlpt.us/images/hjulee12/post/b4e9785e-18b2-4bbc-b23d-84eff93b5c73/image.png)
  • 행 또는 열 병합 속성: 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 종류 확인하기

0개의 댓글