반응형
HTML5
HTML5에서 새로 추가된 기존에 없던 태그와 속성을 조금만 알아보겠다.
<label for="phone">전화번호</label>
<input type="text" id="phone" name="phone"
placeholder="010-0000-0000">label태그는 폼의 양식에 이름을 붙이는 태그로 for의 값을 input의 id와 같게하면 서로 연결되어 이름을 클릭해도 입력란을 클릭한것과 같은 효과를 낸다.
placeholder 속성은 입력란 안에 문자열이 보인다. 일종의 힌트 제공. 입력란에 문자 입력시 사라진다.
<input id="name" type="text"
placeholder="힌트 제공" autofocus>autofocus는 자동으로 커서 위치를 지정해준다.
<input id="prod" type="text" value="슈트" readonly>readonly는 value값을 수정할 수 없게 한다. 읽기 전용으로 만들어 버린다. 브라우저마다 지원여부가 다르다.
<datalist id="mycolor">
<option value="black" label="검정색">
<option value="white" label="흰색">
</datalist> datalist 태그는 select와 유사하다. form 요소에서 미리 지정된 옵션 목록을 제공해준다.
label속성은 옵션에 대한 짧은 설명으로 드롭다운 리스트에 표시가 된다.
value는 서버에 전송될 값이다.
<input id="order" type="number" min="1" max="10" value="1">number 타입은 숫자만 입력이 가능하기 때문에 검증을 필요로하는 별도의 스크립트를 작성하지 않아도 된다. 브라우저에 따라 1단위씩 값을 변경할 수 있는 화살표 UI 제공 해준다.
입력 가능한 값 : min부터 max까지
<input type="date" id="wanted">date 속성은 날짜를 입력 받을수 있는 속성이다.
시맨틱 태그 (Semantic Tag)
html5에서 새로 추가된 태그로 개발자와 브라우저에게 의미있는 태그를 제공한다.
- header : 문서의 머릿말(사이트 소개, 제목, 로고)
- nav : 네비게이션(메뉴)
- section : 웹문서를 장(chapter)으로 볼 때 절을 구분하는 역할
- aside : 문서의 보조 내용(광고, 즐겨찾기, 링크)
- footer : 문서의 꼬릿말(작성자, 저작권, 개인정보보호)
CSS3
CSS3에서 새로 추가된 스타일 속성들은 매우 많으나 간단하게 몇가지만 알아보겠다.
HTML에서 CSS파일을 참조하려면
<head>
<link href="css파일이있는주소/*.css" rel="stylesheet">
</head>css3에 새로 추가된 기능으로는 모서리를 둥글게 만들어주는 radius가 있다.
.round{
margin: 15px; /* 바깥쪽 여백 */
padding: 15px; /* 안쪽 여백 */
border-radius: 0 25px 0 25px; /* 왼쪽상단기준 시계방향 */
box-shadow: 10px -10px 100px skyblue; /* 그림자 효과 */
/* 길이, 방향, 퍼짐정도, 색상 */
transform: rotate(15deg); /* 크롬일 경우 오른쪽으로 15도 기울여라(회전) */
transition : width 2s; /* 전이 발생시 : 점진적으로 폭 2배씩 변경 */
}jQuery는 라이브러리를 가지고 있어야 사용이 가능하다.
$("선택자").함수();반응형
'TIL' 카테고리의 다른 글
| [TIL] 200730 spring boot에서 mongodb 사용하기 (0) | 2020.07.31 |
|---|---|
| 200123 jQuery 기본문법, 함수 (0) | 2020.01.24 |
| 200121 Date(), RegExp, Ajax (0) | 2020.01.21 |
| 200120 DOM, event, object (0) | 2020.01.20 |
| 마크다운 (MarkDown) (0) | 2020.01.18 |