![]()
[1. jsfiddle 사이트 접속 확인] https://jsfiddle.net/Ac6CT/ Edit fiddle - JSFiddle - Code Playground jsfiddle.net 브라우저 버전에 맞는 Script 실행 되어 알 수 있음 현재 나는 Java Script 1.5를 사용하고 있는 상태. [2. VSC - HTML 파일 실행 확인] 1. VSC 실행 2. HTML 파일 생성 (jsVerCheck.html) 3. 아래 코드 입력 후 실행 마찬가지로 1.5 버전을 사용하고 있는 것을 확인할 수 있다. [출처] 더보기 https://asrada2001.tistory.com/entry/Javascript-%EB%B2%84%EC%A0%84-%ED%99%95%EC%9D%B8%ED%95%98%EA..
[상황] orderList.jsp 내 아래의 java script 파일들을 불러와서 실행, 1) orderList.js 2) orderList_goDetail.js orderList.js만 실행되고 orderList_goDetail.js는 실행되지 않음 [파일 분석] 1. orderList.jsp java script 두 개를 head 부분에 불러왔다. 2. orderList.js window.onload = function () { // q&a 바로가기 연결 const goQna = document.getElementById("goQna"); const goFaq = document.getElementById("goFaq"); // 계좌번호 복사하기 버튼 불러오기 후 변수에 담기 const copyBt..
1. 줌인 #boss_thanks { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; } #boss_thanks:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } 2. 줌아웃 #boss_thanks { -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; } #boss_thanks:hover { -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transitio..
![]()
[상황]1. (자바 스크립트) 기능 구현 목표결제 방법 버튼 3개 (카드, 계좌이체, 카카오페이) 중 카드 버튼 클릭 시,클릭 된 버튼 : 테두리 없앰, 배경 색상 '파란색', 글자 색상 '흰색'클릭 되지 않은 버튼 : 기존 디자인 유지 카카오페이, 계좌이체 버튼 위와 동일 [1차 기능 구현 완료]1. 메서드 구현// 결제 방법 '버튼' 클릭 시, 클린 된 버튼의 색상 변경function changeBtnColor(id) { var paymentBtns = document.getElementById(id); paymentBtns.style.border = "none"; paymentBtns.style.backgroundColor = "#0185FE"; paymentBtns.style..
![]()
태그를 이용해 CONTACT 영역과 footer 영역을 선을 그어 나눴는데 hr 선의 색상을 변경하고 싶다 ! 짙은 회색 말고 조금 연한 회색인 light gray로 바꾸고 싶은데 이해도를 높이기 위해서 red로 변경해보겠다. hr{ background: red; } 근데 여전히 회색임 왜지? 싶어서 찾아봄 background의 색상을 변경해야 하며, 추가로 height에 값을 부여해야 한다. hr{ background: red; height: 1px; } 빨간색은 잘 반영이 되었는데 자세히 보면 border값이 1 부여된 상태라 얄쌍한 선의 느낌이 나지 않는다. 좀 더 얄쌍한 선을 원한다면 border 값을 0px로 주면 된다. 그럼 이제 이 녀석을 light gray로 바꿔보겠다. 쫘좐
![]()
흠 밋밋하다 밍숭맹숭 민둥맨둥 버튼에 그림자 효과를 주고 싶다 ! box-shadow: 0px 0px 0px darkgray; 그림자는 box-shadow 속성과 값을 입력하면 된다. box-shadow: 3px 0px 0px darkgray; 첫번째는 우측 box-shadow: 0px 3px 0px darkgray; 두번째는 아래 box-shadow: 0px 0px 10px darkgray; 세번째는 스머징 그 외에도 다양한 box-shadow 효과를 줄 수 있다. https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow box-shadow - CSS: Cascading Style Sheets | MDN box-shadow CSS 속성은 요소의 테두리를 감싼..
![]()
초록색 영역이 padding : 30px 인데 왼쪽만 padding 값을 0px로 바꾸고 싶다. padding : 30px; 이건 상하좌우 모두 동일하게 30px padding : 30px 0px 이건 상하 30px, 좌우 0px .. 왼쪽만 따로 값을 줄 수 있는 방법은...... padding-top : 30px; padding-bottom : 30px; padding-right : 30px; padding-left : 0px; 너무 불필요하고 별로다. 좀 더 생산적인 방법이 분명 있을 것 같은데 하고 찾아봄 일단 padding 또는 margin 값 입력 순서에 대해서 알아봐야한다. padding : 30px; 상하좌우 모두 30px padding : 30px 0px; 상하 30px, 좌우 0px p..
![]()
저 공백 ..! 저 애매하게 위치한 공백 !!!!! 저 매우 애매한 보라색 공백 ..!!!! 뭐지 !!!! 뭐 때문이지 !!!!! 어떻게 없앨 수 있지 !!!!!!!!!!! 곰곰이 생각해보니 부모 요소에 display : flex;를 해놓고 정작 자식 요소에 flex 의 할당값을 주지 않았다. 데헷콩 😉 CONTACT Addr. 경기도 성남시 분당구 판교역로 123-45 SH FILM Tel. 070-7777-7777 Fax. 070-8888-8888 E-mail. sh_support@sh_film.co.kr CONTACT yellow 박스 영역이 .contact_logo skyblue 박스 영역이 .contact_txt .contact_logo { flex: 3; line-height: 100px; t..
![]()
노란색 SH 로고가 상당히 윗부분에 자리잡고 있다. 킹받는다. 이 로고를 가운데로 위치시키고 싶다. [수정 전 해결법] 다음은 contact 영역의 html 코드이다. CONTACT Addr. 경기도 성남시 분당구 판교역로 123-45 SH FILM Tel. 070-7777-7777 Fax. 070-8888-8888 E-mail. sh_support@sh_film.co.kr CONTACT 대기업인 것 마냥 주소 판교로 해놓기 참고로 addr, tel, fax, e-mail 모두 가상의 정보들이다. 여기서 .contact_logo 부분이 내가 수직 가운데로 정렬하고 싶은 이미지가 포함되어 있는 클래스이다. .contact_logo 의 css 영역에 line-height 코드를 포함시켜준다. 왜냐하면 나는 ..
![]()
두 문단은 전혀 다른 내용의 news이다. 그래서 두 문단을 구별해주는 선을 추가하고 싶은데 border-right의 선이랑 텍스트랑 너무 딱 붙어 있는게 꼴뵈기가 싫다. 이 둘 사이에 공백을 추가하고 싶다. 나는 일단 노란색 색상의 content 오른쪽에 border-right : 1px solid gray; 를 넣어주었음 (border-right는 1px로 설정할 예정이나, 이해를 돕기 위해 3px로 설정하였다.) 노란색 영역은 이다. 따라서 해당 class의 css 부분에 padding 값을 채워주면 된다. 나는 오른쪽만 공백을 주고 싶은 것이므로 padding-right의 값을 주겠다. .news_content_1{ display: table-cell; background-color: yellow..
![]()
보이능가 yellow box 영역 안 텍스트들이 살짝 위로 올라가 있는 저 킹받는 상황이 수직으로 가운데 위치하도록 만들고 싶다 !! html 그렇다면 .news_content_1의 css 부분에 vertical-align: middle; 해당 코드를 삽입해주면 된다. css .news_content_1{ display: table-cell; background-color: yellow; vertical-align: middle; } 두구두구둥 쫘좐
![]()
육안으로는 두 문단의 news 너비가 같아 보일 수 있겠지만 실제로 두 문간의 너비는 약간의 차이가 있다. crome browser 너비가 좌우 margin 30px 포함해서 총 733px을 기준으로 했을 때, background-color : yellow; 인 .news_content_1은 width : 319.203px이고 background-color : skyblue; 인 .news_content_2는 width : 353.797px이다. 병렬로 연결된 이 두 문단의 width 값은 34.594px 차이가 난다. 난 이 두 문단의 너비값을 동일하게 만들고 싶다 ! 브라우저 창을 늘리고 줄였을 때도 너비가 동일한 값으로 서로 자동으로 조정되게 만들고 싶다. 그래서 width값을 콕 찝어 몇 px로 ..
