본문 바로가기

Front60

Bootstrap Bootstrap HTML, CSS, JS 라이브러리 jQuery 기반의 HTML5 Web Framework 프론트엔드에서 작동되는 프레임워크 트위터에서 사용하던 각종 레이아웃, 버튼, 입력 요소 등 UI 요소들을 누구나 사용할 수 있도록 만들어진 오픈소스 프레임워크 (라이브러리) HTML/CSS 기반의 템플릿 양식, 버튼, 내비게이션 등 다양한 UI 요소 포함 자바스크립트 선택적 확장 가능 특징 쉽고 편리한 사용 가능 HTML/CSS 기본 지식만 있으면 누구나 사용 가능 반응형 웹 디자인 PC 또는 스마트폰이나 태블릿 등의 모바일용 디자인 지원 모든 최신 브라우저와 호환 기능 CSS 기능 : 디자인이나 스타일 적용 컴포넌트 기능 : 내비게이션 바, 탭, 버튼 등의 기능을 간단하게 수정해서 사용 가능 자.. 2021. 12. 6.
CSS - 반응형 웹 반응형 웹 PC, TV, 내비게이션, 스마트 기기 등 다양한 기기의 화면이나 환경에 맞게 자유자재로 변하도록 만들어진 웹 장점 유지보수가 간편함 모바일 버전과 데스크탑 버전 두 개의 웹사이트 만들게 될 경우 웹 사이트 수정 / 갱신할 때 모바일, 데스크탑 버전의 수정/갱신 동시 지원 모바일, 태블릿, 데스크탑 모두 하나의 html, css에서 유지보수 가능(한 파일에서 관리가 가능하다는 의미. 쉽다는건 아님) 마케팅에 유리함 환경이나 기기에 따라 최적화된 구조로 웹사이트를 변경해서 보여줄 수 있기 때문에 확실한 내용 전달 가능 비용면에서 효과적임 두 가지 버전의 웹사이트를 만들지 않아도 되기 때문에 기업 비용 측면에서 상당히 효과적임 검색 엔진 최적화 특정 키워드 검색 시, 검색 결과에서 상위권에 나타나.. 2021. 12. 6.
CSS 연습문제 CSS 연습문제 메뉴 항목에 마우스 올렸을 때 글자색 빨간색, 밑줄 표시 테이블 사용 cssEX.html 패션잡화 주방용품 생활건강 DIY가구 캐주얼화 스니커즈 미니크로스 여성 가방 페이퍼플레인 겨울 신발 35,000원 20,000원 25,800원 공지사항 [배송] : 무료배송 변경 안내 2021.08.25 [전시] : DIY 가구 전시 안내 2021.09.01 [판매] : 11월 특가 상품 안내 2021.11.01 커뮤니티 [레시피] : 살 안찌는 야식 만들기 [가구] : 헌집 새집 베스트 가구 [후기] : 배송이 잘못 됐어요 ㅠㅠ cssEx.css #wrap { margin:0 auto; /* 내가 가운데 정렬 */ width:800px; /* 가운데 정렬하기 위해서는 width 값 있어야 함 */ .. 2021. 12. 6.
CSS - 속성 CSS 속성 텍스트 속성 배경 색상 / 이미지 관련 속성 테두리 속성 여백 속성 display 속성 : inline / block / inline-block float 속성 목록 관련 속성 위치 관련 속성 겹침 (레이어) overflow visibility / opacity 그림자 텍스트 속성 font-family : "굴림", "맑은 고딕"; /* 1순위 2순위, ... */ font-size : 40px; color : blue; /* 글자색 */ font-style : italic; font-weight : bold; /* 굵게 */ text-decoration : underline; letter-spacing : 3px; /* 글자 사이 간격 */ word-spacing : 5px; /” 단어 사.. 2021. 12. 5.
CSS - 정의, 선택자 CSS (스타일 시트) Cascading Style Sheets: 계단형 스타일 시트 단계적으로 스타일 적용 여러 스타일이 겹치면 맨 마지막 스타일 적용 HTML의 레이아웃 배치 등의 한계를 보완하기 위해 개발된 독립 언어 일정 기능들을 미리 지정하여 여러 부분에서 동일하게 적용 CSS에서 가능한 작업 HTML 문서 내의 글꼴, 크기, 색상, 배경, 테두리, 레이아웃 배치, 여백 등 지정 정렬 방식, 그림자, 동적인 기능 등 다양한 효과 CSS의 장점 자유롭게 웹 문서 편집 가능 원하는 형태로 HTML 문서 내의 글꼴, 크기, 색상, 배경, 테두리, 레이아웃 배치, 여백 등 자유롭게 편집 통일감 있는 문서 작성 한 번만 정의하여 문서에 일관되게 적용 가능 편리한 문서 관리 외부 스타일 시트 파일을 사용해.. 2021. 12. 5.
HTLM 연습문제 회원가입 페이지 만들기 다음과 같은 페이지를 작성하시오 join.html 회원가입 성명 아이디 (영문자+특수문자: 6~10자) 비밀번호 (영문자+숫자+특수문자: 10~20자) 비밀번호 확인 생년월일 년 1 2 3 4 5 6 7 8 0 10 11 12 월 1 2 3 4 5 6 7 8 0 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 일 양력 음력 전화번호 02 031 043 - - 휴대폰번호 000 010 - - 주소 상세 주소 입력 성별 남 여 직업 직업선택 웹디자이너 프로그래머 회사원 학생 영화감독 웹마스터 이메일 @ naver.com gmail.com nate.com hanmail.net 이메일 수신 여부 예 아니오 동의 예 아니오 2021. 12. 5.
HTML - HTML5 시멘틱 구조 태그 HTML5 시멘틱 구조 태그 시멘틱(Semantic) : 의미의, 의미론적인 역할과 기능에 맞는 요소로 영역 구분해서 사용 각 요소(태그)가 의미가 있다는 것 : 헤더(제목) : 내비게이션(메뉴) : 사이드 바 : 컨텐츠(내용) : 컨텐츠 안의 내용 (컨텐츠 영역을 세분화) : 푸터(주소 / 연락처 / 저작권 등) HTML5 시멘틱 구조의 특징 HTML4로 만든 웹 문서의 결과 화면이나 HTML5로 만든 웹 문서의 결과 화면만 보면 웹 브라우저에 보이는 모습은 동일하지만 실제로 웹 브라우저에서 문서를 처리할 때 큰 차이 존재 HTML5 시멘틱 구조의 장점 소스만으로도 문서 내용 쉽게 이해 태그만 보고도 어느 부분이 제목이고, 메뉴이고, 실제 내용인지 쉽게 구분 편리한 검색 사이트 검색 시 필요한 내용을 .. 2021. 12. 5.
HTML - 공간 분할 태그 공간 분할 태그 태그 : block 형식으로 공간 분할 태그: inline 형식으로 공간 분할 div.html div1 div2 div3 div4 span1 span2 span3 span4 div 중첩 2021. 12. 5.
HTML - 입력 양식 태그 입력 양식 태그 입력 양식 (form)을 만들 때 사용하는 태그 태그 입력 양식을 구성하는 기본 골격 제공 태그 폼 요소에 캡션(라벨) 붙이기 태그 및 속성 데이터를 입력 받기 위한 태그 태그의 type 속성에서 사용 가능한 유형 라디오 버튼 (radio) 여러 항목 중에 한 개를 선택할 때 사용 1학년 2학년 name : 그룹 이름 value : 선택한 버튼의 값(서버로 전송되는 값) checked : 처음부터 선택된 상태로 만들기 모든 입력 태그 name : 서버에 전달될 떄 서버에서 인식하는 이름 id : 자바스크립트, jQuery에서 객체로 선택해올 때 인식하는 이름 체크박스(checkbox) 여러 항목 중에 여러 개를 선택할 때 사용 게임 2021. 12. 5.