2023.03.15

Java/UI구현

2023.03.15

amungstudy 2023. 3. 15. 16:25

상대경로 : 파일이 어떤 폴더에 위치해있는지 생각잘하고 사용하기~

비디오 video 태그는 src는 따로 source태그 , 속성은 video옆에

내부 스타일 시트 적용 : style태그

<head>

<style>

특정 태그를 선택할때는 태그이름 그대로 사용하면 된다.

단, 태그이름을 사용하여 style적용할때는

본 페이지에서 같은 태그를 사용할 때 전부다 같은 스타일이 적용된다.

활용 방법 : 태그이름{ 스타일1:값; 스타일2:값; }

<style>

table,tr,td{

/* table, tr, td 태그에 스타일을 적용하겠다. */

border: solid 1px black;

border-collapse: collapse;

padding: 8px;

}

/* border : html요소에 테두리 설정하는 속성

border에서 주로 사용하는 값 : 선의종류 선의두께 선의색상; */

padding: 8px; 내부간격 조절

<hr> : 한줄 수평선

<td colspan="2"> : 테이블 열병합

<td rowspan="2"> : 테이블 행병합

<colgroup> : 테이플 태그 내에서 테이블의 서식 지정을 위해 사용

<col>태그는 열의 값만큼 넣어야 함. colgroup요소에 속하는 각열의 속성을 정의할 때 사용

ex> <col width="45%"> 이때 비율은 다 합쳐서 100%되게 지정.

06폼양식

form태그에서 주로 사용되는 태그들

input태그: 입력창 만들기, 일반적인 텍스트 입력모드

<input type="password"> : 비밀번호 입력모드

<input type="text" placeholder="상세주소">: 특정 텍스트를 입력하도록 유도하는 속성 -->

라디오버튼 모드 : 단일선택 <input type="radio"

미리 체크를 하는 속성 : checked (input 태그 안에 넣어줌)

체크박스 모드 : 다중선택 <input type="checkbox"

선택박스 만들기 : select, option 태그

<option>naver.com</option>

<option>hanmail.net</option>

<option>gmail.com</option>

</select>

다중입력창 : <textarea> 여러줄의 텍스트를 입력할 때 사용.

textarea의 사이즈 조정하는 속성

rows속성 : 입력창의 높이 설정

cols속성 : 입력창의 너비 설정 -->

버튼 만들기 : form태그 안에서 타입에 따라 동작이 다르다. 클릭이 가능한 버튼(자바스크립트와 함께 이용)

1> <button type="submit">저장</button>

2> <input type="submit" value="저장">

1>2>두 방법 다 표현이 가능하다.