전체 글 썸네일형 리스트형 [jsavascript] 옵션 선택 시 선택한 옵션 이미지로 변경 html 물감 달 밤 script selectedindex - 선택되어 있는 option의 인덱스를 가져오거나 설정 changeimg가 바뀔때마다(onchange) changeImage 함수 실행 결과 더보기 [HTML+CSS] margin, padding 속성 비교 margin : 요소의 네방향(위아래왼쪽오른쪽) 바깥 여백 영역을 설정하는 요소 margin-top, margin-right, margin-bottom, margin-left padding : 요소의 네방향(위아래왼쪽오른쪽) 안쪽 여백 영역을 설정하는 요소 padding-top, padding-right, padding-bottom, padding-left margin은 요소의 주위에 빈 공간을 추가, padding은 요소의 내부에 빈 공간을 만듬 예제 html text-1 text-2 css 결과 green 색상이 margin 네방향 10px 설정한것, orange 색상이 padding 네방향 10px 설정한 것이다. green 색상은 네방향 10px 씩 바깥여백이 생겨서 그림과 같이 바깥여백이 생긴 .. 더보기 [Javascript] 이미지슬라이드 버튼 만들기 오늘은 버튼을 누르면 이미지가 바뀌는 것을 만들어보았다. 1. html 이전 다음 2. script document.querySelector 말고 document.getElementById를 써도 된다. 근데 document.getElementsByClassName을 쓰면(img태그에도 class로 바꾸고) 안되던데 이유는 공부중이라 아직 모르겠다 (아시는분 댓글 부탁드립니다) 더보기 [Javascript] 이미지 랜덤 슬라이드 오늘은 랜덤 이미지가 자동으로 나가는 이미지 슬라이드를 만들었다. 1. html 2. css 100vh의 vh는 viewport의 높이에 근거한다. 1vh는 viewport의 높이의 1%와 같다. 100vh는 viewport 높이 전체를 의미한다. 100%와 다른점은 100vh를 하면 스크롤이 생기지만 100%는 스크롤이 생기지않는다. justify-content:center 는 수평방향에서 중앙, align-item:center 는 수직방향에서 중앙이다 display:flex를 쓰고 justify-content와 align-item를 쓴다. 3. script document로 아이디가 Slide인 img 태그를 slide 변수로 선언한다. imgArr 는 랜덤으로 사용할 이미지들을 배열에 넣는다. 자동.. 더보기 [Javascript] 체크박스 value 값 계산하기 오늘은 자바스크립트를 이용해 input태그의 체크박스 value 값을 계산하는 프로젝트를 만들었다. 1. html 니트 12000 맨투맨 10000 후드티 15000 2. css table,tr,td{ border:1px solid black; border-collapse: collapse; } value 값으로 계산하는 것만 확인하면 되므로 간단하게 css를 작성하였다. 3. javascript value값을 계산하는 Calculator 함수를 만들었다. 변수 chkbox를 선언하고 id는 price+i로 할 것이기때문에 for문에서 i는 1부터 시작한다. defaultValue는 처음 입력한 value값이다. (total 처음 입력한 value값은 0) if문 만약 체크박스가 체크되면 total(결과.. 더보기 웹디자인기능사 실기 합격 후기 2021년 3회 시험 결과 실기 합격하고 최종적으로 웹디자인기능사 자격증을 취득하였습니다. 코딩프로그램으로 html, css, javascript or jquery을 구현할 수 있어야하고 포토샵을 어느정도 다룰 줄 알아야합니다. 시험장에서 쓸 수 있는 소프트웨어입니다. 저는 브라캣으로 실기 공부를 하여 시험장에서도 브라캣으로 시험 쳤습니다. 유튜브와 기출문제를 토대로 독학하였습니다 1. 유튜브 https://www.youtube.com/watch?v=r2A0HXyjQL0&list=PL4UVBBIc6giIpzhQ4UWVCs64UzLQpdO5B 유튜브 강의는 웹디자인기능사 실기 강의로 유명하신 웹스토리보이님 강의를 보고 실기시험은 어떻게 나오는지, 레이아웃 구조, 네비게이션, 이미지슬라이드, 탭메뉴 등을 배.. 더보기 [javascript] splice()를 활용한 팀 순서 랜덤 정하기 팀 순서 랜덤으로 정하기 1. html 팀 순서 정하기 선택 div는 테두리를 위해 만든것. 2. script groupList 배열을 만들어 Math.random 함수를 이용해 랜덤으로 나온 값을 num에 넣음 그리고 innerHTML로 i번째에 있는 li에 groupList 배열의 num(랜덤)번째 인덱스를 출력한 뒤 splice 함수를 사용 splice(2,1)이면 2번째 요소를 하나 삭제하는 것이기 때문에 2번째 요소인 3조를 삭제함 그러면 남은 조는 1,2,4조이며 중복 없이 랜덤으로 할 수 있다. 결과 더보기 [Github] 깃허브 잔디 안 심어지는 오류 해결 방법(이메일 동일 시) 분명 커밋을 했는데 잔디가 안심어진다. 그래서 레파지토리를 삭제하고 다시 생성했더니 진한초록잔디가 심어져서 해결했다 싶었는데 이틀동안 잔디가 또 안심어지는 현상이 발생했다. 구글 검색을 하니 이메일이 달라서 그렇다는데 난 이메일이 동일하다. 그래서 찾은 방법 Settings 에 들어가서 Branch 메뉴에 들어갔더니 branch가 main으로 되어있었다. 오른쪽 화살표 버튼을 눌러 branch를 main 에서 master로 바꾸어 Update 해주었다. 그 결과 잔디가 다시 심어졌다!! 그전에 했던 커밋들도 잔디가 심어져있다. 더보기 이전 1 2 다음
