자바스크립트 if문을 이용한 학점 계산기 만들기

자바스크립트에서 if문을 이용하여 학점을 출력하는 코드입니다. input 텍스트 창에 점수를 입력하면, 아래의 div 패널에 각 점수에 맞는 A,B,C 학점이 출력됩니다. 입력 function score(){ const inputScore = document.querySelector('.score'), result = document.querySelector('.result'); const score = inputScore.value; if(score > 90){ result.innerHTML = 'A학점 입니다.'; }else if(score > 80){ result.innerHTML = 'B학점 입니다.'; }else if(score > 70){ result.innerHTML = 'C학점 입니다.';..

• format_list_bulleted Develop/JavaScript
• · 2019. 3. 20.
• textsms

자바스크립트 | if문 if~else문

조건문 if문과 if~else문 if문 문법 if ( 조건문 ){ 실행문; } 조건문이 참이면, 실행문을 실행하고 거짓이면, 실행문을 실행 시키지 않습니다. var i = 20; if( i > 10){ console.log('10보다 큰 수 입니다.'); } if~else문 문법 if ( 조건문 ){ 실행문1; }else { 실행문2; } 조건문이 참이면 실행문1을 실행하고 거짓이면, else { } 안에 있는 실행문 2를 실행 시킵니다. var i = 5; if( i > 10){ console.log('10보다 큰 수 입니다.'); }else{ console.log('10보다 작은 수 입니다.); } if~else if문 if ( 조건문 ){ 실행문1; }else if( 조건문2 ) { 실행문2; } ..

• format_list_bulleted Develop/JavaScript
• · 2019. 3. 19.
• textsms

CSS - 가운데 정렬 하는 방법

1. flex 이용하여 가운데 정렬 display: flex 설정 justify-content: center 설정 내부 엘리먼트 크기가 바깥 엘리먼트 크기보다 작아야합니다. .box3 { display: flex; justify-content: center; border: 1px solid black; } .box3 span { text-align: center; width: 50%; } 예시 HTML 삽입 미리보기할 수 없는 소스 2. div 엘리먼트 가운데 정렬하기 margin: auto 사용하기 Hello 예시 HTML 삽입 미리보기할 수 없는 소스 3. 글자 가운데 정렬하기 text-align: center 사용 Hello 예시 HTML 삽입 미리보기할 수 없는 소스

• format_list_bulleted Develop/CSS
• · 2019. 3. 18.
• textsms

로이스 딸기 치즈 마카롱 후기

화이트데이 선물로 로이스 딸기 치즈 마카롱을 받았어요😆 해외직구 상품이라 통관고유번호가 필요하더라구요 중간에 개인정보오류 때문에 통관이 잠깐 지연되었는대 다행히 관세사 담당자 분과 연락해서 무사히 받았을 수 있었답니다🤣 처음에 남자친구가 두가지 제품의 마카롱을 보여주면서 선택하라고 하더라구요 그래서 제가 로이스 마카롱을 선택한이유는❗️ 로이스초콜릿 때문이였어요 일본 면세점에서 맛본 로이스 초콜릿은 어떤 맛이든 다 맛있더라구요 그래서 로이스 마카롱도 맛있을거란 생각으로 선택하게 되었습니다 토요일 오전에 택배가 도착해서 열어보니 예쁜 상자에 개별포장으로 9개가 담겨있었어요~ 가장먼저 눈에 띄인 것은 일본에서 날라온 신문지였어요🤣일본어가 빼곡히 적혀있었습니다ㅎㅎ 우선 하나만 뜯어서 맛을보았는대 자주 마카롱을 ..

• format_list_bulleted 일상
• · 2019. 3. 17.
• textsms

자바스크립트 - closest() 엘리먼트에 가장 가까운 조상 찾기

closest(position, text) 현재 엘리멘트에서 가장 가까운 조상을 반환합니다. 만약 조상이 없다면 null값을 반환 합니다. 문법 const closestElement = element.closest(selectors); 파라미터 매개변수 (selector) : 찾고 싶은 조상의 CSS 선택자를 입력 하면 됩니다. ex) '.className' '#id' 등 결과값 가장 가까운 조상의 Element를 반환 없다면 null 예시 const me = document.querySelector('.me'); const hi = me.closest('.hi'); const hello = me.closest('#hello'); console.log(hi); console.log(hello); 선택자 ..

• format_list_bulleted Develop/JavaScript
• · 2019. 3. 15.
• textsms

자바스크립트 - insertAdjacentElement() 엘리먼트에서 특정 위치에 노드 삽입

insertAdjacentElement(position, text) 특정 위치에 노드를 추가합니다. 매개변수 position 4가지가 들어갈 수 있습니다 beforebegin element 앞에 afterbegin element 안에 가장 첫번째 child beforeend element 안에 가장 마지막 child afterend element 뒤에 ※ afterbegin / beforeend는 꼭 부모가 있어야 합니다. text 삽입하고 싶은 노드 or xml 문법 element.insertAdjacentElement(position, newElement); 예시 title ​ let title = document.querySelector('.abc'); let beforebegin = documen..

• format_list_bulleted Develop/JavaScript
• · 2019. 3. 15.
• textsms

자바스크립트 - insertBefore() 특정 위치에 앞에 노드 삽입

insertBefore() 부모노드의 기준 점 노드 앞에 삽입 할 노드를 삽입합니다. 내가 원하는 위치에 삽입 할 수 있습니다. 문법 부모노드.insertBefore(삽입 할 노드, 기준 점 노드); 기존 부모 노드에서도 굳이 삭제 할 필요 없이 자동으로 이동하게 됩니다. ex) 부모노드 1번에 위치하고 있을 때, 3번으로 옮기고 싶을 때 삭제하고 옮기지 않아도 됩니다. 노드는 자동적으로 기존 노드에서 삭제되고, 새로운 부모 밑에 삽입됩니다 기준 점 노드를 null로 하게 되면, 자식 노드의 끝에 삽입 됩니다. 반환값 삽입 된 노드 예시 + button button button button const ele = document.querySelector('.newEle'); const parent = do..

• format_list_bulleted Develop/JavaScript
• · 2019. 3. 15.
• textsms

CSS - display 화면에 어떻게 보여질 것 인가를 정해주는 속성

display 화면에 어떻게 보여질 것인가를 정해주는 속성 none 영역이 잡히지 않음 inline 한 줄로 영역이 잡힘 태그처럼 단, 가로/세로 길이가 조정이 안됨 block 세로로 영역이 잡힘 태그처럼 inline-block 한줄로 영역이 잡히고 가로/세로 길이가 조정이 가능함 Superman Batman Pororo display: inline; li { display:inline; border : 1px solid; width:200px; // 적용안됨 } display: block; li { display:block; border : 1px solid; width:200px; } display: inline-block; li { display:inline-block; border : 1px so..

• format_list_bulleted Develop/CSS
• · 2018. 12. 10.
• textsms

CSS - box-sizing element의 크기에 padding, border 포함할 것인지 선택하는 속성

box-sizing 요소의 가로와 높이 길이에 패딩과 보더의 길이를 포함시킬 것인지 안 시킬 것인지 구분하는 속성입니다. content-box border와 패딩은 포함시키지 않고 내용만 포함 border-box width와 height의 길이를 내용, padding, border 포함시킨다. content-box border의 길이가 포함되지 않았다. border-box 가로 세로의 길이에 border 길이가 포함 .a{ border: 15px solid; width:300px; height:200px; box-sizing:content-box; } .b{ border: 15px solid; width:300px; height:200px; box-sizing:border-box; }

• format_list_bulleted Develop/CSS
• · 2018. 12. 10.
• textsms

자바스크립트 - innerHTML, removeChild, replaceChild

엘리멘트 내부를 변경할 수 있는 자바스크립트 속성 또는 메서드 입니다. Element.innerHTML 메서드가 아니라 속성 값을 넣을 수 도있고 반환을 받을 수도 있는 속성 활용도가 높다. element.innerHTML = 'Hello JavaScript';​ ※ 주의사항 innerHTML을 통해 내용을 삽입하면 document 객체가 이미 완성된 상태이기 때문에 삽입된 즉시 브라우저 해석에 들어간다 문장을 따로 따로 넣으면 안됨 명령어를 많이 이행하는 만큼 성능에도 좋지 않다. 명령을 최소화 하는 방법으로 바꿔야 한다. 안좋은 예 ❌ element.innerHTML += "Hello"; element.innerHTML += "world"; 바른 예 ⭕ var content = "Hello"; con..

• format_list_bulleted Develop/JavaScript
• · 2018. 12. 8.
• textsms