부트스트랩의 가장 큰 장점은 반응형 사이트를 만들기 쉽다는 것이다.

그리고 반응형 사이트의 핵심에 대해 알아보려고 한다.

 

 

 

 

Container는 무언가를 담기 위해 사용하는 가장 기본적인 layout element이다. 공간이라고 생각하면 될 것 같다.

Container 안의 물건들이 어떻게 배치될 지 여러 가지 설정을 넣어줄 수 있다.

 

가장 기본적으로, Container 자체의 크기가 화면의 크기에 따라 바뀌도록 할 수 있는데 반응형 웹 사이트의 근본이 된다.

 

위 사진이 그 설명인데, 예를 들어 container-lg class로 생성하면 Large (992 px) 미만일 때에는 픽셀 크기 자체가 되고, 이상일 때에는 960px 크기의 Container가 된다.

 

https://getbootstrap.com/docs/4.4/layout/overview/

 

Overview

Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.

getbootstrap.com

자세한 설명은 위 링크에서 확인할 수 있다.

 

https://getbootstrap.com/docs/4.4/layout/grid/

 

Grid system

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

getbootstrap.com

위 링크와 사진은 또 다른 기본 시스템인 Grid System에 관한 설명이다.

 

기본적으로 각각의 Container는 12개의 Columns으로 이루어져 있다. 그런데 항상 4개의 Column (좌우의 1/3)을 이용하여 어떠한 요소 (예를 들면 이미지)를 구성한다면, 모바일의 경우 너무 작고 데스크탑의 경우 너무 크게 보일 것이다. 따라서 픽셀 수에 따라 Column의 개수를 조절할 수 있다. 그 외에도 여러 가지 반응형 + 배치하는 테크닉들이 링크에 설명되어 있으니 읽어보면 좋을 것 같다.

 

 

lockcept.kr 개인 웹 사이트를 가지고 있는데

디자인이 텍스트 나열 밖에 없어서 Bootstrap 을 적용해보고자 공부하고 글을 작성하게 되었다.

 

물론 Bootstrap 을 이용한 여러 무료 템플릿을 적용하여도 되지만, 디자인을 본격적으로 적용할 마음은 없었고 공부하며 하자는 마인드로 최소한의 공부 후 직접 적용하게 되었다.

 

부트스트랩은 트위터에서 시작한 오픈소스 프론트엔드 라이브러리로, 웹 디자인의 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 JS로 만들어 놓은 일종의 템플릿이라고 보면 된다.

 

웹을 만들 때에 디자인 하느라 소요되는 많은 시간들을 매우 짧게 만들어주었다.

추가로, 반응형 웹 사이트 (모바일 / PC 등 보는 크기에 따라 다르게 적용되는)를 만들 수 있다는 큰 장점이 있다.

 

 

https://getbootstrap.com/

 

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

 

 

부트스트랩 페이지에 들어가서 코드를 다운받아 주거나, 복사하여 본인의 html에 붙여넣어준다.

 

 

다운 받지 않으면 커스터마이징은 안되지만 일단 복사하여 사용하였다.

 

 

이 부분을 복사하여 넣어주면 된다.

 

 

사이트의 좌측을 보면 여러가지 components가 있는데 필요한 부분을 공부하여 사용할 수 있다.

 

 

일단 Bootstrap을 적용하여 조금이라도 사람다운 사이트를 만들어 보았다.

 

 

이렇게 모바일에서보면 형태가 달라지는 반응형 사이트를 만들기에 좋다.

저번에 포스팅한 도메인 구매 및 웹호스팅에 이어 기본적인 html 문법에 대해 공부하였다.

 

닷홈 도메인 구매 및 웹 호스팅 (클릭)

 

웹 호스팅 및 웹 개발 시작하기

웹 개발 공부를 하기 위해서 웹 호스팅을 찾아보았다. 그 중 호스팅 전문 업체인 dothome에서 도메인 구매시 할인 및 무제한 웹호스팅 제공 이벤트를 해서 dothome에서 도메인을 구매하였다. 1년 구매시 13500원..

