김종현의 개발자 일기 김종현의 개발자 일기

Javascript 표준 객체 - 기본적으로 가지고 있는 객체 - 프로그래밍을 하는데 기본적으로 필요한 도구들 - string, Number, Array, Date, Math, 등등 이번 시간엔 Date객체와 Math 객체를 살펴보는 시간이었다. Date 객체 : 매 순간 바뀌는 시간과 날짜에 관한 정보를 얻기 위해 사용하는 객체 Date.now(); : 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리초를 반환 Date.prototype getter 메소드 date.getFullYear() : 주어진 날짜의 현지 시간 기준 연도를 반환 date.getDate() : 주어진 날짜의 현시 시간 기준 요일을 반환(숫자로 반환하는데 일요일은 0) date.getDay() : 주어진 날짜의 현지 시..

문자열 관련 메소드 let str = " Happy day~!"; - console.log(" : ", str.()); -> 1. 문자열 길이 확인 : 공백을 포함한 길이를 확인하는 것 - console.log("lenght : ", str.lenght); 입력하면 콘솔에 12가 나온다(공백 포함이라 H앞 공백까지 포함) 2. (영어) 문자열을 모두 대문자/소문자로 바꾸기 - 대문자 : console.log("toUpperCase : ", str.toUpperCase); - 소문자 : console.log("toLowerCase : ", str.toLowerCase); 3. index 가져오기 : 매개변수로 문자열을 받아서 몇 번째 인덱스인지 숫자 반환 - console.log("indexOf : ", ..

HTML, CSS에 이어 Javascript를 배우는 시간이다. Javascript : 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어라고 한다. >> 쉽게 말하면 HTML, CSS까지 구현이 되었다면, 그 이후 동적기능이라던지 동적처리, 이벤트 처리, 슬라이드 메뉴 등등을 넣는 언어라고 보면 된다. Javascript 사용법 Javascript 사용하기 ∙ console.log() : 브라우저의 개발자 도구 > 콘솔에서 확인 가능 ∙ alert() : 브라우저가 열렸을 때, 그 내용을 알림 창으로 보여줌 크게 내장방식, 링크방식이 있다. ∙ 내장방식 : 위에서 말한 대로 HTML 파일 안에서 / 이것 위치 또한 어디서나 사용 가능 변수 - 데이터를 저장하고 사용하..

css 마지막 시간이었다.(비교적 오늘 교육은 쉬운 편인 거 같았다.) 전환(transform) - 2D 변환 함수와 3D 변환 함수가 있는데 크게 적고 넘어갈 만큼 어렵지 않은 내용이었다. transition : 요소의 전환(시작과 끝)효과를 지정하는 단축속성 - transition-property : 전환 효과를 사용할 속성 이름을 지정 - transition-duration : 전환 효과의 지속시간을 지정(시간 ~~s 넣으면 됨) - transititon-delay : 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정 - tramsition-timing-function : 전환 효과의 타이밍 함수를 지정 animation @keyframes - css의 애니메이션 효과를 개발자가 직접 정할 수 있는..

CSS 3일 차 수업이다. position static : 정적 위치 지정 방식 relative : 요소 자신을 기준으로 배치 aboslute : 위치상 부모 요소를 기준으로 배치(부모가 relative 여야 하지만, 부모의 부모의 부모의∙∙∙ 반복하여 relative가 없으면 뷰포트가 기준이 된다.) fixed : 뷰포트(브라우저)를 기준으로 배치 요소 쌓임 요소 : 어떤 요소가 사용자와 더 가깝게 있는(즉, 위에 쌓이는지) 결정 1. 요소에 position 속성 값이 있는 경우 위에 쌓임(기본값인 static은 제외) 2. 1번과 같은 경우, z-index 속성의 숫자 값이 높을수록 위에 쌓임 3. 1,2번 까지 같은 경우 HTML의 다음 구조일수록 위에 쌓임 position의 속성 값으로 absol..

CSS를 배우는 두 번째 날이다. CSS의 속성 1. FONT - font-weight : 글씨 두께(기본 400) - font-size : 기본 크기(기본 16px) - line-height : 글 정렬할 때() - font-family : 글꼴을 정할 때(보통 구글폰트나, 눈누 폰트 들어가서 사용) 구글 폰트 가져오는 방법 1) 구글 폰트 접속(https://fonts.google.com/) 2) 원하는 폰트 선택(예를 들어 Bagel Fat One) 3) 오른쪽 상단에 해당 표시 클릭 4) link 선택 후 바로 아래 있는 링크 복사하여 태그 한에 붙여 넣기. 5) "CSS rules to spceify families" 아래 있는 링크 복사하여 태그 안에 원하는 클래스 속성 값 넣고 {} 사이에 ..

어제는 HTML, 웹 페이지의 뼈대에 대해 배웠다면, 오늘 배운 CSS는 그 뼈대에 살을 붙이는 즉, 디자인을 하기 위한 언어라고 보면 된다. 예시로 네이버 홈페이지에 어떤 코드들이 들어있는지 확인하려면, 1) 네이버 홈페이지(https://www.naver.com/)를 들어간 후 2) 홈페이지 여백에 우클릭 후 검사버튼 클릭을 하면 이런 식으로 나온다(솔직히 이 수업 배우기 전에는 잘못 누르면 나오는 화면이었는데 저게 저런 용도였을지는.... elements에는 해당 페이지가 어떻게 코딩되어 있는지 확인해 볼 수 있기에 좋은 기능인 거 같다. CSS의 참조 방식에는 1) 인라인방식 - 태그 각각 스타일을 적어줘야 함(겹쳤을 때 이것이 가장 우선순위) 2) 내장 style - 태그 내부에 사용할 styl..

HTML에 대해 배우는 시간이었다. 크게 HTML, CSS, JavaScript가 있는데 HTML은 프로그래밍에 있어서 큰 골격과 같은 역할을 한다. HTML을 배우면서 가장 많이 느낀 부분은 바로 태그를 이해하는 것이다. 여기에 필요한 내용 넣기 기본적으로(나는 아직 미숙하기 때문에 배운 모든 태그를 정리를 하는 것이 도움이 될 듯하다.) , 등등이 있는데 태그는 우리가 실제로 보이는 부분이 태그 안에 들어간다고 보면 된다. ~: 제목태그(숫자에 따라 글씨 크기가 달라짐) : 보통 제목 아래 내용을 적기 위한 태그 : 줄 바꿈, : 수평으로 된 줄 그어줌 : 순서가 있는 목록, : 순서가 없는 목록 문자 꾸미기 관련된 태그 : 두껍게 : 두껍게 + semanit 한 느낌(이라고 하는데 사실 바로 위에 ..