우당탕탕 개발일지

if문과 if else문 if문 : if문의 조건이 true이면 중괄호 안의 자바스크립트 소스를 얻어 실행하고 false이면 중괄호 안의 자바스크립트 소스를 무시한다. if(true){ document.write("if문의 조건을 만족하여 이 문장이 실행되었습니다."); } if(false){ document.write("if문의 조건을 만족하여 이 문장이 실행되었습니다."); } if else문 : 조건을 확인해서 조건에 맞을 때 실행할 명령과 조건에 맞지 않을 때 실행할 명령이 따로 있다면 if else문을 사용한다. var name=prompt("숫자를 입력하세요."); if(name=60) ? alert("통과") : alert("실패"); 조건이 많을 때 - switch문 : 조건이 3개 이상이..

변수란 무엇일까? 변수는 변하는 값을 저장할 때 사용한다. 변수: 변할 수 있는 값이다. 상수: 변하지 않는 값이다. 예시 ) 나이 = 올해연도 - 태어난연도 + 1 변수: 올해 연도, 태어난 연도, 나이, 상수: 1 변수를 선언하는 규칙 세 가지 : 변수에는 컴퓨터가 구별할 수 있도록 이름을 붙여야 하는데 이를 '변수를 선언한다'라고 한다. 변수선언은 var 키워드 뒤에 변수 이름을 적으면 됩니다. var apple; 규칙 1 : 이름은 의미 있게 짓는다 - 예를 들어 올해 연도는 currentYear, 태어난 연도는 birthYear이라고 짓는 것이 좋다. 규칙 2 : 여러 단어를 연결한 변수 이름은 낙타 모양으로 만들어준다. - 위의 currentYear과 birthYear같이 여러단어를 연결할 때..

자바스크립트의 입력과 출력 크롬 브라우저의 콘솔 도구 콘솔이란? 자바스크립트 소스를 간편하게 연습해 볼 수 있는 도구이다. 콘솔 창 열기 ) Ctrl + Shift + J 맥 : command + option + J 콘솔 줄 바꿈 ) Shift + Enter * 소스를 입력하고 그 다움줄에 결괏값이 undefined 이라 뜨면 내용은 오류가 아니라 출력할 내용이 없을 때 나타나는 문장이다. * prompt( ) 함수 : 사용자 입력값 받기 - 사용자가 값을 입력할 수 있도록 작은 창을 만들어준다. prompt ( ); prompt("나이를 입력하세요."); prompt ("나이를 입력하세요", "20살"); document.write( ) 함수 : 웹 브라우저 화면에 출력하기 - 괄호 안의 내용을 크롬 ..

프런트엔드 개발 이해하기 현업에서 어떤 순서로 개발이 진행되는지 알아보기 1단계 ) 고객에게 사이트 개발 의뢰를 받는다. 2단계 ) 화면에 보여질 UI를 디자인한다. 3단계 ) 퍼블리셔가 전달받은 UI를 바탕으로 HTML와 CSS를 이용해 정적인 웹 문서를 완성한다 or 프론트엔드 개발자가 자바스크립트나 제이쿼리를 사용해 동작이 일어나게 만든다. 4단계 ) 백엔드 개발자가 화면에 보이지 않는 부분을 개발한다. * 백엔드 개발자는 입력한 데이터를 데이터베이스에 저장하거나 검사하는 등 눈에 보이지 않는 영역을 담당한다 * 자바스크립트의 탄생 배경 1. 모카 : 넷스케이프에서 근무하던 브렌드 아이크가 개발했다. 2. 라이브스크립트 : 모카에서 라이브스크립트라는 이름으로 변경되었다. 3. 자바스크립트 : JAV..

변형 2차원 변형과 3차원 변형 2차원 변형 : 단순희 수평이나 수직으로 이동하고 회전하는 것이다. x축은 오른쪽으로 갈수록 값이 커지고 y축은 아래로 내려갈수록 값이 커진다. 3차원 변형 : 원근감을 주는 z축을 추가해 변형 시키는것이다. z축은 앞뒤로 이동하는데 보는 사람 쪽으로 다가올수록 값이 더 커지고 뒤로 갈수록 값이 작아진다. transform과 변형 함수 : transform 변형함수와 함께 사용한다. 기본형 ) transform: 변형 함수; 2차원 변형 함수 : 최신 브라우저에서는 지원되지만 인터넷 익스플로러9를 비롯한 이전 브라우저를 위해 브라우저 접두사를 붙여야한다. 3차원 변형 함수 : 이전 브라우저를 위해 -webkit- -moz-등의 브라우저 접두사를 붙여야하지만 익스플로러의 경..

연결 선택자 상위요소 하위요소 하위요소 모두에 스타일이 적용 하위요소는 자식뿐만 아니라 손자요소, 손자의 요소까지 적용됨. 부모요소 > 자식요소 자식요소에만 스타일을 적용 요소1 + 요소2 요소1과 2는 같은 레벨이면서 요소1 이후 맨 먼저 오는 요소2에 스타일을 적용한다 같은 부모요소를 가지고 있는 형제관계에서 먼저 나오는 요소를 '형요소' 나중에 나오는 요소를 '동생요소'라 하는데 첫번째 동생 요소에만 스타일이 적용된다. 요소1 ~ 요소2 모든 형제 요소에 적용된다 h1~p{}일 경우, h1 다음에 오는 모든 형제 p요소에 해당된다. 속성 선택자 [속성] 지정한 속성에 스타일 적용 [속성=값] 특정값을 갖는 속성에 스타일 적용 예 ) [target="_blank"] [속성~=] 여러 값 중 특정 값이..

문서 구조를 위한 HTML5 시맨틱 태그 태그 : 머리말 지정하기 주로 태그를 사용해 검색 창을 넣거나 태그를 사용해 사이트 메뉴를 넣는다. 태그 : 문서를 연결하는 내비게이션 링크 - 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음을 나타낸다. - 태그는 내비게이션 메뉴뿐만 아니가 푸터에 있는 사이트 링크 모음 부분에도 많이 사용된다. 즉, 위치의 영향을 받지 않아 , 또는 안에 포함시킬 수도 있고 독립해 사용할 수도 있다. * id 태그를 따로 지정해주면 스타일 시트에서 스타일을 지정할 수 있다. * 태그 : 주제별 콘텐츠 영역 나타내기 - 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용한다. 제목 태그와 함께 사용되며 태그 안에 를 사용할 수 있다. 태그 : 콘텐츠 내용 넣기 - 태그..

CSS 포지셔닝과 주요 속성들 box-sizing 속성 : 박스 너비 기준 정하기 - 콘텐츠 영역의 너비에 패딩과 테두리 크기까지 합쳐서 width 속성으 지정할 수 있다 content-box width 속성 값을 콘텐츠 영역 너비 값으로 사용한다. 기본값이다. border-box width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용한다. float 속성 : 왼쪽이나 오른쪽으로 배치하기 - 예를 들어 이미지와 텍스트를 나란히 표시하려고 할 때는 이미지에 float 속성을 사용한다. left 해당 요소를 문서의 왼쪽으로 배치한다. right 해당 요소를 문서의 오른쪽으로 배치한다. none 좌우 어느 쪽으로도 배치하지 않는다. clear 속성 : float 속성 해제하기 ..