나의 성장 개발일지

이번 포스팅 주제 다양한 Method Method를 이용한 실습 메서드(method) 혹은 메소드라 불리는 이것은 어떤 객체가 가지고 있는 어떤 동작을 의미한다. 자바스크립트(JavaScript)에서 일반적으로 객체 안에 프로퍼티로 정의된 함수를 메서드라고 부른다. 메서드를 수행하기 위해서는 객체를 통해서 해당 메서드를 수행해야 합니다. 동작을 수행하는 주체는 객체이고 그 객체에게 동작을 수행하라고 지시하는 방식이 메소드입니다. 문자열 관련 메서드 length : 메소드가 아닌 속성으로 문자열의 길이를 반환(공백포함) toUpperCase() & toLowerCase() : 문자열 전체를 대문자, 혹은 소문자로 변경 indexOf('') : 매개변수로 문자열을 받아서 몇번째 인덱스인지 숫자 반환 slic..

이번 포스팅의 주제 JavaScript 조건문 JavaScript 반복문 이번 주제를 진행하기 전에, 이 전 포스팅에서 배운 함수에 대한 실습과 Onclick에 대해 배우고 진행 하겠습니다. 함수 실습1 매개 변수 두 개를 받아 합을 반환 하는 함수 함수 실습 2 매개 변수 하나를 받아서 제곱해서 화면에 보여주는 함수 다음은 onclick에 대해 알아보겠다. onclick은 객체를 클릭했을 때 나타나는 이벤트 요소로 각각의 HTML 요소에 속성 값으러 JS 함수를 연결하여 사용한다. Script태그 안에 동작할 함수들을 미리 만든다. 입력 값은 prompt로 받고 각 함수에 전달한다. onclick요소는 Body안에 있는 태그들에게 onclick="함수()"로 사용 JavaScript 조건문 JavaSc..

이번 포스팅 주제 Javascript Javascript 기초 표기법과 변수 Javascript 자료형 Javascript 연산자 및 함수 Javscript JavaScript : 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어 이전 포스팅 까지는 HTML과 CSS에 대해 배웠습니다. HTML로 뼈대를 잡았었고, CSS로 형태를 잡았었습니다. 이번 JavaScript에서는 그 위에 다양한 동작을 할 수 있도록 추가하여 생동감을 준다고 이해하면 좋을 것 같습니다. Javascript의 기본 사용법은 아래와 같습니다. console.log()를 사용하면 브라우저의 개발자 도구에서 console탭에서 Javascript의 출력 결과를 확인할 수 있습니다. 개발자 도구는 ..

이번 포스팅에서는 CSS의 전환 요소인 Tranform, Transition 애니메이션 효과를 주는 Animation 요소를 알아보도록 하겠습니다. Transform transform은 요소의 변환 효과를 주는 요소이다. transform: 변환함수1 변환함수2 변환함수3 ... ; transform: 원근법 이동 크기 회전 기울임; Transform의 2D 변환 함수이다. 2D 변환 함수는 기본적으로 X축과 Y축의 값을 주어 변환 할 수 있다. 당연히 X축과 Y축을 각자 줄 수도, 하나의 값만 줄 수 도 있다. Transform의 3D 변환 함수는 X,Y축에 Z축을 추가로 사용한다. ratato를 사용할 때 회전을 deg로 준다. ex) rotatoX(30deg) 음수도 사용 가능 skew는 각도를 설..

이번 포스팅에서는 CSS의 Z-index요소와 Background 요소 그리고 Flex요소에 대해 알아보도록 하겠습니다. Z-index Z-index 요소는 우선순위 지정자로 우리가 웹 브라우저상에서 이미지들을 볼때 어떤 것이 더 사용자에게 가까운지를 나타내는 요소입니다. 예를 들어 3개의 이미지가 겹쳐있을 때 어떤 이미지가 먼저 보일지를 결정합니다. z-index: n; - z-index에 숫자를 입력해서 우선 순위를 정한다. 숫자가 높을 수록 가장 위에 이미지이다. 노란색 원에 z-index값을 가장 높게 줘서 가장 먼저 보이는 결과가 나왔다. item3에게 가장 높은 z-index값을 주고 그 다음 z-index값을 item1에 주어서 item2가 더 나중에 생겼음에도 불고하고 item1보다 뒤에 ..