blog.lockcept.kr

간단하게 플레이하는 게임인 리그오브레전드 관련 자료를 이용하여 구현해보았다.

웹의 모습과 코드는 다음과 같다.

 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
 
<html>
<head>
    <title>록셉은 오공을 잘할까?</title>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="../lockcept2_white-alpha.ico">
</head>
<body>
    <div>
        <a href="https://www.op.gg/summoner/userName=%EB%A1%9D%EC%85%89"><img src ="opgg.png"></a> <br>
        <img src="https://ddragon.leagueoflegends.com/cdn/9.18.1/img/champion/MonkeyKing.png" /> <p> this is wukong </p>
        <img src="https://ddragon.leagueoflegends.com/cdn/4.18.1/img/champion/MonkeyKing.png" /> <p> this was wukong </p>
        <div style="position: relative; max-width: 100%; padding-bottom: 56.25%; height: 0;">
            <iframe width="320" height="180" src="https://www.youtube.com/embed/k1zAhC5aeQs" frameborder="0" allowfullscreen="" style="position: absolute;  top: 0; left: 0; width: 100%; height: 100%;"></iframe>            
        </div>
    </div>
</body>
</html>
cs

 

1. 사진 넣기

<img src="이미지경로" alt="이미지설명" height="세로길이" width ="가로길이">

이미지 경로에는 opgg.png와 같이 상대경로에 존재하는 서버 파일이나, https:// ~~ 와 같이 웹상의 사진 모두 사용할 수 있다.

 

2. 링크 걸기

html의 링크는 <a> 태그로 만든다. 

기본적으로 href 속성의 값에 이동할 위치를 넣는다. 예를 들면,

<a href="lockcept.kr> 홈페이지 </a>

 

코드의 예시와 같이 텍스트가 아닌 이미지에 링크를 걸 수도 있다.

 

그 외에 자주 사용하는 속성으로는 target, download가 있다.

target은 링크를 어떻게 열지 정하는 속성인데, 새 탭으로 열게 하거나 현재 페이지에서 열게 하는 등의 선택지가 있다.

download는 링크를 다운로드할 지 결정할 수 있다.

 

3.유튜브 영상 넣기

유튜브에서 소스코드 첨부를 눌러 복사 붙여넣기 하면 된다.

이 때에, 추가적으로 div를 이용하여 반응형이 되게끔 조절하였다.

위에서 사용한 속성 외에도 다양한 속성이 있으니 잘 사용하면 좋겠다.

 

웹 개발 공부를 하기 위해서 웹 호스팅을 찾아보았다.

 

 

 

그 중 호스팅 전문 업체인 dothome에서 도메인 구매시 할인 및 무제한 웹호스팅 제공 이벤트를 해서 dothome에서 도메인을 구매하였다.

 

 

1년 구매시 13500원이다.

 

 

lockcept.kr 을 구매하였기 때문에 지금은 등록상태라고 뜬다.

22000원이라고 뜨지만 구매시 할인 받아서 13500원에 구매하였다.

 

 

닷홈 외에도 도메인 구매는 Gabia라는 업체도 크다.

 

 

닷홈에서 도메인 구매시 위의 '무제한 웹호스팅 FREE' 상품을 이용할 수 있다.

하지만 SSH 사용 불가능하고, 404 페이지 설정이 안되는 등의 불편함이 있다.

 

 

따라서 나는 FileZila라는 프로그램을 통해 웹 개발을 시작하였다.

닷홈에서 기본적으로 구축되어있는 여러 파일들이 있는데, html 폴더를 베이스로 두고 파일을 업로드 하면 된다.

 

백엔드 언어는 php를 지원한다.

 

공부 중인 lockcept.kr 의 소스는

https://github.com/lockcept/lockcept.kr

 

lockcept/lockcept.kr

Contribute to lockcept/lockcept.kr development by creating an account on GitHub.

github.com

에서 공개하고 있다.

+ Recent posts