목록Front-end (81)
Daily coding
JQuery JavaScript : client(front), web 서버와 관련없음 - 주목적 : 화면의 resource와 값을 설정, 취득하는 부분을 처리 - DOM(getElementById, nodelist) CSS (Cascading Style Sheet) : 디자인. front JQuery : 자주 사용하는 자바 스크립트를 경량화 시킨 것. java script를 통해서 제작함. - Ajax(비동기 통신) - 여기가 p태그 입니다. p tag id demo p tag class cls h3 tag class cls
https://www.w3schools.com/w3js/w3js_html_include.asp
* background : 어트리뷰트를 사용하면 배경이미지를 설정하고 이미지 반복여부 등을 지정할 수 있다 - background-image: url ( '이미지 주소'); ---> 원하는 이미지를 배경으로 세팅 - background-repeat : 배경이미지의 반복여부를 설정 (default : 바둑판식) 1. repeat-x : 가로로만 반복 2. repeat-y : 세로로만 반복 3. none : 반복없음 - background-position : 배경사진의 위치를 지정할 수 있다. (위, 아래, 왼, 오, 가운데 ) top/bottom , right, center, left (2개의 속성을 동시에 지정도 가능 예 - top left ) - background-size : 배경화면의 사이즈를 정할..
background: linear-gradient ( to bottom, #ddeeff, #aabbdd); * to-top : 아래에서 위로 그러데이션 생성 to-left : 오른쪽에서 왼쪽으로 그라데이션 생성 to-right : 왼쪽에서 오른쪽으로 그라데이션 생성 to-bottom : 위에서 아래로 그라데이션 생성 (기본) ** 그라데이션 조합을 만들어주는 사이트 http://www.colinkeany.com/blend/ Blend—Create and customize beautiful CSS3 gradients. Blend—Create and customize beautiful CSS3 gradients. www.colinkeany.com https://uigradients.com/#TalkingTo..
header / main / footer : 화면 구조에서 가장 많이 사용되는 3가지를 태그로 만듦 Insert title here header 영역 main 영역 box1 box2 footer 영역
번호이름나이 1홍길동24 2일지매21 3성춘향17
List의 CSS 설정 중 아이콘에 이미지를 넣는 기능 list-style-image: url ('이미지주소'); list-style-type: 리스트의 마커를 지정할수 있다 ( ul-동그라미, 네모 ... / ol : 숫자, 로만자..등) Coffee Tea Cocoa Apple Pear Banana
a { } : 링크와 관련된 속성 설정할 수 있다 - text-decoration : none ----> 링크의 밑줄 없애기 - color : 글자색, background-color: 배경색 등.. - transition : css 속성의 변화 속도 설정하기 a:link {} : 클릭 전의 링크의 속성 설정하기 a:visited {} : 방문 후의 링크의 상태 설정하기 a:hover {} : 링크에 마우스를 올렸을 때 상태 설정하기 a:active {} : 링크를 클릭 했을 때 상태 설정하기 [종합]"뒷담화 이간질…드레스도 뺏겨" "뒷담화 이간질…드레스도 뺏겨" "뒷담화 이간질…드레스도 뺏겨" Naver 사이트로 이동
obj = document.getElementById("demo"); -----> getElement를 통해 오브젝트를 통째로 받아온다. // css 적용하기 ---> .style 로 어트리뷰트에 접근 obj.style.color= "white"; obj.style.backgroundColor = "blue"; obj.style.textAlign = "center"; obj.style.borderStyle = "double"; obj.style.borderColor ="#00ff00"; obj.style.fontFamliy = "MS PGOTHIC"; obj.style.fontStyle = "italic"; obj.style.fontSize = "24pt"; Hello CSS World..