본문 바로가기
프로그래밍 개발/CSS

HTML CSS (feat. jQuery) 간단한 포트폴리오 웹 사이트 코딩.

by Jinseok Kim 2020. 10. 27.
반응형

자동으로 배경화면이 슬라이더화 되는 웹 사이트.

 

 

 

 

 

html

<!DOCTYPE html>
<html>
   <head>
        <meta charset="utf-8">
       <link href="css/reset.css" rel="stylesheet" type="text/css"/>
       <link href="css/style.css" rel="stylesheet" type="text/css"/>
       <link rel="stylesheet" href="fontello-b76ac623/css/fontello.css"/>
       
       <script src="js/jquery.1.12.4.js" type="text/javascript"></script>
       <script src="plugins/bxslider/js/jquery.bxslider.js" type="text/javascript"></script>
       
       <script>
       $(document).ready(function()
      {$('.silder').bxSlider({
           controls: false,
           pager: false,
           auto: true
           
       });
           });
       </script>

        <title>html css 웹 사이트 실습</title>        
    </head>
    <body>
        <div class="overlay"></div>
        <div class="silder">
        <div class="background_01"></div>
             <div class="background_02"></div>
             <div class="background_03"></div>
        </div>
        <div class="contents">
            <div class="contents_name">Kim, jin seok</div>
            <div class="contents_job">I'm Web Programer</div>
            <div class="contents_sns">
            <ul class="contents_list">
                <li>
                    <a href="#"><i class="icon-facebook-squared"></i></a>
                </li>
                <li>
                    <a href="#"><i class=" icon-twitter-squared"></i></a>
                </li>
                <li>
                    <a href="#"><i class="icon-instagram"></i>
                    </a>
                </li>
                <li>
                    <a href="#"><i class="icon-blogger"></i>
                    </a>
                </li>              
            </ul>
            </div>
        </div>
    </body>
</html>

 

1.

<link>을 이용하여 reset.css을 지정해주고 따로 style.css 또한 따로 링크화 해주었다.

 

2.

fontello을 사용하기 위해 fontello.css 파일 또한 링크화 해주었다. 바로 body부분에 class로 demo에 나온 각각의 "아이콘 이름"을 지정해주면 바로 아이콘 효과가 적용된다.

 

3.

<script>을 이용하여 jquery의 정보를 받아오고 bxslider라는 jquery 플로그인 또한 받아왔다. 또 bxslider의 활용을 구체화하기 위해 옵션들을 설정해주었다. bxslider의 옵션들(controls: , pager: , auto:)로 인해 화면상의 배경화면들이 자동으로 슬라이드화 되며 배경화면을 넘기는 컨트롤창 또한 보이지 않게 하였다. 마지막으로 슬라이더화가 적용될 배경화면들을 자식화한다. 이 자식들 위의 부모에 <script>에서 미리 선언해준 "slider"을 class로 지정해주면 자식화된 배경화면들은 슬라이더효과가 적용된다.

참고 사이트 bxslider.com/options/ 

 

jQuery Content Slider | Responsive jQuery Slider | bxSlider

easing if using CSS: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'. If not using CSS: 'swing', 'linear' (see the above file for more options)

bxslider.com

4.

이제 font을 꾸미기 위해 contents라는 class을 지정하여 부모태그를 하나 만들었다. 그 아래의 자식태그들로 name, job, sns을 표시하기 위해 구성하였다. 그리고 각각에 주제별로 이름, 직업, sns의 종류를 <li>,<ul>태그를 이용하여 나열하였따.

 

5.

contents 부모의 자식태그인 sns에 링크화하기 위해 <a>태그를 적용시켰다. 테스트용이기에 아무 의미 없는 "#"로 링크를 설정하였다. 그리고 <i>태그와 fontello을 이용하여 페이스북, 트위터, 인스타, 블로그와 같은 실제 sns아이콘을 표시하였다.

 

 

 

 

CSS

