letsgoddud

안녕하세요! 오늘은 대표적인 내장 객체 문자(string), 배열(array), 수학(math) 객체를 이용하여 예제 문제를 풀어보도록 하겠습니다. 내장 객체(Built - in Object)란? 브라우저의 자바스크립트 엔진에 내장된 객체를 말합니다. 예제1 점심식사 메뉴 랜덤으로 정하기 코드 작성 순서 1. 변수 안에 배열 객체를 이용하여 메뉴 넣기 2. 수학 객체를 사용하여 랜덤으로 배열 인덱스 값 나타나게 하기 3. 브라우저 화면에 결과 나타내기 1. 변수 안에 배열 객체를 이용하여 메뉴 넣기 var menu 안에 메뉴를 배열 객체로 나열합니다. var 참조 변수 = [값1, 값2, 값3, ... 값n] 2. 수학 객체를 사용하여 랜덤으로 배열 인덱스 값 나타나게 하기 var menuNum = Ma..

안녕하세요! 오늘은 자바스크립트 제어문에서 중첩 else if문, 중첩 for문을 이용한 예제 2문제를 풀어보도록 하겠습니다. 예제1 회원가입 문구 만들기 코드 작성 순서 1. 변수에 id와 pw값 저장하기 2. prompt() 메소드로 아이디, 비밀번호 값 받기 3. 바깥쪽 조건문(조건문1)에 아이디 값이 일치한지 확인하기 4. 안쪽 조건문(조건문2)에 비밀번호 값이 일치한지 확인하기 5. 화면에 결과 나타내기 1. 변수에 id와 pw값 저장하기 var id와 var pw에 각각 아이디와 비밀번호를 저장해 줍니다. 저장한 아이디와 비밀번호가 같아야만 조건이 실행됩니다. 2. prompt() 메소드로 아이디, 비밀번호 값 받기 prompt() 메소드를 통해 아이디와 비밀번호 값을 받고, user_id, ..

안녕하세요! 오늘은 자바스크립트의 연산자, 변수 등을 사용한 간단한 프로그램 만들기 예제 2가지를 풀어보겠습니다. 예제 1 적정 체중을 구하는 테스트기 만들기 *적정 체중 계산법 적정 체중 = (신장 - 100) * 0.9 코드 작성 순서 1. prompt() 메서드로 이름, 신장, 몸무게와 같은 필요 정보 입력값 받고 변수 지정하기 2. 적정 체중 계산법을 사용하여 적정 체중인지 아닌지 구하기 (오차범위 ±5) 3. 삼항 조건 연산자를 사용하여 화면에 나타내기 1. prompt() 메서드로 이름, 신장, 몸무게와 같은 필요 정보 입력값 받고 변수 지정하기 var name, var height, var weight를 통해 각각의 이름, 신장, 몸무게와 같은 필요 정보를 prompt() 메소드를 통해 받습..

안녕하세요! 오늘은 접두어 webkit를 사용하여 그라디언트 텍스트를 만들어보겠습니다. IE에서 지원하지 않는 속성이니 참고해주세요! 1. HTML, CSS setting h1 태그에 맘에 드는 문장의 텍스트를 넣어주었습니다. 또한, CSS에 원하는 폰트를 import하고 지정해주었으며, body를 가운데 배치해주었습니다. 2. 텍스트에 그라디언트 주기 이제 이 상태에서 텍스트에 그라디언트를 주도록 하겠습니다. background에 linear-gradient 색상을 지정해 준다면 이렇게 나타납니다. 저희는 배경이 아닌 텍스트에 그라디언트를 주기를 원하죠! 텍스트에만 그라디언트를 주기 위해서는 접두어 webkit가 필요로 합니다. 3. 접두사 webkit 속성 주기 -webkit-background-cl..

안녕하세요! 오늘은 CSS에서 변수 var()를 사용해 보도록 하겠습니다. CSS에 변수 var()를 사용하는 이유? CSS에서 변수 var()를 지정하면 각각의 선택자에 공통된 CSS를 주고싶을 때 선택자 하나하나 별도로 속성과 값을 지정해주지 않고, 미리 지정해 둔 변수를 넣어 한번에 선택자를 관리할 수 있어 편리합니다. 1. HTML setting html에 4개의 버튼을 만들고 class명을 지정해 주었습니다. 2. 변수 지정 CSS에 변수 지정 방법 1. :root 선택자 만들기 :root 안에 변수를 넣어줍니다. 수정에 용이하도록 최상단에 배치합니다. 2. --변수명 변수 이름을 지정할 때는 ' --변수명 ' 형태로 지정합니다. 변수명은 최대한 직관적으로 알아보기 쉽게 정해줍니다. 2. 각 선..

