Java/UI구현
2023.03.16
amungstudy
2023. 3. 16. 16:22
이미지 파일
src = 거의 대부분 상대경로
href는 절대경로.상대경로 다씀...
<!-- 다중입력창 : textarea태그
여러줄의 텍스트를 입력할때 사용.
textarea의 사이즈 조정하는 속성
rows속성 : 입력창의 높이 설정
cols속성 : 입력창의 너비 설정 -->
자기소개 : <textarea rows="20" cols="80"></textarea>
<!-- 파일선택 창 만들기 -->
첨부파일 : <input type="file">*2MB까지 가능
<br>
<!-- HTML5에 추가된 폼 양식 -->
<input type="color"> <!-- 색상선택 -->
<input type="datetime-local"> <!-- 날짜와 시간 선택 -->
<input type="date"> <!-- 날짜 선택 -->
<input type="month"> <!-- 연도와 월 선택 -->
<input type="number"> <!-- 숫자 선택 -->
<input type="range"> <!-- 슬라이더 바로 값을 선택 -->
<input type="time"> <!-- 시간 선택 -->
<input type="week"> <!-- 연도와 주 선택 -->
<h1>사용자가 웹사이트로 정보를 보내게 해주는 태그 : form태그</h1>
<!-- form태그에서 주로 사용하는 속성들
method속성 : 사용자가 입력한 내용을 서버쪽에 어떻게 넘겨줄지 지정
주로 사용하는 값 : get - 주소표시줄에 사용자가 입력한 내용이 그대로 드러남.(기본값)
post - 사용자가 입력한 내용이 주소표시줄에 드러나지 않음.
로그인.회원가입 -> post 값 주로 사용.
action속성 : form태그안의 내용들을 처리해 줄 서버상의 프로그램 지정(주소지정)-->
<form action="home.html" method="get">
<!-- form태그안에 자식태그에 할당된 name값을 통해 서버에 데이터를 전달하도록 할수 있다. -->
네트워크상에서 주고받는 데이터 : 파라미터(매개변수)
- 파라미터는 url의 끝부분에 ?뒤에 위치하게된다.
- 파라미터가 여러개일때는 &로 구분이 된다.
- 파라미터는 name값과 실제값(데이터) 의 쌍으로 이루어져있다.
서버상에서 발생하는 응답코드들
- 200 : 네트워크 상태가 성공적으로 이루어졌을때
- 400 : 파일이 없거나 주소가 없는경우(오타일 가능성이 크다.)
- 500 : 서버상에서 발생에러(오타일 가능성이 크다.)
첨부파일 : 서버 과부하 피해서 용량 제한함. 보통 게시판글 20~30메가.
<form>
아이디 : <input type="text" name="userId"><br>
비밀번호 : <input type="password" name="pwd"><br>
<input type="submit" value="로그인">
</form>
name: 서버측에 전달될 때 전달되는 값 지정함
개인정보 제공 동의:<input type="radio" name="agree" value="Y">동의
value를 이용해서 '동의'대신 'Y'라는 값으로 데이터가 넘어감
form태그 작성시 name값 누락 없이 만들어야 좋음.
CSS의 기본구조
선택자 { css속성:값; }
p { color : blue; }
선택자 : css를 적용할 영역을 선택할 때 사용
* 선택자의 종류 : 태그, id, class 선택자
- 태그 선택자 : 태그이름 그대로 사용
- id 선택자 : 특정태그에 id속성이 부여가 된 상태에서 #id이름값으로 선택
- ex: #idSelect{ 속성:값; }
이때, 해당 html에는 id속성이 idSelect 인 태그에 css가 적용된다.
id 속성은 해당 html페이지에서 똑같은 id값은 중복으로 사용 불가능
또한, 하나의 태그에는 하나의 id값만 존재(단일 선택)
- ex: #idSelect{ 속성:값; }
- class 선택자 : 특정태그에 class속성이 부여가 된 상태에서 .class이름값 으로 선택
- ex: .classSeclect{ 속성:값; }
이때, 해당 html에는 class속성이 classSelect인 태그에 css가 적용된다.
class 속성은 해당 html페이지에서 여러개가 중복으로 사용 가능
또한, 하나의 태그에는 여러개의 class값이 존재 가능(다중선택)
- ex: .classSeclect{ 속성:값; }
그 외의 선택자
- 부모 자식 선택자
- 부모선택자 자식선택자{ 속성:값;}
- ex: ul li { color : red; }
- 다중 조건 선택자
- 특정 조건을 만족하는 선택자에 css를 적용
- and 연산(두가지의 조건이 일치하는경우-공백제거): 태그이름#아이디 {속성1:속성값; 속성2:값;}
태그이름.클래스명{속성:값;}
.클래스명#아이디{속성:값;} - or 연산(두가지 선택자중 하나라도 만족시 적용-콤마) : 태그이름, #아이디{속성:값;}
태그이름, .클래스명{속성:값;}
.클래스명, #아이디{속성:값;}
- 가상 클래스 선택자
- 선택자 뒤에 :가상이벤트 를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있고, 이를 가상(추상)클래스 라고 한다.
선택자 뒤에 :가상이벤트 를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있고,
이를 가상(추상)클래스 라고 한다.
:link - 방문한적이 없는 링크(a태그 등)
:visited - 방문한적이 있는 링크(a태그 등)
:hover - 마우스오버 했을때
:active - 마우스를 클릭했을때
:focus - 포커싱 되었을때 (input 태그 등 )
:first-child - 첫번째 자식요소
:last-child - 마지막 자식요소
CSS적용 우선순위
- 속성값 뒤에 !important 를 붙힌 속성
- 우선순위를 무시하고, 꼭 적용 시키고 싶은 속성이 있다면 속성값 뒤에 !important를 붙여서 적용 시켜주면 된다.
- HTML태그에 style속성을 직접 지정한 속성(인라인 스타일)
- #id로 지정한 속성(id선택자)
- .클래스 , :가상클래스로 지정한 속성
- 태그 선택자로 지정한 속성
- 상위 객체에 의해 상속된 속성
css삽입 방법
- 인라인 스타일 : HTML태그에 style속성을 직접 부여하는 방법
- 내부 스타일 시트 : HTML문서에 style태그를 삽입하여 작성
- 외부 스타일 시트 : 별도의 css파일을 만들어 HTML에서 파일을 참조하는 방식
<style>
라는걸 적어보았다.
/* 태그 선택자 */
p{ color:red; }
/* id 선택자 */
#blue{ color : blue; }
.bold{ font-weight: bold; }
/* class 선택자 */
.green{ color : green; }
.text-size-50{ font-size: 50px; }
/* 부모 자식 선택자 */
ul li{ color : violet; }
/* 다중 조건 선택자 연습 - and연산 */
div#m_box{ width:220px; height: 150px; border: solid 1px red;}
div.box{ background-color: blue; }
/* 다중 조건 선택자 연습 - or연산 */
span , .box{ background-color: green; }
/* 가상(추상) 클래스 선택자 연습 */
a{
text-decoration: none;
}
a:hover{
color: coral;
font-weight: bold;
font-style: italic;
}
ul li:first-child{
font-weight: bold;
font-size: 24px;
}
</style>
<!-- 외부 스타일 시트 적용하는 방법 -->
<link rel="stylesheet" type="text/css" href="myCss.css">
*외부 스타일시트는 같은 폴더에 'myCss.css'라는 파일을 만들어서
#myStyle{
color: gold;
}
마우스오버: 특정 태그나 글자에 마우스 올리는거
<div> : 박스 칸 만드는 태그