게으른 나에게

15-1 함수 알아보기여러 동작을 묶은 덩어리, 함수함수: 동작해야 할 목적대로 묶은 명령.함수 사용하면 시작과 끝 명확하게 구별 가능. 묶은 기능에 이름 붙여 같은 이름으로 명령 실행. 함수를 사용하는 이유자바스크립트에 들어 있는 함수를 가져다 사용하거나, 자신이 필요한 명령을 직접 함수로 만들어 사용. 함수 선언 및 호출함수 만들 때 이름 붙이고, 필요할 때마다 함수 이름 사용해 실행.함수 선언한다, 함수 정의한다: 함수가 어떤 명령을 처리할지 미리 알려주는 것.함수 선언할 때: 에약어 (function) + 중괄호{실행할 명령}function 함수명() { 명령 }함수 선언만으로 함수 실행 x. 함수 선언한 후, 실행하는 코드 작성.함수 실행하려면 미리 선언한 함수명 사용.함수 호출한다, 함수..

14-1 변수 알아보기변수프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터.상수: 값을 한번 지정하면 바뀌지 않는 데이터. 변수 선언 규칙변수 선언: 변수를 사용하려면 변수를 구별 할 수 있도록 이름을 붙이는 것. 1. 변수 이름은 영어 문자와 언더스코어(_), 숫자 사용.사용할 수 있는 변수 이름now, _now, now25, now_25사용할 수 없는 변수 이름23now, now 25, *now 2. 자바스크립트는 영어 대소 문자 구별, 예약어는 변수 이름 x.number, Number, NumBer 모두 다른 변수 이름 인식.var X. 3. 여러 단어를 연결한 변수 이름은 중간에 대문자 섞어 씀.낙타 표기법: totalArea, TotalArea 4. 변수 이름은 의미 있게 작성.변수..

13-1 자바스크립트로 무엇을 할까웹의 요소 제어HTML이나 CSS와 함께 사용해서 웹의 요소를 움직이거나 포토 갤러리를 펼쳐 놓은 것처럼 웹 사이트 UI 부분에 많이 활용.-웹 애플리케이션 만듦.-다양한 라이브러리 사용. (리액트, 앵큘러, 뷰, 제이쿼리)-서버 개발 가능. (Node.js)     13-2 웹 브라우저가 자바스크립트를 만났을 때웹 문서 안에  외부 스크립트 파일로 연결해서 자바스크립트 작성자바스크립트 소스도 따로 파일로 저장한 후 웹 문서에 연결해 사용. 자바스크립트 위 텍스트를 클릭해 보세요  웹 브라우저에서 스크립트를 해석하는 과정① 를 보고 이 문서가 웹 문서라는 것을 알게 됨. 태그 사이의 내용을 HTML 표준에 맞춰 읽기 시작.② 웹 문서에서 HTML 태그의 순서와 포함관..