html, body {
    width: 100%;
    height: 100%;
}
.silder, .bx-wrapper, .bx-viewport{
    width: 100%;
    height: 100%;
}
.background_01{
    width: 100%;
    height: 100%;
    background: url("../images/a.jpg") no-repeat;
    background-size: cover;
}
.background_02{
    width: 100%;
    height: 100%;
    background: url("../images/b.jpg") no-repeat;
    background-size: cover;
}
.background_03{
    width: 100%;
    height: 100%;
    background: url("../images/c.jpg") no-repeat;
    background-size: cover;
}
.overlay{
     width: 100%;
    height: 100%;
    background: url("../images/16.png");
    position: absolute;
    top: 0;
    z-index: 10;
    
}

.contents{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top:-100px;
    margin-left:-204px;
    z-index: 20;
    text-align: center;
    }
.contents_name{
    font-size: 64px; 
    font-weight:bold; color: white;
    margin-bottom: 25px;
}
.contents_job{
    font-size:25px;
    font-weight: bold;
    color: white;
    margin-bottom: 50px;
}
.contents_list{
    font-size:0;
}
.contents_list>li{
    display: inline-block;
    width: 52px;
    height: 52px;
   
    border: 1px solid white; 
    font-size:16px;
    border-radius: 50%;
    margin-right: 20px;
}
.contents_list>li:last-child{
     margin-right: 0;
}
.contents_list>li>a{
    color:white;
    line-height: 52px;
     
}

1.

.background 선택자를 이용하여 3개의 배경화면의 파일과 사이즈를 선언해주었다. 파일은 url로 선언해주었으며 no-repeat을 선언해주어 스크롤을 해도 배경화면은 고정하도록 하였다. 사이즈는 cover로 설정하여 배경화면의 이미지를 조금 손해보더라도 적절한 비율로 화면을 꽉차게 하였다.

 

2.

각각의 .background 선택자에 width와 height을 모두 100%선언하여 화면상에 활용하는 배경이미지의 크기를 모두 사용하도록 하였다.

※ 이때 주의할 점이 html부분에서의 background들은 class로 slider을 지정한 부모의 자식들이기에 background 자식들의 부모에도 width와 height 값들을 똑같이 선언해주어야 한다. 해주지 않는다면 더 큰 영향력을 가지고 있는 부모에 설정이 되어 있지 않아 자식 또한 똑같은 결과로 나타나며 결국 배경화면이 나타나지 않는 오류가 난다.

 

3.

  • .overlay 선택자의 선언들은 배경화면 전체를 어둑어둑한 그림자 효과를 뒤집어 씌어 주는 설정을 하게 해준다. 다른 배경화면들과 위치를 똑같이 해주기 위해서는 position을 absolute으로 선언하여 부모태그의 영향력에서 벗어나 절대적인 위치로 선언해준다. 그래야 배경화면 바로 위로 겹치게 할 수 있다.
  • position : absolute을 선언하여 배경화면들 위로 겹치게 하였지만 화면상으로는 .overlay 선택자가 선언한 효과들이 보이지 않는다. 왜냐하면 html 특성상 나중에 배치된 것은 화면 뒤로 감춰지기 때문에 z-index라는 선택자를 이용하면 배치 순서와 관련없이 임의로 순서를 조작할 수 있다. 배경화면이 기본이 "0"의 값이므로 z-index값을 10으로 선언해 주어 .overlay 선택자의 순서를 맨 앞으로 하여 배경화면 위로 깔려 화면상으로 보이도록 설정하였다.
  • .overlay 선택자 또한 배경화면과 똑같은 크기로 설절하기 위해 width와 height에 100%을 해준다.  ※ 이때  부모 자식 간의 영향으로 배경화면이 뜨지 않는 오류가 나는데  .bx-wrapper, .bx-viewport 또한 .slider 처럼 비슷한 경우로 width와 height 값들을 똑같이 선언해주어야 한다.

