전체 글
-
자바 스크립트 (JavaScript)란? + 기본구조 및 사용법프론트엔드 프로그래밍/JavaScript 2022. 1. 26. 22:16
자바 스크립트 (JavaScript) - 정식명칭 ECMA스크립트 (ECMAScript) - ECMA International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어 - ES6 - default parameter - class - arrow function - const - let 자바 스크립트 (JavaScript) - 동적인 웹 페이지를 작성하기 위하여 사용되는 언어 - 웹 표준 프로그래밍 언어 - 모든 웹 브라우저에서 자바스크립트 지원 - 웹 브라우저 뿐 아니라 스마트폰 용 애플리케이션 개발 등 각종 분야에서 능력과 가치를 인정 받고 있음 - 초기에는 브라우저에 내장되어 제한된 기능만 지원하였는데 - 현재 Ajax(Asynchronous JavaScrip..
-
Jumbotron, Grid, button, Table, Image프론트엔드 프로그래밍/Bootstrap 2022. 1. 26. 22:06
Jumbotron - 일종의 대형 전광판 - 특정 콘텐츠나 관심있는 정보를 눈에 띄게 보여주기 위한 큰 박스 - 예제 : jumbotron.html / jumbotron2.html Jumbotron 둥근 모서리 사각형 영역 Jumbotron container 밖에 있는 jumbotron Jumbotron container 밖에 있는 jumbotron jumbotron-fluid 클래스 : 각진 모서리 지능형 서비스 풀스택 과정 Java / MySQL /HTML / CSS / JavaScript / jQuery / Bootstrap / Servlet / JSP / Spring Framework / AI API 커리큘럼 보기 그리드 (Grid) - 격자 모양으로 영역 분할 가능 - 1행을 12 등분해서 비율..
-
컨테이너프론트엔드 프로그래밍/Bootstrap 2022. 1. 26. 21:52
컨테이너 - 레이아웃 최상위 요소로 다른 요소 포함 - - .container : 반응형 고정 폭 컨테이너 - .container-fluid : 뷰포트 전체 폭까지 늘어나는 최대폭 컨테이너 컨테이너 예제 : container.html - viewport 포함 - : css/bootstrap.min.css - : jquery 파일 소스 지정 - : js/bootstrap.min.js 소스 지정 - 순서 주의!!! - jquery 파일 소스 지정이 먼저 와야 함 Bootstrap 색상 container.html Bootstrap Container Bootstrap Container
-
Bootstrap이란프론트엔드 프로그래밍/Bootstrap 2022. 1. 26. 17:14
Bootstrap - HTML, CSS, JS 라이브러리 - jQuery 기반의 HTM5 Web Framework - 프론트엔드에서 작동되는 프레임워크 - 트위터에서 사용하던 각종 레이아웃, 버튼, 입력 요소 등 UI 요소들을 누구나 사용할 수 있도록 만들어진 오픈 소스 프레임 워크 (라이브러리) - HTML/CSS 기반의 템플릿 양식, 버튼, 내비게이션 등 다양한 UI 요소 포함 - 자바스크립트를 선택적으로 확장 가능 Bootstrap 특징 - 쉽고 편리하게 사용할 수 있음 - HTML/CSS 기본 지식만 있으면 누구나 사용 가능 - 반응형 웹 디자인 - PC 또는 스마트폰이나 태블릿 등의 모바일용 디자인 지원 - 모든 최신 브라우저와 호환 Bootstrap 기능 - CSS 기능 : 디자인이나 스타일 ..
-
반응형 웹 (가변 그리드, 미디어 쿼리, 뷰 포트, 플렉서블 박스)프론트엔드 프로그래밍/CSS 2022. 1. 26. 16:46
반응형 웹 PC, TV, 내비게이션, 스마트 기기 등 다양한 기기의 화면이나 환경에 맞게 자유자재로 변하도록 만들어진 웹 반응형 웹의 장점 - 유지보수 간편 - 마케팅에 유리 - 비용면에서 효과적 - 검색 엔진 최적화 - 미래지향적(현재) 기술 유지보수 간편 - 모바일 버전과 데스크 탑 버전 두개의 웹사이트를 만들게 되면 - 웹 사이트 수정/갱신할 때 모바일 버전과 데스크탑 버전을 개별적으로 수정해야 하므로 업무량이 늘어나고 작업 내용도 복잡 - 그러나 모바일 버전, 태블릿 버전, 데스크탑 버전 등 모든 디자인을 하나의 HTML과 CSS 파일에서 작업하기 때문에 유지보수 용이 마케팅에 유리 - 환경이나 기기에 따라 최적화된 구조로 웹사이트를 변경해서 보여줄 수 있기 때문에 확실하게 내용 전달 가능 비용면..
-
CSS 연습문제프론트엔드 프로그래밍/CSS 2022. 1. 26. 16:28
CSS 파일로 HTML 문서 외부에 정의 (1) CSS 파일 인코딩 : UTF-8 설정 - Window / Preferences / Web / CSS Files 선택하고 - 오른쪽 Encoding: ISO 10646/Unicode(UTF-8) 선택 - [Apply and Close] (2) CSS 파일 생성 (3) HTML : CSS 연습문제 - cssEx.html - cssEx.css - 메뉴 항목에 마우스 올렸을 때 글자색 빨간색, 밑줄 표시 - text-decoration:none; /* 밑줄 없애기 */ - text-decoration:underline; /* 밑줄 표시 */ - [공지사항]과 [커뮤니티] 각 항목에 마우스 올렸을 때 빨간색 @charset "UTF-8"; #wrap { margi..
-
자식 / 자손 선택자 (상속 선택자) + 효과(스크롤, 투명도, 그림자)프론트엔드 프로그래밍/CSS 2022. 1. 26. 16:18
자식/자손의 개념 자식 선택자 : > 부호 사용 - 선택자 > 자식 선택자 - 선택자A > 선택자B - #header > h1 자손(후손) 선택자 : 띄어 쓰기 (스페이스) - 선택자 자손선택자 - 선택자A 선택자B - #header h1 - #pageNav ul li a:hover first-child 선택자 - 첫 번째 자손 선택 : .wrap div:first-child - 두 번째 자손 선택 : .wrap div:first-child + div 또는 nth-child(숫자) - .wrap div:nth-child(1) - .wrap div:nth-child(2) - .wrap div:nth-child(3) first-child 선택자 예제 : first-child.html nth-child 사용 ..
-
CSS 속성 선택자프론트엔드 프로그래밍/CSS 2022. 1. 26. 15:48
CSS 속성 - 텍스트 속성 - 배경 색상 / 이미지 관련 속성 - 테두리 속성 - 여백 속성 - display 속성 : inline / block / inline-block - float 속성 - 목록 관련 속성 - 위치 관련 속성 - 겹침 (레이어) - overflow - visibility / opacity - 그림자 텍스트 속성 배경색 배경 이미지 / 반복 테두리 유형 / 굵기 / 색상 지정 여백 속성 (padding / margin) inline과 block display에서 inline과 block의 차이 block - 행으로 배치 - 옆으로 나란히 배치 안 됨 - 여백 있음 - display 속성이 없으면 디폴트 inline - 옆으로 나란히 배치 - 여백 없이 내용물 만큼만 공간 차지 in..
-
CSS의 기본 형식 + 선택자(태그, 아이디, 클래스)프론트엔드 프로그래밍/CSS 2022. 1. 26. 15:31
스타일 시트의 기본 형식 - 선택자 (selector) - 스타일을 적용할 대상 - HTML 문서의 태그, 아이디, 클래스, 속성 - {속성명:값;} - 변경하고자 하는 속성 - 클꼴, 크기 색상 등 - 사용 예 - 모든 태그에 스타일 적용 - h1 { color:red; } 선택자 유형 (1) 태그 선택자 (2) 아이디 선택자 (3) 클래스 선택자 (4) 속성 선택자 (5) 상태 선택자 (1) 태그 선택자 - 태그명 사용 - 요소 (element) 선택자라고도 함 - HTML 문서에 있는 같은 모든 태그에 동일하게 적용 - 태그명 { 속성명:값; } 태그 선택자 예제 : tagSelector.html h3 { background-color:#000; color:#fff; width:50%; /* 가로 ..
-
CSS (스타일 시트)란?프론트엔드 프로그래밍/CSS 2022. 1. 26. 15:15
스타일 시트 (CSS) - Cascading Style Sheets : 계단형 스타일 시트 - 단계적으로 스타일 적용 - 여러 스타일이 겹치면 맨 마지막 스타일 적용 - HTML의 레이아웃 배치 등의 한계를 보완하기 위해 개발된 독립 언어 - 일정 기능들을 미리 지정하여 여러 부분에서 동일하게 적용 가능한 작업 - HTML 문서 내의 글꼴, 크기, 색상, 배경, 테두리, 레이아웃 배치, 여백 등 지정 - 정렬 방식, 그림자, 동적인 기능 다양한 효과 스타일 시트 장점 - 자유롭게 웹 문서 편집 - 원하는 형태로 HTML 문서 내의 글꼴, 크기, 색상, 배경, 테두리, 레이아웃 배치, 여백 등 자유롭게 편집 - 통일감 있는 문서 작성 - 한 번만 정의하여 문서에 일관되게 적용 가능 - 편리한 문서 관리 -..