본문 바로가기
Front-End/HTML

[HTML] 알면 좋은것들

by sihyeong 2022. 10. 18.

이미지 비율

이미지의 width나 height 중 하나만 수정하면
이미지 비율을 유지하며 크기를 조정한다.

만약 둘 다 수정해 버리면 비율을 무시하게 된다.

 

a 태그 이동

a태그는 원하는 웹페이지로 이동할 수 있고
id로도 이동할 수 있다.

두개 합쳐서 원하는 웹페이지의 id로도 이동이 가능하다.

 

label과 input 연결

label태그의 for속성에 input태그의 id를 입력하면
label과 input이 연결되어
label만 클릭해도 input이 되도록 해준다.

<label for="iid">라벨</label>
<input type="text" id="iid">

 

textarea 공백

<textarea>
</textarea>
로 사용하게 되면 여는태그와 닫는 태그 사이에 줄바꿈(공백)
이 들어가게 되어 원하는대로 동작하지 않을 수 있다.

 

colgroup

colgroup을 이용하여 table의 column을 그룹지어 관리할 수 있다.
이를 이용하여 특정한 column에 css를 적용한다던지 할 수 있음

표의 전체 가로 사이즈를 이용하여 각 column별로 사이즈를
(퍼센트 or 값)로 지정하면 됩니다.

<colgroup>
	<col class="weekend">	<!-- 제일 처음나오는 col에 적용  			 -->
	<col span="4">		<!-- 두번째 col부터 4개에 적용			  -->
 	<col class="weekend">	<!-- 앞에서 6번째부터 적용			 -->
	<col width="50%">	<!-- 마지막 col에 적용, (직접적으로 스타일 변경)	-->
</colgroup>

'Front-End > HTML' 카테고리의 다른 글

파일 업로드 및 저장 - 01, html  (0) 2023.09.16
[HTML] 시맨틱 코드 작성  (1) 2022.10.19
[HTML] 메인 페이지 index.html의 이해  (0) 2022.10.17
[HTML] 시맨틱 태그  (0) 2022.10.17