안녕하세요! 오늘은 jquery를 사용하여 별점 주기 프로그램을 만들어보겠습니다. 결과물 결과물 설명 : 왼쪽의 별점을 클릭하면 별점의 갯수에 따라 오른쪽의 텍스트 및 아이콘이 변화하는 효과를 주기 위해 addClass, removeClass 이벤트를 주었으며, index() 함수로 별점 카운팅 갯수를 변수 안에 넣어 if, else if 조건문으로 script 안에 html을 추가하여 아이콘 img가 나타나도록 하였습니다. jquery CDN을 head 태그 안에 미리 링크해놨으며, 별 아이콘은 폰트어썸의 i태그를 가져왔습니다. 폰트어썸 CDN과 구글 웹폰트 CDN을 임포트 했으며, 콘텐츠를 정중앙 배치 시켰습니다. 콘텐츠를 담고있는 .star..

안녕하세요! 오늘은 간단한 로그인 UI 화면을 만들어보겠습니다. 결과물 결과물 설명 : form 요소를 사용하여 간단한 로그인 UI 화면을 만들어보았습니다. 특히 CSS3에서 새롭게 추가된 ::placeholder 가상클래스를 사용하여 placeholder에 focus 시 opacity를 주어 편리한 UI 디자인 작업을 진행했습니다. form 태그 안에 input, label, button태그 등을 넣었습니다. 전체적으로 콘텐츠를 가운데 정렬하고 기본 color를 #222를 주었습니다. 콘텐츠를 담고있는 form 태그에 width, border, box-shadow 등을 넣어 UI 디자인을 작업했으며, span 태그에는 display : bloc..

안녕하세요! 오늘은 fontawesome과 before 가상선택자로 체크박스 디자인을 해보겠습니다. 결과물 결과물 설명 : input type 체크박스 속성에 fontawesome과 before 가상 선택자로 디자인 작업을 하고, 클릭 시 좀 더 인터렉티브한 효과를 주기 위해 active 가상선택자를 이용하였습니다. form 요소 안에 input과 label 태그를 넣었습니다. 체크박스 뿐만 아니라 label의 텍스트를 클릭해도 체크박스가 선택이 되도록 input id와 label for 이름을 동일하게 주어 페어링 시켰습니다. 웹폰트와 fontawsome 4.7 CDN을 import했습니다. 속성 선택자를 사용하여 체크박스를 displa..

안녕하세요! 오늘은 css만으로 tab버튼 slide형태 만드는 것을 해보겠습니다. 결과물 결과물 설명 : 온라인 쇼핑몰 웹사이트에서 흔히 볼 수 있는 슬라이드 형태의 tab메뉴 입니다. input, label 속성과 인접선택자로 탭 메뉴를 구현하였고, 옆으로 넘어가는 슬라이드 형태가 아닌 opacity를 조절하여 fade효과를 주었습니다. 또한 상단의 badge는 transition-delay를 주어 제품의 주목성이 더 높아지게 만들었습니다. 상단의 badge는 슬라이드 형태를 완성한 후 나중에 html과 css를 추가하였습니다. 전체적으로 기본적인 폰트 속성을 정하고, 콘텐츠의 위치를 정중앙에 배치했습니다. .tab inner => 콘텐츠의 전체적인 크기를 지정하고..

안녕하세요! 오늘은 좀 생소한 data속성을 사용하여 보다 더 깔끔한 html 구조로 다음 사이트 네비게이션을 만들어 보겠습니다! 결과물 결과물 설명 : 다음 웹사이트의 gnb를 리디자인 한 네비게이션 컨텐츠 박스로, hover 시 폰트 색상이 변화하면서 before, after 가상 선택자를 사용하여 글자가 위로 올라가는 듯한 효과를 주어 좀 더 액티브하게 만들어봤습니다. "카페", "메일" 등을 텍스트로 기재하는 것이 아니라 a 태그 안의 data 속성에 넣었습니다. data 속성 사용법 html css a:before { content : attr(data-사용자 정의 이름); } body의 background에 원하는 색상을 넣어주고, display : flex..