<caption>은 <table>안에 넣는다.
border-collapse 속성
border-collapse 속성값을 collapse로 설정하면 해당 테이블의 테두리는 한 줄로 표현된다.
이 속성을 명시하지 않으면 해당 테이블은 기본 설정으로 테이블 요소별 테두리를 모두 표현하게 된다.
♣ 두 줄 표 말고, 한줄표 만들때 사용
|
|
table, th, td { border: 2px solid orange; } |
|
|
table { border-collapse: collapse; } |
+
border-collapse
- collapse : border를 한 줄로 합칩니다.
- separate : border를 분리한채로 유지합니다.
<table에서 tr, thead 등에 border넣기>
tr {border-bottom: 2px solid black} 으로 해도 선이 나타나지 않는다.
그렇다고 td에 넣으면 각각 셀에 맞춰 끊긴 선이 나타남.
table에 border-collapse: collapse를 넣은 후에 border를 넣으면 tr에도 테두리를 넣을 수 있다.
자손의 자손 태그들 선택하는 방법.
아래처럼 thead 와 tbody에 table과 같은 class 부여
(table의 자손의 자손 태그에는 스타일이 상속안되더라. 그래서 따로 class 지정으로 타겟팅함)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div class="art_body">
<table class="t1">
<caption class="table1title">아동 사이즈</caption>
<thead class="t1">
<tr>
<th colspan="2">구분</th>
<th colspan="2">Samll</th>
<th colspan="2">Medium</th>
<th colspan="2">Large</th>
<th colspan="2">X-Large</th>
</tr>
</thead>
<tbody class="t1">
|
cs |
css 아래와 같이 띄워쓰기 하면 됨
|
1
2
3
4
5
6
7
8
|
}
.t1, .t1 th, .t1 td {
border: 1px solid #e4e4e4;
font-size: 12px;
color: #555;
border-collapse: collapse;
text-align: center;
}
|
cs |
아래처럼 아동사이즈 표인 t1의 th, td에는 border가 보이지만,
환분 가능 금액 조회 표인 t2에는 border을 볼 수 없음.
border-spacing 속성
border-spacing 속성은 테이블 요소(th, td)간의 여백을 설정해 준다.
vertical-align 속성
vertical-align 속성은 테이블 요소(th, td) 내부에서 텍스트의 수직 방향 정렬을 설정한다.
- <th>태그와 <td>태그 모두 가운데 정렬이 기본 설정이다.
권장 사항: 각 table 요소들의 너비를 지정할 때, 색깔 지정할 때 쓰는 코드 colgroup
(text-align 같은 추가적인 부분은 할 수 없음.)
속성 선택자
단순 속성으로 선택
p[class] { color: silver; }
p[class][id] { text-decoration: underline; }
<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>
속성 선택자는 대괄호를 이용해서 선언하며 대괄호 안에 속성 이름이 들어갑니다.
요소에 해당 이름의 속성이 있다면 해당 사항이 적용됩니다.
위 CSS 코드는 요소 선택자와의 조합으로 이루어진 코드입니다.
첫 번째는 <p>이면서 class 속성이 있는 요소이면 color: silver 규칙이 적용됩니다.
두 번째는 <p>이면서 class 속성과 id 속성이 함께 있어야 text-decoration: underline 규칙이 적용됩니다.
바로 위 HTML 코드에는 3개의 <p>가 있습니다.
그렇다면 이 3개의 <p>에는 각자 어떤 스타일이 적용될까요?
먼저 예측을 하시고 직접 실습을 하는 게 좋습니다.
p[class] 선택자의 규칙은 class 속성만 존재하면 적용이 되기 때문에 3가지 요소 모두에 적용됩니다.
p[class][id] 선택자의 규칙은 class 속성과 id 속성 모두 있는 요소만 해당하기 때문에 마지막 요소에만 적용됩니다.
두 규칙 모두 속성의 값은 상관하지 않습니다.
정확한 속성값으로 선택
정확한 속성값으로 선택은 제목 그대로 속성의 값으로 요소를 선택합니다.
선택자는 대괄호 안에 속성 이름과 속성값을 다 적으면 됩니다.
p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }
p[class="foo"]는 <p>이면서 class 속성의 값이 foo이면 적용되고, p[id="title"]는 <p> 이면서 id 속성의 값이 title이면 적용됩니다.
특정 위치의 자식 요소 선택하기
:only-child
부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택한다.
A:only-type-of
부모 안에 A 요소가 하나뿐일 때 선택한다.
:first-child
부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택한다.
:last-child
부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택한다.
A:first-of-type
부모 안에 있는 A 요소 중에서 첫번째 요소를 선택한다.
A:last-of-type
부모 안에 있는 A 요소 중에서 마지막 요소를 선택한다.
:nth-child(n)
부모 안에 있는 모든 요소 중에서 n 번째 자식 요소를 선택한다.
:nth-last-child(n)
부모 안에 있는 모든 요소 중에서 끝번째 자식 요소를 선택한다.
A:nth-of-type(n)
부모 안에 있는 A 요소 중에서 n 번째 요소를 선택한다.
A:nth-last-of-type(n)
보모 안에 있는 A 요소 중에서 끝에서 n 번째 요소를 선택한다.
부모의 아래있는 모든 요소의 순서 contents :nth-child(n)
부모의 아래에 있는 요소 중, p들 만의 순서 contents p:nth-of-type(n)
CSS로 A부터 B까지 선택하기
p:nth-child(n+8):nth-child(-n+15)이렇게 p태그를 8번부터 ~ 15번 까지를 선택할 수 있습니다.
이것도 보통 자바스크립트에서 처리했을건데 CSS로 처리시 속도가 매우 향상됩니다.
언어 편집 단축키
단축키 구분핵심 설명Command ID
| Ctrl + ← / Ctrl + → 단어별 커서 이동 |
한글자씩 커서 이동이 아닌, 단어별로 커서를 이동해야 할 경우 Ctrl + ← / Ctrl + → 단축키를 사용하여 좌우로 쉽게 이동할 수 있습니다. | |
| Ctrl + Shift + ← / Ctrl + Shift + → 단어 선택 |
단어를 선택해야 할 경우 Ctrl + Shift + ← / Ctrl + Shift + → 단축키를 사용하면 됩니다. | |
| Alt + Shift + → 선택 확장 |
문단 또는 태그 단위로 확장 선택을 해야 할 경우 Alt + Shift + → 단축키를 사용하면 됩니다. | editor.action.smartSelect.grow |
| Alt + Shift + ← 선택 축소 |
문단 또는 태그 단위로 축소 선택을 해야 할 경우 Alt + Shift + ← 단축키를 사용하면 됩니다. | editor.action.smartSelect.shrink |
| alt + 마우스 클릭 필요한 문자열을 골라서 커서 추가(다중선택) (★) |
동일하지 않은 다양한 문자열을 수정시 alt + 마우스 클릭으로 작업자가 원하는 문자열을 선택하여, 한번에 여러개를 수정할 수 있습니다. | |
| Ctrl + K → Ctrl + F 자동 정렬(★) |
들여쓰기를 제대로 정리하지 못했을 경우 Ctrl + A 후 Ctrl + K → Ctrl + F 단축키를 사용하면 한번에 코드 자동정렬을 할 수 있다. 여러명의 퍼블리셔가 한개의 프로젝트를 진행할 경우 코드 정렬의 통일성 문제를 해결할 수 있기 때문에, 없어서는 안될 단축키 입니다. |
editor.action.formatSelection |
| Ctrl + D 특정 문자열 여러개 찾기(★) |
동일한 문자열 여러개를 한번에 수정해야 할 경우 Ctrl + D 단축키를 사용하여 한번에 수정할 수 있다. 다중 선택 방법은 Ctrl + D 를 누른 횟 수 만큼 동일한 문자열이 선택 된다. 예를 들어 AA라는 문자열 2개를 BB로 수정이 필요할 경우, AA에 커서를 두고 Ctrl + D 단축키를 2번 눌러 AA 문자열 2개를 선택한 후 BB로 문자를 수정하면 된다. |
editor.action.addSelectionToNextFindMatch |
| Ctrl + Shift + L 특정 문자열 모두 선택 |
Ctrl + D는 동일한 문자열을 누르는 횟 수 만큼 선택 갯수가 확장되는 방식이라면 Ctrl + Shift + L 단축키를 사용하면 한번에 동일한 문자열을 선택하여 편집할 수 있습니다. 찾아야 할 문자열을 블럭선택 한 후 Ctrl + Shift + L 단축키를 누른 후 수정하면 됩니다. |
editor.action.addSelectionToNextFindMatch |
폰트 적용 방법
@import나 body{}나 둘다 각각 폰트적용됨. 아니면 아래 코드처럼 body안에서 모두 설정하거나, link통해서도 가능.
link 태그로 사용하기
HTML의 link 태그로 사용하는 방법입니다.
먼저 자신이 사용할 폰트의 URL을 복사한 후, <head>~</head> 태그 사이에
<link href="주소" rel="stylesheet">
보충
1.caption은 table 태그 바로 밑에 와야함.
2.셀 합치기 할때는 아래 하위 부분이 자동으로 합쳐지지만, 코드를 입력해서 칸을 확보해 줘야 에러x
3.colgroup을 썼다면 모든 열에 대해서 값을 지정.
'📚HTML, CSS > 실습 및 프로젝트' 카테고리의 다른 글
| html / css 프로젝트 1-(4) list 꾸미기 (0) | 2023.02.02 |
|---|---|
| html / css 프로젝트 1-(3) form 꾸미기 (0) | 2023.02.02 |
| html / css 프로젝트 1-(1) (0) | 2023.01.30 |
| [html, css] 기초 or 기본 문제들 모음(3)(+유효성 검사) (0) | 2023.01.30 |
| [html, css] 기초 or 기본 문제들 모음(2) (1) | 2023.01.27 |