웹 사이트 제작

Notice

Recent Posts

Recent Comments

Link

« 2026/02 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

Tags more

Archives

Today

Total

관리 메뉴

스마트시대

웹 사이트 제작 - bootstrap 본문

Programing/Bootstrap

웹 사이트 제작 - bootstrap

스마트시대 2021. 9. 8. 21:22

728x90

2. HTML(Hyper Text Markup Language)

현재 우리가 사용하는 웹서비스는 전부 HTML문서간의 링크 연결 및 데이터 전송에의해 가능한 것이며, 웹페이지 구성요소의 가장 기본이 된다.
하이퍼 텍스트의 의미는 문서간의 링크 연결을 말하며, 마크업 언어는 HTML 문서내에서 사용 되는 태그를 말하는 것이다.
즉, 마크업 언어의 태그로 구성된 문서들이 서로간의 링크를 연결함으로써 웹상에서자유롭게 각 페이지를 탐색할 수 있도록 도와주기 위한 언어가 되는 것
현재의 HTML은 각 웹상에 존재하는 모든 페이지들의 뼈대를 성하는 역할 정도만 수행하며, 페이지를 꾸미는 역할은 CSS, 웹페이지상 기능 구현은 JavaScript를 이용한다. (FrontEnd)
추후 실제 웹서버에서 수행되는 기능들은 PHP, JSP, ASP등의 언어를 이용(BackEnd)

HTML 기본 구성요소

<!DOCTYPE html> : 현재 작성 중인 HTML문서의 형식을 정의(HTML5 사용)
<html></html> : HTML문서의 시작과 끝을 나타낸다. (모든 요소는 해당 영역내에 포함)
<head></head> : WEB Browser가 HTML문서를 해석하는데 필요한 정보를 포함한다.
<body></body> : 실제 HTML문서의 내용을 정의하는 영역

3. [ Bootstrap ]

- Bootstrap은 빠르고 쉽게 웹페이지를 디자인 할 수 있는 무료 프론트엔드 프레임워크.

- Bootstrap은 미리 제작되어있는 HTML 양식 및 CSS 디자인을 불러와 사용한다.

- Bootstrap은 반응형 웹을 만들 수 있는 기능을 제공한다. ( 디바이스에 따른 웹페이지 출력형식 자동 조정 )

- https://www.w3schools.com/bootstrap/default.asp [ 예제 학습 ]

- http://bootstrapk.com/css/ [ 공식 가이드라인 ]

[ Bootstrap 장점 ]

- 사용하기 쉬움 : HTML과 CSS에 대한 기본 지식 만 있으면 누구나 Bootstrap을 사용할 수 있다.

- 반응형 기능 : Bootstrap의 반응 형 CSS는 전화, 태블릿 및 데스크탑 크기에 맞게 자동 조정된다.

- 브라우저 호환성 : Bootstrap은 모든 최신 브라우저 (Chrome, Firefox, Internet Explorer, Edge, Safari 및 Opera)와 호환.

[ Bootstrap 사용방법 ]

1. CDN(Content Delivery Network) : 인터넷에서 Bootstrap 데이터를 가져와 사용하는방식.

2. Bootstrap Download : Local Server에서 Bootstrap을 직접 다운로드 받아 사용하는방식.

[ Bootstrap CDN 장점 ]

- 사용자가 이미 MaxCDN에서 Bootstrap을 다운로드했을 경우 사이트 방문 시 캐시에서 Bootstrap을 로드하게 되므로 페이지 로딩 시간이 단축된다.

- 대부분의 CDN은 사용자가 파일을 요청할 경우 가장 가까운 서버에서 파일을 제공하게 된다.

[ Bootstrap MaxCDN ]

<!-- Bootstrap MaxCDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

3-1. Container.html

3-2. Grid.html

3-3-1. Text.html

3-3-2. Text.html

3-3-3. Text.html

3-4. Table.html

3-5. image.html

3-6. jumbotron.html

3-7. Wells,Alerts.html

3-8. Buttons.html

3-9. Glyphicons.html

https://getbootstrap.com/docs/3.3/components/

Components · Bootstrap

Extend form controls by adding text or buttons before, after, or on both sides of any text-based . Use .input-group with an .input-group-addon or .input-group-btn to prepend or append elements to a single .form-control. Textual s only Avoid using elements

getbootstrap.com