프론트엔드 프로그래밍
-
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 문서 내의 글꼴, 크기, 색상, 배경, 테두리, 레이아웃 배치, 여백 등 자유롭게 편집 - 통일감 있는 문서 작성 - 한 번만 정의하여 문서에 일관되게 적용 가능 - 편리한 문서 관리 -..
-
HTML5 시멘틱 구조 태그프론트엔드 프로그래밍/HTML 2022. 1. 26. 14:26
HTML5 시멘틱 구조 태그 - 시멘틱(Semantic) : 의미의, 의미론적인 - 역할과 기능에 맞는 요소로 영역 구분해서 사용 - 각 요소(태그)가 의미가 있다는 것 - : 헤더 (제목) - : 내비게이션 (메뉴) - : 사이드 바 - : 컨텐츠 (내용) - : 컨텐츠 안의 내용 (컨텐츠 영역을 세분화) - : 푸터 (주소 / 연락처 / 저작권 등) HTML5 시멘틱 구조의 특징 - HTML4로 만든 웹 문서의 결과 화면이나 HTML5로 만든 웹 문서의 결과 화면만 보면 웹 브라우저에 보이는 모습은 동일하지만 - 실제로 웹 브라우저에서 문서를 처리할 때 큰 차이 HTML5 시멘틱 구조의 장점 - 소스만으로도 문서 내용 쉽게 이해 - 태그만 보고도 어느 부분이 제목이고, 메뉴이고, 실제 내용인지 쉽게 ..
-
입력 양식 태그 <form>, <label>, <input> ...프론트엔드 프로그래밍/HTML 2022. 1. 26. 14:22
입력 양식 태그 - 입력 양식 (form)을 만들 때 사용하는 태그 - - - - - 태그 - 입력 양식을 구성하는 기본 골격 제공 - - 다양한 입력 양식 태그 포함 - - 태그 - 폼요소에 캡션(라벨) 붙이기 - 태그 - 데이터를 입력 받기 위한 태그 - 태그의 type 속성에서 사용 가능한 유형 라디오 버튼 (radio) - 여러 항목 중에 한 개를 선택할 때 사용 - 1학년 - 4학년 - name : 그룹 이름 - value : 선택한 버튼의 값 (서버로 전송되는 값) - checked : 처음부터 선택된 상태로 만들기 모든 입력 태그에서 - name 속성 : 서버에 전달될 때 서버에서 인식하는 이름 - id 속성 : 자바스크립트, jQuery에서 객체로 선택해 올 때 인식하는 이름 체크박스(ch..