이번 포스팅에서는 CSS의 속성인 너비 속성들과 요소들에게 효과를 부여해 보고, 위치지정 방식에 대해 알아보겠습니다. CSS Width, Height 너비 요소 width, height - 요소의 가로/세로 너비 기본값은 auto로 지정되어 있으면 px, em, vw 등 단위로 지정 가능하다. max-width, max-height - 요소의 최대 가로/세로 너비 지정 일반적으로 기본 값은 none으로 최대 너비의 제한이 없다. 단위는 px, em, vw 등 지정 가능하다. 최대로 커질 수 있는 너비를 지정해준다. min-width, min-heigh - 요소의 최소 가로/세로 너비 지정 최소 너비 재한 없음, 기본 값은 0이다. auto로 지정하면 브라우저가 너비를 계산한다. px, em, vw 등 단..

CSS 선택자와 속성 이전 포스팅에 이어서 이번에는 남은 3가지의 선택자와 속성에 대해 알아보려 합니다. CSS 선택자 가상 클래스 가상 요소 속성 먼저 "가상 클래스 선택자"에 대해 알아보자 가상 클래스 : 사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소 선택 시 발생하는 선택자로, 각 요소의 상황에 따라 사용자가 원하는 요소를 선택할 때 사용한다. ex)마우스를 클릭하거나 움직이는 등 사용자가 특정 행동을 했을 때 변화한다. 혹은 특정 요소를 부정 할 떄 사용한다. ABC:hover{ } : 선택자 ABC요소에 마우스 커서를 올리고 있는 동안 변화를 주는 선택자 ABC:active{ } : 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 변화를 주는 선택자 ABC:focus{ } : ABC의..

CSS의 기본 개념과 사용법 이번 CSS의 기본 개념과 실습을 통하여 CSS에 대해 알아 보기 전, 먼저 이전에 포스팅에서 간단하게 다루었던 테이블에 대해 몇개의 실습을 먼저 진행해 보려 합니다. 실습 1 이 전 포스팅에서 테이블 태그와 ,, 등을 배웠는데요 이를 가지고 하나의 실습을 진행하려 합니다. 위 사진과 같은 모양의 테이블을 만들기 위해 서는 우선 해당 테이블이 몇개의 "행"을 가지고 있는지 파악하는게 우선입니다. 위 사진을 보면 총 3개의 "행"을 가지고 있는 것을 볼 수 있습니다. 따라서 이 총 3번 사용하여 만들 수 있습니다. 위 사진을 보면 이 3번 사용된 것을 확인할 수 있습니다. 또한 이전 포스팅에서 배운 colspan과 rowspan을 사용하여 하나의 가 차지하는 칸을 3칸, 2칸으..

웹을 구성하는 가장 기본적인 요소로는 HTML, CSS, JavaScript가 사용된다. 이 중 HTML은 웹을 구성하는 뼈대 역할을 한다. HTML은 마크업 언어로 태그를 이용하여 구조화하는 언어이다. 이번 시간에는 실습을 통하여 태그의 사용법을 배워보려 한다. 위 사진은 HTML이 구성하는 기초적인 태그들이다. 으로 시작하여 문서 형식을 HTML5로 지정하였고, HTML은 , 을 통해서 태그가 실행되고 종료 됨을 표시한다. ,는 요소(Element)라고 부르고 그 사이에 들어가는 정보를 내용(Content)라고 부른다. 실질적인 HTML 문서는 , 사이에 작성되는 내용들이며 큰 순서로 보면 , 사이에 작성된다. 위와 같은 방식을 HTML 기본 문법, 중첩(Nested)라고 부르고 중첩관계를 부모자식 ..

이번 포스코와 코딩온에서 진행하는 웹개발자 풀스택 과정 10기 오프라인 수업이 시작되었습니다. OT 수업내용 Git, Github 설정 및 소개 Visual Studio 설치 및 설정 Git 먼저 Git을 컴퓨터에 설치를 진행해야 합니다. 일반적인 Window PC에서는 https://git-scm.com/ 사이트에서 설치가 가능합니다. 제 기준으로 저는 Mac OS를 사용하기 때문에 Homebrew사이트를 통해서 Git의 설치를 진행할 수 있습니다. 아래에 있는 주소를 복사하여 터미널에 주소를 입력하여 Homebrew Tool을 설치 가능합니다. 이 후 터미널에 brew install git을 통해 git을 설치 할 수 있습니다. 이 후 데스크톱에 git과 github를 연결할 새 디렉터리를 만들고 터..