Programming/Web Programming (2021) (23) 썸네일형 리스트형 [웹 프로그래밍] 11. 자바스크립트 개요 자바 스크립트 정적인 HTML 콘텐츠를 프로그램 구현을 통해 동적으로 변경하거나 사용자와의 상호작용을 담당 일반 프로그램언어와 비슷한 구조 객체 기반의 스크립트 언어로 웹 브라우저에서 해석되는 인터프리터 언어 프레임워크를 사용하면 서버 프로그래밍에도 사용가능하다. 일반적으로 사용하는 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다. 특징 동적이며 타입을 명시할 필요가 없는 인터프리터 언어 객체지향 프로그래밍과 함수형 프로그래밍을 모두 표현 가능 HTML의 내용 속성 스타일을 변경 가능 이벤트를 처리하고 사용자와의 상호작용을 가능하게 한다 AJAX 기술을 이용해 서버와 실시간 통신 기능을 제공한다. [일부 데이터만 통신 가능하다. -> 속도 향상] 버전 ECMAScript 자바스크립트 표준 규격 E.. [웹프로그래밍] 10. 부트스트랩 오픈소스 CSS 라이브러리 https://getbootstrap.com/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. getbootstrap.com DOM, CSS의 상속관계, (클래스) 선택자, 블록/인라인, position의 이해가 필수적 1) CDN (Contents Delivery Network) 쇼핑몰 로그인 부트스트랩 적용후 쇼핑몰 로그인 쇼핑몰 로그인 아이디 비밀번호 로그인 회원 가입 유용한 컴포넌트 모음 alerts -박스요소 만들기 badge .. [웹프로그래밍 프로젝트] 3. CSS 네비게이션 바 만들기 1. 개요 일반적인 메인 화면에서 상단 메뉴를 구성하는 네비게이션 바 만들기 마우스가 올라가면 배경이 변하고 서브메뉴가 나오는 효과 포함 범용적으로 사용할 수 있도록 클래스 설계 맨 우측은 Home 메뉴로 구성 2. 기본구조 시멘틱 태그인 로 묶고, 메인 메뉴는 과 로 구성된 목록 dropdown 각각의 메뉴 구성 dropdown-menu 메인 메뉴 항목 정의 dropdown-content 서브메뉴가 있을 경우 드롭다운으로 나타나는 메뉴 목록 지정 home 메인 화면으로의 링크 Menu1 Menu1-1 Menu1-2 Menu1-3 Menu1-4 Menu2 Menu2-1 Menu2-2 Menu2-3 Menu2-4 Menu3 Menu3-1 Menu3-2 Menu3-3 Menu3-4 Menu4 Home 3. .. [웹프로그래밍 실습] 9. 복합 셀렉터 예제1) CSS 상속 CSS Inheritance Example 예제2) 셀렉터 조합 Welcome to MyTube New New movie1 New movie2 This Week Best New movie3 New movie4 예제3) 가상 셀렉터 Virtual Selector Example HTML Tutorial CSS Tutorial JavaScript Tutorial Show Message - Mouse over.. Note:This message will show when mouse over "Show Message.." Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab.. [웹프로그래밍] 9. 복합 셀렉터 기본 셀렉터 태그, id, 클래스를 사용하는 방법 기본 셀렉터로는 특정한 부분의 디자인을 적용하기 어렵다. 복합 셀렉터 html 계층 구조 안에서 부모요소와 자식요소간의 관계를 파악하고 상속을 통해 CSS 속성을 적용하기 위해 복합 셀렉터를 이용한다. 사용자 동작과 UI 요소 상태에 스타일 적용하는 가상 클래스를 배우고 어떤 속성이 존재하는지 학습한다. -> CSS 상속, 후손, 자손 형제 선택자등의 선택자 조합 가상 선택자에 대해 배운다. 1. 상속 html 계층 구조에서 특정 속성들이 부모요소로부터 자식요소로 전달되는 개념 [margin 속성은 제외] 상위 객체와 하위 객체의 관계형 구조를 의미하며 부모 요소의 속성을 자식 요소가 물려받는 것을 의미. 코드의 중복성을 줄여주기 때문에 생산성을 높일 수.. [웹프로그래밍 실습] 8. 박스모델과 포지셔닝 Q 8-1. CSS 단위 Basic Text Size: 20px 30px 1em 2em 1rem 2rem Q 8-2. 기본 박스모델 Box1 Box2 Q 8-3. position 설정을 통한 박스 배치 Box position example Box-1: static Box-2: relative Box-3: relative Box-4: absolute Box-5: fixed [참고 : F12 개발자도구를 통해 CSS익히기] Q 8-4. float 속성 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro quae voluptate tempora molestiae, laboriosam ipsum veniam rerum quibusdam ullam. .. [웹프로그래밍] 8. 박스모델과 포지셔닝 박스모델 CSS에서 화면 구성요소를 다루기 위한 방법으로 레이아웃을 구성할 때 중요한 개념 포지셔닝 화면 배치를 위한 속성들을 활용하는 기법 -> 박스모델을 정의하고 레이아웃을 설계해서 원하는 위치에 구성요소를 자유롭게 배치 1. CSS 단위 px, % 등 1) 절대 단위 : 화면의 크기나 해상도에 따라 달라지는 단위로 특정용도 외 사용을 지양한다. 사용용도 : 박스의 크기를 지정할 때 px, 폰트 크기 지정할 떄 pt를 주로 사용 2) 상대 단위 : 부모 요소를 기준으로 상대적인 크기를 지정하는 단위 상대 단위 종류 % : 100%를 기준으로 하는 상대 크기 em : 부모 요소의 기본 크기를 1em으로 상대적인 크기 지정 -> 부모의 크기 변경시 변한다. rem : 부모가 아닌 최상위 root[like.. [웹프로그래밍 실습] 7. CSS 셀렉터와 스타일 속성 Q-1. 기본 셀렉터 Tage selector Class selector Id selector Tage selector2 Q-2. 기본 셀렉터 조합 text-1 text-2 text-3 text-4 text-5 text-6 Q-3. 컬러 속성 Color Name:red HEX($) : #FF0000 RGB: rgb(255,0,0) Q-4. 텍스트 및 폰트 속성 Times New Roman Italic Text Bold 20px Text 2em Right align Text Q-5. 텍스트 정렬 속성 CSS text-image align vertical-align:top vertical-align:middle vertical-align:bottom Q-6. 링크 속성 Hyper Link attributes.. 이전 1 2 3 다음
