게으른 나에게

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..

06.CSS의 기본스타일과 스타일 시트 css 기본형선택자 { 속성1: 속성값1; 속성2: 속성값2; } css 여러 줄로 표기하기p{ text-align: center; color: blue;} css 한 줄로 표기하기p { text-align: center; color: blue; } css 주석 처리하기/* css 주석 사용하면 편함*/p{ text-align: center; /* 텍스트 정렬 - 중앙 */ color: blue;}  스타일시트 알아보기 스타일 시트 - 1. 브라우저 기본 스타일                   - 2. 사용자 스타일  - 1. 인라인 스타일                                                 - 2. 내부 스타일 시트      ..

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

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

05 폼 삽입하기, input 태그사용자 정보아이디이메일비밀번호비밀번호 확인가입 경로블로그검색SNS기타메모이벤트와 새로운 소식메일 수신메일 수신 안 함      상품 선택 주문할 상품을 선택해 주세요. 선물용 3kg 개 (최대 5개) 선물용 5kg 개 (최대 3개) 가정용 3kg 개 (최대 5개) 가정용 5kg 개 (최대 3개) 포장 선택 선물 포장 ..