11-1 변형 알아보기transform과 변형함수css에서 변형을 적용하려면 transform 속성과 변형함수 이름을 함께 작성해야 함.transform: 함수웹 요소를 이동시키는 변형함수: translate()웹 요소를 x축으로 50 px, y축으로 100px 이동하는 클랙스 선택자 .photo를 정의..photo { transform: translate(50px, 100px) 2차원 변형: 웹 요소를 평면에서 변형. x축은 오른쪽으로 갈수록 값이 커지고, y축은 아래로 내려갈수록 값이 커짐.3차원 변형: x축과 y축 원근감을 주는 z축을 추가해서 변형. z축은 앞뒤로 이동하며, 보는 사람 쪽으로 다가올수록 값이 커지고 뒤로 갈수록 값이 작아짐.2차원 변형함수종류설명translate(tx, ty)지정한..

10-1 연결 선택자종류형식설명하위 선택자상위요소 하위요소상위요소 포함 모든 하위요소 선택자식 선택자부모요소 > 자식요소부모요소 포함 자식요소만 선택인접 형태 선택자요소1 + 요소2요소1 이후 먼저 오는 형제요소 선택형제 선택자요소1 ~ 요소2요소1과 형제인 모든 요소 선택 10-2 속성 선택자종류선택요소예시[속성]해당 속성있는 요소[required][속성 = 값]지정한 속성값 있는 요소[target + _blank][속성 ~= 값]지정한 속성값 포함 요소(단어별)[class ~=button][속성 ㅣ=값]지정한 속성값 포함 요소(하이픈,단어별)[title l= us][속성 ^= 값]지정한 속성값 시작 요소[title ^= eng][속성 $= 값]지정한 속성값 끝나는 요소[href $= xls][속성 *..

09-1 배경색과 배경범위 지정하기배경 이미지 관련 속성속성설명background-color배경색 지정background-clip배경색이나 이미지를 어디까지 적용할지 지정background-image배경에 이미지 삽입background-repeat배경 이미지의 반복 여부 지정background-position배경 이미지의 위치 지정background-origin배경 이미지를 배치할 기준 지정background-attachment배경 이미지를 문서에 고정background하나의 속성으로 배경 스타일을 한꺼번에 지정background-size배경 이미지의 크기 조절 선형 그러데이션 관련 속성종류설명방향끝 지점을 기준으로 to 다음에 방향을 나타내는 예약어 최대 2개 까지 사용할 수 있음. 사용할 수 있는 예..

08. 레이아웃을 구성하는 CSS 박스 모델CSS와 박스 모델 블록레벨 요소와 인라인 레벨 요소 -블록레벨 요소: 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것. 해당 요소의 너비가 100%. 왼쪽이나 오른쪽에 다른 요소가 올 수 없음. (,, ) -인라인 레벨 요소: 한줄을 차지하지 않음. 콘텐츠 만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음. (, , ) 박스 모델 크기 웹 문서의 블록 레벨 요소는 모두 박스 형태임. -박스 모델 요소: 스타일 시트에서는 이렇게 박스 형태인 요소 콘텐츠 영역 크기 지정종류설명너비나 높이의 값을 px이나 em 단위로 지정박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율(%)로 지정auto박스 모데의 너빗값과 높잇값이 ..

07. 텍스트를 표현하는 다양한 스타일글꼴 관련 스타일 글꼴 기본형{ font-family: | [, ] ※ 기본형 기호 이해하기1. |는 나열한 옵션 중 하나가 값이 되어야 한다는 의미.2. 속성값을 나열할 때 키워드(약속한 값)는 그대로 나열.3. 속성값을 나열할 때 값이 아니라 유형이라면 로 묶음. 이때 다른 속성을 유형처럼 사용할 수 있음. 글꼴 적용body { font-family:"맑은 고딕", 돋움, 굴림 } 글자 크기font-size: ￨ ￨ ￨ 단위: em, rem, ex, px, pt 폰트 속성{ font-style: normal ㅣ italic ㅣ oblique } 글자 굵기{ font-weight: bold ㅣ lighter }  웹폰트@font-face { font-fami..

[5장 입력양식 작성하기] 마무리 문제 01.> 문제풀이 예약 정보 이 름 전 화 메 일  > 결과 [5장 입력양식 작성하기] 마무리 문제 02.> 문제풀이 프런트엔드 개발자 지원서 HTML, CSS, 자바스크립트 기술을 이해하고 실무 경험이 있는 분을 찾습니다. 개인정보 이름 연락처 ..

[4장 웹 문서의 다양한 내용 입력하기] 마무리 문제 01. > 문제풀이 수습 국원 모집 방송에 관심 있는 새내기 여러분 환영합니다 교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부와 전공은 상관없습니다. 방송에 관심 있는 여러 학우의 지원 바랍니다. 모집 기간: 3월 2일 ~ 3월 11일 모집 분야: 아나운서, PD, 엔지니어 지원 방법: 양 식 작성 후 이메일 접수 지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다. 혜택 수습기자 활동 중 소정의 활동비 지급 정기자로 진급하면 장학급 지급 > 결과[4장 웹 문서의 다양한 내용 입력하기] 마무리 문..