개발자 권군

- HTML 태그 Canvas API로 다양한 그래픽을 그리기 위해 태그를 이용한다. 태그는 width, height 속성을 가지고 있고, 기본값은 width=300px, height=150px로 지정된다. -JavaScript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); getContext() canvas 요소는 getContext() 메서드를 이용해서, 랜더링 컨텍스트와 그리기 함수들을 사용할 수 있다. getContext() 메서드는 렌더링 컨텍스트 타입을 지정하는 하나의 파라메터를 가진다. 2D 그래픽의 경우, 2d로 지정한다. ctx.fillStyle = 'green'; ctx.fill..

♡ 단을 입력받아 구구단 출력 - while문 var i=1;//곱해지는 숫자 var value= prompt("단을 입력하세요");//원하는 단 입력 value=Number(value); while(i prompt( )함수로 단을 입력 받아 while문을 이용해 구구단을 출력 - for문 var value= prompt("단을 입력하세요"); value=Number(value); for(var i=1;i

linear-gradient : 선형 그라디언트 , css로 그라데이션 효과 적용 1. 그라디언트 - 방향 to bottom to top to left to right > bottom, top, left, right 방향 div 만든다. 2. css background: linear-gradient ( direction, color(start), color(end) ); .grad_bottom{background: linear-gradient(to bottom,red,blue);} .grad_top{background: linear-gradient(to top,red,blue);} .grad_left{background: linear-gradient(to left,red,blue);} .grad_righ..

0. 로그인창 옵션 >> 전에 포스팅했던 무신사 로그인 창 옵션 부분을 가상요소를 이용해서 다시 만들어보았습니다. 1. html 회원 가입 아이디 찾기 비밀번호 찾기 > util_menu 클래스를 만들어 옵션 넣어줌. 2. css (전체 코드는 아래에 따로) .util_menu{ width: 450px; height: 50px; background: #f1f1f1 } > .util_menu 가로,세로를 지정하여 만들기 시작 .util_menu>ul>li{ float: left; margin-left: 30px; position: relative; } > li- float: left;를 주어 가로로 배치한다. position: relative; 준 이유- bar를 가상요소로 주었을 때 li를 기준으로 ba..

css 가상요소: 태그 대신에 가상으로 꾸밈을 추가 1. ::after, ::before 이용해서 태그 앞,뒤에 글 추가 front-end h3::before{content: "Hi ";color: rgb(39, 114, 124);font-size: 25px;} h3::after{content: " developer!";color: palevioletred;font-size: 30px;} > content 속성을 이용해 글,문자 등을 추가할 수 있다. 2. 인용부호 사용 html css p::before{content: open-quote;} p::after{content: close-quote;} > 인용부호를 p태그 before, after에 추가 (다음 포스팅: 가상요소를 이용해서 '바'를 추가)

이미지 스프라이트(Image Sprite) : 여러 이미지를 하나의 이미지 파일에 저장 이것을 css를 통해 좌표를 이용해 각각의 이미지로 쓰는 기법 >> 하나의 이미지 파일 안에 4개의 아이콘이 있다. 1. 화살표 방향대로 up,down,right,left 4개의 class 2. css - background 이미지 불러오기 up,.down,.left,.right{background: url(../images/image_sprites.png);} 3. 각각 아이콘마다 크기, 좌표 알아내기 - 그림판에서 이미지 위에 마우스를 움직여 보면 아래에 좌표가 뜬다. - 이 좌표를 보고 가로,세로 크기와 아이콘들의 좌표를 지정한다. 4. css에서 지정하기 .up{width: 21px;height: 20px;ba..

1. form 태그 : 입력 필드 전체를 감싸는 태그 -action : 데이터를 서버로 보낼 때 해당 데이터가 도착할 URL -method: GET,POST방식이 존재함. (아직 잘모른다) 2. label 태그 : input태그로 된 입력창을 설명하는 태그 아이디 비밀번호 -label의 for값과 input의 id 값이 같으면 연결됨. ? 의문 id와 name의 차이는 무엇일까?

input 태그 - 입력창, 버튼 만들 수 있다. 1. 정말 간단한 로그인 폼 만들기 아이디: 비밀번호: 로그인 폼을 간단하게 만들 수 있다. 2. placeholder 속성 아이디: 비밀번호: >> placeholder 속성: 입력 필드에 사용자가 입력할 데이터에 대해 힌트를 줌. 3. reset 속성 입력한 값을 모두 초기화 할 수 있다. 아이디: 비밀번호: 4. value 속성 - input요소의 초깃값 지정(type에 따라 다름) - "text", "password" : 입력 필드의 초깃값을 정의 - "checkbox", "image", "radio" : 해당 입력 필드 선택 시 서버로 제출되는 값을 정의 - "button", "reset", "submit" : 버튼 내의 텍스트 정의 5. max..

1. html 로그인 자동로그인 회원 가입아이디 찾기비밀번호 찾기 2. css *{ margin: 0; padding: 0; box-sizing: border-box; } #wrap{ width: 400px; height: 900px; margin-left: 50px; } #wrap>#login_area{ width: 400px; height: 400px; padding-top: 50px; } #wrap>#login_area>#login_header{ padding-left: 70px; padding-bottom: 50px; } #wrap>#login_area>form{ padding-left: 25px; } #wrap>#login_area>form>input{ width: 330px; height: 5..

1. audio 태그 속성 - controls : 컨트롤러 표시 속성 - autoplay : 자동재생 기능 (크롬에서 자동재생 기능 지원안함. 엣지는 지원함.) > 이렇게 짜도 똑같이 나온다. 2. video 태그 속성 - width, height 지정 가능 type도 지정 가능 (유튜브 영상을 다운로드 하는 법은 따로 포스팅) >> 고기남자 유튜브 영상을 다운받아 곰믹스로 편집해서 넣어줌. 3. embed 태그 -mp3,wmv,swf -영상,음악 모두 가능