본문 바로가기

분류 전체보기307

HTML 부모-자식 구조 , CSS 선택자 HTML 부모 자식 구조 1. 부모 자식 구조의 개념 HTML 요소는 어떤 요소 안에 어떤 요소가 있는가를 파악하는 것이 중요하다. 이런 구조를 부모-자식 구조 또는 트리(tree)구조 라고 한다. 상위에 하위 요소를 감싸고 있는 요소를 부모, 하위에 있는 요소를 자식 이라고 한다. 한 요소를 감싸고 있는 태그가 바뀌면, 그 안에 있는 내용물도 모두 영향을 받는다. ※ 그런데! 부모, 자식 관계는 상대적이어서 부모-자식-손자 이런것 처럼 자식이 다시 부모가 되고 손자가 다시 자식이 될 수 있다. 가족 관계랑 비슷한 느낌! 아래 예시를 살펴보자. 일단 가장 큰 body가 부모라고 보면 login이라는 클래스는 자식이다. 다시 login이라는 클래스를 부모라고 보면 login-title은 자식이 된다. lo.. 2020. 9. 23.
HTML 자주 쓰는 태그(Tag) 정리하기 1. 구역을 나누는 태그 1) div : 2) p : 3) ul 또는 ol 그리고 그 안의 li : 나는 영역을 나누죠. 속성을 주어야 눈에 보이는 모양이 달라져요. 나는 문단이에요. p태그는 위,아래로 여백을 자동으로 줍니다. 자동으로 줄 바꿈이 됩니다. ul은 순서가 없는 리스트를 뜻합니다. 순서를 표시하고 싶다면 ol를 씁니다. li는 리스트 아이템입니다. ul이나 ol모두 li가 들어가야합니다. 2. 구역 내 컨텐츠 1) h1 ~ h6 : 2) hr : h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. 숫자가 커지면 제목 크기가 작아집니다. h3은 h2보다 작습니다. h4은 h3보다 작습니다. h5은 h4보다 작습니.. 2020. 9. 22.
5. 앱인벤터로 동물 소리 앱 만들기(앱인벤터 소리, 스크린추가 기능) 이번 글에서는 앱 인벤터의 이미지, 소리를 이용해서 동물을 설명하는 앱을 만들어보겠습니다. 1. 앱 화면과 기능 구상하기 이번에 만들 앱은 강아지, 고양이에 대해 알아보는 간단한 앱입니다. 강아지 그림이 있고, 설명 듣기를 클릭하면 강아지에 대해 설명하는 목소리와 텍스트가 화면에 나타납니다. 버튼을 클릭하면 동영상이 나오게 할 수도 있죠. 또, 강아지 그림 옆에는 고양이 그림이 있고 설명 듣기를 터치하면 고양이에 대한 설명이 들리고 텍스트가 화면에 나타납니다. 앱의 화면은 아래처럼 만들 예정입니다. 2. 데이터 수집하기 이전에 계산기 만들기와는 다르게 데이터의 수집 단계가 추가되었습니다. 동물 설명 앱에서는 '이미지'와 '소리' 데이터가 필요하기 때문에 무료 이지미와 무료 소리 데이터를 다운받았습니다. .. 2020. 9. 21.
4. 앱인벤터로 계산기 앱(application)만들기! 1. 계산기 앱 화면과 기능 구상하기 이번에 만들 앱은 더하기 빼기 계산기 앱입니다. 앱의 화면은 간단하게만 그려보았습니다. 앱에 필요한 컴포넌트는 아래와 같습니다. 레이블 : 앱 이름 표시 텍스트 상자 : 첫 번째 숫자 텍스트 상자2 : 두 번째 숫자 버튼 2개 : 더하기 버튼, 빼기 버튼 텍스트 상자3: 결과값을 출력 계산기라고 쓰여 있는 것은 '레이블' 이라는 컴포넌트를 드래그 - 앤 - 드롭하여 사용할 것이고 첫 번째 수, 두 번째 수는 '텍스트' 라는 컴포넌트를 가져올 것입니다. 더하기, 빼기는 '버튼' 컴포넌트를 사용하여 버튼을 클릭하면 더하기, 빼기가 되도록 할 것입니다. 마지막 결과 값은 '텍스트 박스' 컴포넌트를 사용합니다. 2. 새로운 프로젝트 만들기 화면 설계가 어느 정도 되었다면 이.. 2020. 9. 17.
JavaScript 기초 : 실전 예제 3. 팰린드롬 3. 팰린드롬(palindrome) 팰린드롬이란 '토마토' '기러기' 처럼 거꾸로 읽어도 똑같은 단어를 말한다. 팰린드롬 여부를 확인할 수 있는 isPalindrome이라는 함수를 작성하는 것이 이번 실전 예제의 목표이다. 이 부분도 파이썬 기초 수업을 들었을 때 풀었던 예제이다. 매우 어렵게 풀었던 기억이 난다. 일단 문자열의 첫 번째 원소와 마지막 원소를 비교해서 일치 여부를 확인한다. 두 번째 요소와 n-1번째 원소를 비교해서 일치 여부를 확인한다. 인덱스로 더 구체화 시켜보자. word의 첫 인덱스 번호는 0이다. word의 끝 인덱스 번호는 word.lenth -1 이다. STEP1. word[0] 와 word[word.lenth -1]비교 word[1] 와 word[word.lenth -2]비.. 2020. 9. 17.
JavaScript 기초 : 실전 예제 2. 거스름돈 구하기! - Math.floor()와 함수 이용 2. 거스름돈 구하기 실전예제 1에서는 for문을 이용해 팩토리얼 값을 구해보았다. JavaScript 기초 : 실전 예제 1. 팩토리얼(factorial) - for 반복문 사용 이번에는 거스름돈을 구해주는 예제를 살펴보자. 이 예제는 파이썬을 공부할 때도 나왔던 예제이다. 일단 사람이 계산하는 것처럼 생각해봐야한다. 100,000원을 냈고 물건 값은 35,000이다. 이 경우 거스름돈은 어떻게 줄 수 있을까? 전체 거스름돈은 100,000 - 35,000 = 65,000원이다. 그 다음 가장 큰 지폐권인 5만원권을 몇 개 줘야하는지 확인해야한다. 65,000 / 50,000 = 1 ... 15,000 이다. 그럼 5만원 권은 1개 주면 된다. 이제 1만원권을 생각해보자. 15,000 / 10,000 .. 2020. 9. 17.
JavaScript 기초 : 실전 예제 1. 팩토리얼(factorial) - for 반복문 사용 1. 팩토리얼(factorial) 팩토리얼의 정의 1부터 어떤 양의 정수 n까지의 정수를 모두 곱한 것을 말한다. 표기법은 n! 자바스크립트 코드로 나타내보자! //팩토리얼 function factorial(n) { let result = 1; for (let i = 1; i = 1; i--) { result = result * i; } return result; } 이렇게 작성하면 기존의 결과와 동일하다! 최초 result 는 1, 최초 i는 n이다. result 값은 1 * n 이다. 이제 result는 1 * n 이고, i는 n-1이다. result 값은 1 * n * (n-1) 이다. 이제 result 는 1 * n * (n -1)이고, i는 n - 1 - 1이다. 이렇게 쭉 i가 1일때까지 계산.. 2020. 9. 17.
JavaScript 기초 : 자료형 업그레이드 7. 변수 선언 var 7. var로 변수 선언 자바스크립트에서 var로 변수를 선언하는 것을 종종본다. 내가 배울 때는 let 그리고 const라고 배웠는데 인터넷을 찾다보면 var가 많이 보인다. var에 대해 정리해보자! 일단 var변수는 let이나 const처럼 똑같이 키워드, 변수 이름으로 선언할 수 있다. 키워드, 변수이름, 할당 연산자, 값으로 선언과 동시에 값을 할당해 줄 수도 있다. var variable; variable = 'Yunju'; //또는 var variable = 'Yunju'; 그럼 var는 왜 사라진 것일까? 첫번째! 중복 선언 허용의 문제점 때문이다. let과 const와는 다르게 var는 중복 선언이 가능하다. 똑같은 이름으로 변수를 한 번 더 선언하게 되면, 기존의 변수를 덮어써 버린다... 2020. 9. 15.
JavaScript 기초 : 자료형 업그레이드 6. const로 변수 선언하기 6. const 프로그래밍을 하다보면 const를 자주 보게 된다. const는 상수를 만들 때 사용한다. 몇몇 스타일 가이드에서는 변수를 선언할 때 let 보다 const 키워드로 선언하는 것을 권장한다. ????왜일까???? const의 가장 큰 특징은 재할당이 불가능하다는 것이다. 이러한 특성 때문에 원래 const는 상수를 만들 때의 키워드로 사용된다. 검색창의 키워드를 입력할 때를 생각해보자. 키워드는 항상 변하기 때문에 변수이다. 하지만 검색 기능이 동작하는 시점에서는 이 키워드는 상수이다. 즉, 코드가 동작하는 순간에는 키워드가 변하지 않는 상수로 사용된다는 이야기이다. 이런 것처럼 코드가 동작하는 순간에는 변수가 아니라 상수로 사용되는 값들이 꽤 많다. 또한 코드에서 변수가 많을 수록 일관.. 2020. 9. 15.
JavaScript 기초 : 자료형 업그레이드 5. 참조형 복사 5. 참조형 복사하기 지난 글에서 확인했던 글처럼 참조형을 복사하면 참조형으로 가는 주소가 복사된다. JavaScript 기초 : 자료형 4. 기본형과 참조형 아래의 예시 코드를 보자. numbers1에 배열을 할당했고 numbers2는 numbers1을 할당했다. 그리고 numbers2의 마지막 값에 4를 추가하였는데 결과는 어떻게 될까? //참조형 복사하기 let numbers1 = [1, 2, 3]; let numbers2 = numbers1; numbers2.push(4); console.log(numbers1); console.log(numbers2); 당연히 numbers1과 numbers2 모두 [ 1, 2, 3, 4] 가 출력된다. 그럼 number2 배열만 4 값을 추가하여 출력하고 싶다.. 2020. 9. 15.

티스토리툴바