css 설정에서 변경해주면 된다. 위와 같이 적용하면 .endlist 에 올라가면 마우스 커서가 포인터로 변한다. Vue.js에서도 HTML처럼 CSS를 적용하면 된다. cursor: pointer; https://www.w3schools.com/cssref/pr_class_cursor.php CSS cursor property W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com
select box에 DB에 있는 값을 꺼내와 보여주고, 선택한 select box 의 값을 DB에 넣어 저장하기. 먼말인지 알쥬...? db 값을 select box 의 옵션으로 가져오기 왼쪽이 DB. DB값을 오른쪽의 셀렉트 박스로 가져오는 방법이다. Controller select box로 이동하는 컨트롤러에서, 가져올 DB값의 전체 검색 service를 실행한다. 나는 include 태그를 이용할거라 body에 담아줬다. @GetMapping("/join") public String joinForm(ModelMap map) { ArrayList list = classservice.getAll(); //전체검색 서비스 실행 map.addAttribute("list",list); map.addAttr..
dotted 테두리가 점으로 이루어진 스타일이다. #d1 {border-style: dotted;} dashed 테두리가 짧은 선으로 이루어진 스타일이다. #d2 {border-style: dashed;} solid 테두리가 두꺼운 선으로 이루어진 스타일이다. #d3 {border-style: solid;} double 두개의 얇은 선으로 이루어진 스타일이다. #d4 {border-style: double;} groove 일반 선으로 이루어진 스타일이다. #d5 {border-style: groove;} ridge 입체감 있는 선으로 이루어진 스타일이다. #d6 {border-style: ridge;} inset 왼쪽과 상단에 음영이 들어간 음각 모양으로 이루어진 스타일이다. #d7 {border-sty..
기본 배경 #b1{ background-color:lavender; } 배경 반복 이미지는 작은 이미지를 넣어야 반복된다. (아래에 이미지 공유) #b2{ background-image:url("../img/star.png") } X축만 반복 #b3{ background-image:url("../img/star.png"); background-repeat: repeat-x; } Y축만 반복 #b4{ background-image:url("../img/star.png"); background-repeat: repeat-y; } 반복 없이 위치 지정 #b5{ background-image:url("../img/star.png"); background-repeat:no-repeat; background-pos..
div div 는 영역을 설정하는 코드이다. 앞서 간략히 설명했던 div 기능에 대해 자세하게 설명해보겠다. [HTML] HTML 기본기능, 영역 설정 줄이 분리된다. 줄이 바뀌며 고유한 본인의 영역이 생긴다. 가나다 라마바 이전 내용의 바로 옆에 출력된다. 앞에 연결이 되어야하기 때문에 스타일이 적용되지 않는다. abc def skylarcoding.tistory.com 1. static div 영역들을 순서대로 배치한다. 2. relative 상대 위치이다. 기준점 (앞요소) 으로부터 위에서. 왼쪽으로 얼만큼 떨어진 위치로 설정한다. #div2{ width:100px; height:100px; background-color:papayawhip; /* top, left : 얼만큼 떨어진 건지 지정 */..
CSS 사용 용도 HTML을 더 편하게 꾸미는 코드. 요소 선택 태그명/id/class CSS 작성법 페이지 전체에 적용 : aaa bbb ccc ddd eee fff ggg hhh 이 모든 것들이 한 파일 안에 들어가 있으면 복잡하니, 코드를 CSS 파일로 저장해 필요할 때마다 import 하는 방법이 있다.
CSS 파일 링크 css 스타일을 파일로 만들어 적용한다. CSS 파일을 생성 mystyle.css 파일을 생성해준다. CSS 파일 생성하면된다. 복잡한 CSS 요소를 파일로 따로 저장해주고 HTML 에서 불러오는 것이다. @charset "UTF-8"; h1 { width: 150px; height: 100px; background-color: yellow; } body { color: blue; } /* id를 할당하고 그에 따라 디자인 채워넣기 */ /* 아이디가 h1_1인 요소 */ #h1_1 { color: red; } /* h1요소 중에서 아이디가 h2_2 인 요소 */ h1#h1_2 { color: green; } /* 태그 종류 상관없이 클래스가 c1인 요소 */ .c1 { backgrou..
폼 사용자가 입력한 데이터를 서버 페이지에 제출 ➡️ 서버 페이지는 전달한 값들을 받아서 처리 폼 양식 폼의 id는 HTML에서 유일한 이름 지어주는 방법이기 때문에 중복되면 안 된다. 타입 submit는 데이터를 전송해준다. 경로를 사진 파일로 변경하면 데이터 전송을 클릭할 때 아래와 같은 결과를 얻을 수 있다. 폼 양식(사진연결) 폼 양식 종류 name 은 해당 데이터의 이름이다. id : pwd : phone : color : date : 각자의 input 은 오른쪽 사진과 같은 결과를 얻어낸다. text 텍스트를 받아온다 password 텍스트를 암호화 처리해 보여준다 number 숫자만 입력할 수 있게 처리해준다. color 색상을 선택할 수 있다. date 날짜를 선택할 수 있다. 체크박스 체..
줄이 분리된다. 줄이 바뀌며 고유한 본인의 영역이 생긴다. 가나다 라마바 이전 내용의 바로 옆에 출력된다. 앞에 연결이 되어야하기 때문에 스타일이 적용되지 않는다. abc def
테이블 테이블은 표를 출력하는 것 외에도 화면의 레이아웃을 만들기 위해 많이 사용한다. 줄 칸 테이블 A B C D E F G H I 테이블에 스타일 넣기 테이블 A B C D E F G H I 칸 합치기 1. 칸 가로로 합치기 colspan = "칸 개수" 2. 칸 세로로 합치기 rawspan = "줄 개수" 칸 가로로 합치기 aaabbbccc dddeeefff 칸 세로로 합치기 aaabbbccc dddeeefff
