-
[WebPage] 2. CSS & Bootstrap - 웹 페이지 제작 강좌Web/WebPage 2015. 6. 16. 16:05
Chapter 2 CSS & Bootstrap
1. Bootstrap은 무엇인가?
- 부트스트랩(Bootstrap)은 오픈소스(Open Source) 기반의 웹 UI 프레임워크입니다.
- 개발자는 부트스트랩이 제공하는 각종 컴포넌트를 이용하여, 트위터와 같은 심플한 UI를 구현할 수 있습니다.
- 부트스트랩은 기본 형태를 벗어나서 어느 정도까지 개발자 입맛대로 바꿔서 쓸 수 있도록 커스터마이즈(Customize) 할 수 있는 기능이 있습니다.
=> 종합적으로 웹의 기본 프레임을 부트스트랩이 형성하고, 나머지 세세한 부분에서 웹 개발자의 노력을 더하면 UI 관점에서 깔끔하면서 강력한 퍼포먼스를 자랑 할 수 있는 사이트를 만들 수 있게 되는 것 입니다.
2. CSS
2-1. CSS란?
- CSS(Cascading Style Sheets)는 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트입니다.
- 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 해줍니다.
2-2. CSS 기본 요소
2-2-1. CSS 적용 방법
1. In-Line 방식: CSS를 태그에 직접 적용하는 방식
1<p style="color:red;"> Test </p>cs 위 방식은 그때마다 바로 스타일을 확인해 볼 수 있다는 점입니다. 그러나, 유지보수에 굉장히 불편하기에 사용하지 않는 것이 좋습니다.
2. Embedded 방식: html 문서에 <head> 혹은 <body> 태그에 <style> 태그를 직접 선언함으로써 스타일을 지정해서 적용하는 방식
123456<head><style type="text/css" media="screen">h1 {color:#ffc;}</style></head>cs 3. Import 방식: Link 방식과 더불어 가장 많이 쓰이는 방식
123456<head><style type="text/css" media="screen">@import_url(main.css);</style></head>cs Import 방식의 자엄은 하나의 CSS 파일로 여러 개 웹페이지의 디자인을 관리 할 수 있다는 것입니다.
또한, Import 된 CSS 파일 내부에서 다른 CSS 파일을 불러올 수 있습니다.
4. Link 방식: import 방식과 함께 많이 쓰이는 방식, 가장 추천하는 방식
1234<head><link ref="main.css" rel="stylesheet" type="text/css" media="screen" /></head>cs 다음으로 CSS 선택자에 대해 알아보기 전에 간단하게 Aptana Studio를 구동하는 법을 알아보겠습니다.
Aptana Studio를 실행하세요.
초기 workspace 설정이 나오는 데 일반적으로 넘어가주시면 되고, 변경을 원하시면 자신만의 경로로 선택하세요.
실행 초기 화면입니다.
새로운 프로젝트 생성을 위해, File -> New -> Web Project를 선택 혹은 아래 아이콘 내의 Web Project를 클릭하세요.
아래 화면처럼 Template 설정에 대해 묻습니다. Default 로 두시고 Next
다음 프로젝트 이름에 대해 묻습니다. FirstProject라 명하고 Finish 클릭
왼쪽 편의 Project Explorer 에 방금 생성한 프로젝트가 있습니다. 프로젝트를 오른쪽 클릭하여
New From Template -> HTML -> HTML 5 Template
아래와 같은 화면이 나오는 데, FirstPage.html 이라 명하고 Finish
다음으로 CSS 생성을 위해 프로젝트 오른쪽 클릭 -> New From Template -> CSS -> CSS Template 클릭
FirstStyle.css라 명하고 Finish
생성이 완료되면 FirstPage.html과 FirstStyle.css 가 Project 내에 있는 게 보일 것 입니다. FirstPage.html을 더블 클릭해서 열어줍니다.
아래와 같은 화면이 나오게 되는데 이전에 언급한 Link 방식으로 CSS를 연결해 보겠습니다.
위 소스코드 내에서 </head> 부분을 찾아서 그 상위에 아래 코드를 입력해서 연결합니다.
1<link rel="stylesheet" href="FirstStyle.css" type="text/css" />cs 기본적인 설정을 하고나서 실행을 하기 위해 Ctrl + F11 을 눌러서 실행합니다. 기본 브라우저를 Firefox로 잡기 때문인지 아래와 같은 문구가 뜨네요. 저는 크롬으로 잡아줬습니다.
하면 웹에서 방금 생성한 프로젝트를 볼 수 있게 됩니다.
이렇게 해서 간단하게 Aptana Studio 초기 사용 법을 알아 보았습니다.
* 본 포스팅은 이재근 등 4명 저 "Fast Web Service Build up: 웹 서비스를 쉽고 빠르게 구축하는 기술" 저서를 참고하여 작성하였습니다
'Web > WebPage' 카테고리의 다른 글
[WebPage] 2-3. Bootstrap, 쉽고 빠른 웹 프레임워크 - 웹 페이지 제작 강좌 (0) 2015.06.20 [WebPage] 2-3. Bootstrap, 쉽고 빠른 웹 프레임워크 - 웹 페이지 제작 강좌 (0) 2015.06.17 [WebPage] 2. CSS 요소(Elements) - 웹 페이지 제작 강좌 (0) 2015.06.17 [WebPage] 2. CSS 선택자(Selector) - 웹 페이지 제작 강좌 (0) 2015.06.16 [WebPage] 1. 개발 환경 설정 - 웹 페이지 제작 강좌 (0) 2015.06.16 [WebPage] 스마트폰 공기계로 서버 구축하기! (3) 2015.06.12
