[05] 간단한 웹페이지 작성, index.html, main.css

|


- 2015.03.13

 


1. iptables 동작 중지


# cd /etc/sysconfig
# rm -rf iptables
# iptables -F
# iptables -X


하면 재부팅 후에 다시 동작 안함

 

 


2. 간단한 웹 페이지 작성


1) <head>


설정(폰트 등), script

 


2) <body>


내용

 


3) bootstrap


이미 만들어진 코드를 이용
다운로드 하지 않고도 Bootstrap CDN 을 head만 붙여넣어도 된다.

 


* Tip - Linux 기본 환경 확인

# locale

 

 


# cd /var/www/html
# vi index.html
<!DOCTYPE html>
<html>
        <head>
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
                <link href="main.css" rel="stylesheet">
        </head>


        <body>
                <div class="nav">
                        <div class="container">
                                <ul class="pull-left">
                                        <li> <a href="#">home</a> </li>
                                        <li> <a href="#">sitemap</a> </li>
                                </ul>
                                <ul class="pull-right">
                                        <li> <a href="#">sign up</a> </li>
                                        <li> <a href="#">Log In</a> </li>
                                        <li> <a href="#">Help</a> </li>
                                </ul>
                        </div>
                </div>
                <div class="jumbotron">
                        <div class="container">
                                <h1> GFriend Fan Page's </h1>
                                <p> I Love Girl Friends ... </p>
                        </div>
                </div>
                <div class="learn-more">
                        <div class="container">
                                <div class="row">
                                <div class="col-md-4">
                                        <h3> member </h3>
                                        <p> Introduce member .. </p>
                                        <a href="#"> member profile </a>
                                </div>
                                <div class="col-md-4">
                                        <h3> schedule </h3>
                                        <p> blar blar blar ... </p>
                                        <a href="#"> more schedule </a>
                                </div>
                                <div class="col-md-4">
                                        <h3> empty </h3>
                                        <p> ..... </p>
                                </div>
                                </div>
                        </div>
                </div>
        </body>
</html>

 

 


# vi main.css
.nav a {
        color: gray;
        padding: 14px 10px;
        font-weight: bold;
        text-transform: uppercase;
}


.nav li {
        display: inline;
}

 


.jumbotron {
        height: 400px;
        background-image:url('https://pbs.twimg.com/profile_images/551756034780311552/Nvpilgd9_400x400.jpeg');
}


.jumbotron h1 {
        color: #ee82ee;
        font-size: 50px;
        font-family: Arial;
}


.jumbotron p {
        color: #000000;
        font-size: 20px;
        font-weight: bold;
}

 

 

 

And