4. 

  • .contents 선택자의 선언들은 html에서 적어둔 이름, 직업, ,sns에 관한 텍스트 배치와 글꼴 스타일 색 등등에 효과를 주게 하였다.
  • 이때 .contents 또한 overlay 처럼 배경화면 위로 화면상에서 보여야 하므로 position : abolute와 z-index을 선언해주었다. 이때 .contents는 .overlay보다 더 우선순위로 즉, 제일 윗부분으로 보여야 하므로 z-index 값 또한 .overlay보다 더 높게 주었다. 
  • .contents 선택자의 글자들을 화면 가운데로 설정하는 공식이 있다. top:50%/ left:50% /margin-top: (실제 배치하고 싶은 부분의 화면 사이즈의 세로px의 반값) / margin-left: (실제 배치하고 싶은 부분의 화면 사이즈의 가로px의 반값)을 .contents 선택자 안에 선언해주면 글자들을 웹 화면의 정중앙에 위치시킬 수 있다. (웹 사이트의 f12을 누르면 CSS 스타일을 확인하는 구간에서 화면 사이즈의 가로 세로 px을 확인 할 수 있는 프로그램 창이 나온다.)

정중앙 가운데에 배치하고 싶으니 마우스 커서가 가리키는 곳이 배치하고 싶은 부분이라고 할 수 있다.

 

5.

.content_name, .content_job의 선택자들의 각각 설정하기 원하는 margin, color, font-size 등등을 선언해주었다.

 

 

6.

  • .content_list>li 선택자는 sns의 아이콘 주변을 꾸미는 경계선의 모양, 크기, 간격을 선언하였다. 이때 border-radius: 50%는 미리 border로 선언한 정육각형 박스 기준으로 박스 안에 원을 그리게 하는 선언이다. 50%의 수치가 박스안에 원형에 가까운 모양을 가지게 하는 가장 적절한 수치이다. 미리 border로 정육각형 박스를 만들지 않는다면 기준이 없어 원이 그려지지 않는다.
  • .content_list>li: last-child 선택자의 :last-child는 .content_list가 품고 있는 li의 자식들 중 가장 마지막에 배치하고 있는 li자식만을 선택하는 효과를 가지게 한다. 이때 :last-child을 사용하여 가장 마지막의 li의 margin-raght의 값을 0으로 설정한다. 이렇게 따로 선언해주어야 불필요한 margin 값을 없애 오류를 막을 수 있다.
  • .contents>li>a 선택자는 sns을 표시하는 아이콘 자체만을 선택하는 선택자이다. 이 선택자를 이용하여 아이콘의 위치를 적절한 위치로 위차하도록 선언하였다. 일단 아이콘의 색을 하얀색으로 바꾸었으며 이때 line-height : 52px을 선언해주면 아이콘이 원의 경계선 안의 가운데에 위치한다. 그 이유는 아이콘을 선택하고 있는 <a>태그는 li 태그와 contents 태그들의 자식태그이다. 이때 부모 태그인 li와 최상위 부모인 content에는 이미 text-align : center, height : 52px이 선언되어 <a>에 상속되어 있기 때문에 <a>에는 line-height : 52px을 선언해준다면 자동으로 정중앙 위치에 위치하도록 할 수 있다.

 

처음으로 지금까지 배운 html과 css를 활용하여 웹 페이를 만들어 보았다. 인프런의 웹 사이트 만들기 강의를 보면서 만들었지만 지금까지 배운 지식들을 어떻게 활용해서 웹 사이트를 제작해야 하는지 어느 정도의 흐름과 개념을 알게 되어 정말 간단한 웹 페이지 제작이었지만 무척 도움이 되는 프로젝트였다.

 

 

반응형

'프로그래밍 개발 > CSS' 카테고리의 다른 글

HTML+CSS+Media Query 반응형 클론 웹 사이트 제작.  (0) 2020.11.02
CSS 폰텔로 fontello 활용하기  (0) 2020.10.26
CSS 코드 경량화 minify  (0) 2020.10.26
CSS link와 import를 이용한 유지 보수  (0) 2020.10.26
CSS 그래픽 - background, filter, transform, transition  (0) 2020.10.22

관련글

댓글

티스토리툴바