<input type = file> 태그 사용 시 "파일 선택" 표기 임의로 바꾸기
<style>
.라벨이름 {
}
</style>
<body>
<label class="라벨이름" for="xx">내 맘대로 바꾸기</label>
<input type="file" id="xx" style="display:none"/>
</body>
영문도 자동 줄 바꿈하기
style = "WORD-BREAK:break-all;"
style = "WORD-BREAK:keep-all;" //단어 단위로 줄바꿈
테이블
1) 테이블 만들기
ex) 2X5 테이블 만들기
<table border="1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
<td>44</td>
<td>55</td>
<tr>
</table>
ex) 2x5 테이블 만들어서 가로2번째 줄 1칸으로 합치기 (cf.<th>:두꺼운 폰트, <td>:얇은 폰트)
<table border="1">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">
12345
</td>
<tr>
</tbody>
</table>
ex) 테이블 거꾸로 만들기 (5x2)
<table border="1">
<tr>
<th>1</th>
<td>11</td>
</tr>
<tr>
<th>2</th>
<td>22</td>
</tr>
<tr>
<th>3</th>
<td>33</td>
</tr>
<tr>
<th>4</th>
<td>44</td>
</tr>
<tr>
<th>5</th>
<td>55</td>
</tr>
</table>
2) 테두리 가로줄만 보이기
<th>,<td>태그
style="border-bottom:1px solid;" (solid는 실선을 의미한다)
버튼
1) 버튼 두개 일렬로 정렬
<div style="display: inline-block">
A영역
</div>
<div style="display: inline-block">
B영역
</div>
2) 버튼 일렬로 정렬 시 사이 간격 띄우기
style="margin-right: 4px;"
3) 버튼 2개 오른쪽, 왼쪽 끝에 위치시키기
style="float: right;"
style="float: left;"
4) 버튼 3개 왼쪽 끝, 중간, 오른쪽 끝에 위치시키기
<div style="display: inline-block; float: left;">
A영역
</div>
<div style="display: inline-block; float: right;">
B영역
</div>
<div style="text-align: center;">
C영역
</div>
5) 버튼 만들 때 padding, margin 차이
padding : 버튼 안쪽 여백.
margin : 버튼 바깥쪽 여백.
style="padding: 전체px;"
style="margin: 상하px 좌우px;"
style="padding: 상px 우px 하px 좌px;"
이미지
이미지 잘릴 때 - 전체 이미지 보는 법
style="object-fit: contain;"
이미지 여러개 겹치기
<div style="position: relative;">
<img src="1.png"></img>
<div style="position: absolute;">
<img src="2.png"></img>
</div>
<div style="position: absolute;">
<img src="3.png"></img>
</div>
</div>
경로설정
<%=request.getContextPath()%>/~~~/~~~.xx'HTML,CSS' 카테고리의 다른 글
| HTML CSS 추가 기능 (0) | 2023.02.15 |
|---|---|
| HTML CSS 기본 (0) | 2023.02.14 |
| Visual Studio Code(vscode) 단축키 (0) | 2023.02.03 |
| HTML CSS 이중 스크롤바 없애기 (0) | 2023.01.30 |