Hiio.com

  Portfolio 페이지  

- 이제 Portfolio 페이지를 완성할 차례입니다.

- Portfolio 페이지는 그동안 제가 해온 작업물들에 대한 소개와 이미지 그리고 링크 등이 들어 갑니다.

- 기본적인 레이아웃 작업을 우선적으로 진행하고, 이후에 JavaScript를 통해 기능을 추가해 보겠습니다.

- Portfolio 레이아웃 구성을 위한 작업물등중 3가지를 선택했습니다.

- 이 작업물들을 통해서 레이아웃을 구성했습니다.

- Portfolio 페이지의 타이틀이 가장 상단에 들어갑니다.

- 그 밑으로 이미지가 좌측에 텍스트들이 우측에 배치 됩니다.

- 텍스트는 작업물 제목 / 소개 / 링크로 구성되어있습니다.

- 이제 아래의 단계에 따라 기본적인 레이아웃을 구성해 보겠습니다.

  단계  

1. portfolio.html 태그 추가

2. portfolio 크기 및 위치 지정

3.portfolio title 위치와 크기 지정

4. content 크기와 위치 지정

5. image와 textcontent 크기와 위치 지정

6. textcontent 태그 추가 및 위치 크기 지정  

1. portfolio.html 태그 추가

- portfolio.html에 필요한 태그들을 추가 해주겠습니다.

- 먼저 id 가 portfolio 인 div태그를 추가해 줍니다.

{% extends 'layout.html' %}
{% block content %}
<div id="portfolio">
</div>
{% endblock %}

- 이 태그안에 컨텐츠들을 추가 해 주겠습니다.

- 먼저 #portfolio > .title을 추가 해 주겠습니다.

{% extends 'layout.html' %}
{% block content %}
<div id="portfolio">
    <div class="title">
        portfolio
    </div>
</div>
{% endblock %}

- div.title 하단에 이미지와 텍스트들이 들어갈 클래스가 content인 div 태그를 우선 1개 추가 해 줍니다.

{% extends 'layout.html' %}
{% block content %}
<div id="portfolio">
    <div class="title">
        portfolio
    </div>
    <div class="content">
        content
    </div>
</div>
{% endblock %}

- div.content안에 이미지가 들어갈 div.image와 div.textcontent 태그를 추가해 주겠습니다.

{% extends 'layout.html' %}
{% block content %}
<div id="portfolio">
    <div class="title">
        portfolio
    </div>
    <div class="content">
        content
        <div class="image">
            img
        </div>
        <div class="textcontent">
            text
        </div>
    </div>
</div>
{% endblock %}

- 기본적인 태그들을 추가해 주었습니다.

- 다음 단계를 진행하면서 필요한 태그들을 추가해 주겠습니다.

  2. portfolio크기 및 위치 지정  

- 먼저 div#portfolio 의 크기와 위치를 지정해 주겠습니다.

- div#portfolio에 border 값을 주어서 지금 지정된 위치와 크기를 확인합니다.

#portfolio{
    border:1px solid red;
}

- 현재 main의 가로 크기 만큼 div#portfolio 가로크기가 지정되어있고, 높이는 폰트 사이즈의 높이 합 만큼 지정되어있습니다.

- 가로 크기를 main가로크기 - 사이드바 가로크기 / 1440px - 200px = 1240px

- 이제 position 값으로 absolute를 지정해 주고 left값으로 200px을 지정해 줍니다.

#portfolio{
    position: absolute;
    left: 200px;
    width: 1240px;
    height: auto;
    border:1px solid red;
}

  3.portfolio title 위치와 크기 지정  

- Portfolio페이지의 제목에 해당하는 div.title의 위치와 크기를 지정해 주겠습니다.

- div.titile에 border 값을 지정해 주어서 정확한 위치와 크기를 확인해 보겠습니다.

- width 값으로 100%를 지정합니다.

- div.title안에는 Portfolio 라는 폰트가 지정되어 들어 갑니다.

- 폰트 사이즈와 폰트 스타일을 적용 시켜 주겠습니다.

- 폰트 사이즈는 60px / 스타일은 black font-weight은 900을 지정해 줍니다.

- Text-align 값으로 center를 지정해 줘서 가운데 정렬 시켜 줍니다.

#portfolio > .title{
    font-size: 60px;
    font-weight: 900;
    text-align: center;
    border: 1px solid red;
}

  4. content 크기와 위치 지정  

- div.content의 지금 크기와 위치를 확인합니다.

-

- 계획 레이아웃을 보면 title과 content , content들 사이에 간격이 50px만큼 존재랍니다.

- div.content에 margin-top 값으로 50px만큼 지정해 줍니다.

- width 값으로는 div.portfolio와 같은 값이 1240px을 지정해 줍니다.

#portfolio > .content{
    margin-top: 50px;
    width: 1240px;
    border: 1px solid red;    
}

- 간격이 생겼습니다.

  5. image와 textcontent 크기와 위치 지정  

- 이제 content 안에 들어가있는 div.image 와 div.textcontent를 진행해 보겠습니다.

- content에 들어가는 이미지와 텍스트의 크기는 각 포트폴리오 작업물마다 상이합니다.

- 그래서 이미지의 가로의 크기를 고정 시켜주고 text가 들어갈 곳의 가로크기를 고정시켜 줍니다.

- float값을 left로 지정합니다.

#portfolio > .content > .image {
    float: left;
    width: 500px;
    border: 1px solid red;
}

#portfolio > .content > .textcontent {
    float: left;
    width: 730px;
    border: 1px solid red;
}

- 우선은 border 크기가 있어 textcontent 의 가로 크기를 730px 로 지정해 주었습니다. 후에 740px로 변경합니다.

  6. textcontent 태그 추가 및 위치 크기 지정  

- 이제 textcontent 안에 들어갈 subcontents 들의 태그들을 추가 해 주겠습니다.

- 안에 들어갈 subcontents들은 작업물의 제목 - subtitle / 소개내용 -subdescription / 링크 주소 - sublink 입니다.

- div.textcontent 안에 추가 해 주겠습니다.

        <div class="textcontent">
            <div class="subtitle">
                subtitle
            </div>
            <div class="subdesciption">
                subdescription
            </div>
            <div class="sublink">
                sublink
            </div>
        </div>

- 먼저 div.subtitle의 크기와 위치를 지정해 주겠습니다.

- 폰트 사이즈는 35px / 폰트 스타일은 regular 400 입니다.

- 그리고 가운데 정렬 시켜 줍니다.

#portfolio > .content > .textcontent > .subtitle {
    font-size: 35px;
    font-weight: 400;
    text-align: center;
    border: 1px solid red;
}

- subtitle들을 보면 모두 검은색 바탕에 흰색 글자색을 가지고 있고 상하좌우 여백을 가지고 있습니다.

- subtile문구를 span으로 감싸주고 display값으로 inline-block으로 지정합니다.

-padding 값으로 10px을 지정하고 color 값을 white / background-color 값을 black으로 지정합니다.

            <div class="subtitle">
                <span>
                    subtitle
                </span>
            </div>

#portfolio > .content > .textcontent > .subtitle>span{
    padding: 10px;
    color: white;
    background-color: black;
    display: inline-block;
    border: 1px solid blue;
}

- 다음으로 subdescription 부분을 진행해 보겠습니다.

- 먼저 폰트에대한 정보를 확인합니다.

- 폰트 사이즈는 20px / 폰트 스타일은 thin 100 입니다.

#portfolio > .content > .textcontent > .subdescription {
    font-size: 20px;
    font-weight: 100;
    border: 1px solid red;
}

- subtitle 과 subdescription 사이에 간견이 40px만큼 존재합니다. margin-top 값으로 40px를 지정해 주겠습니다.

#portfolio > .content > .textcontent > .subdescription {
    font-size: 20px;
    font-weight: 100;
    margin-top: 40px;
    border: 1px solid red;
}

- 다시 subdecription을 가운데 정렬 시키고, span으로 감싸줍니다.

#portfolio > .content > .textcontent > .subdescription {
    font-size: 20px;
    font-weight: 100;
    margin-top: 40px;
    text-align: center;
    border: 1px solid red;
}

- 마지막으로 sublink를 진행해 주겠습니다.

- 폰트 사이즈는 25px 스타일은 Light 300 입니다.

- 폰트에 대한 값들을 지정해 주고 가운데 정렬 시킨후 span값으로 감싸줍니다.

#portfolio > .content > .textcontent > .sublink {
    font-size: 25px;
    font-weight: 300;
    margin-top: 30px;
    text-align: center;
    border: 1px solid red;
}

- subdescription 과 sublink의 span을 display : inline-block으로 지정한후 width 값으로 500px을 지정합니다.

- text-aligh을 left 시켜서 두곳을 정렬 시켜 줍니다.

#portfolio > .content > .textcontent > .subdescription > span {
    display: inline-block;
    width: 500px;
    text-align: left;
    border: 1px solid blue;
}

#portfolio > .content > .textcontent > .sublink > span {
    display: inline-block;
    width: 500px;
    text-align: left;
    border: 1px solid blue;
}

- 다음에는 contents들에 해당하는 이미지와 텍스트들을 삽입해 보겠습니다.

안녕하세요. 

이번 포스팅에서는 메인이미지 부분에 그림이나 사진을 넣어 보겠습니다.

보통 그림이나 사진을 넣기 위해서는 HTML 에서 img 태그를 사용하거나, CSS background 또는 background-image를 사용합니다.

1.img tag

우선 먼저 img 태그를 사용하여 이미지를 삽입해 보겠습니다.

1 2 3 4

<div id="main-image">mainimage     <img src="" alt=""> </div>

cs

기존에 div 태그안에 img 태그를 넣은 모습입니다. 

img 태그에는 여러가지 속성이 있습니다.

위에서는 src와 alt속성이 있는데요.

 

각 속성은

 

src : 이미지경로

alt : 이미지묘사 내용

 

입니다.

 

여기서 위에서 보이는 이미지를 한번 넣어 보겠습니다.

 

 

1

<img src="/img/%EB%85%B9%EC%A7%80%EC%A7%80%EC%97%AD.jpg" alt="메인이미지">

cs

 

src에 이미지 경로를 설정해 주었습니다.

 

 

위와같이 이미지가 들어갑니다.

하지만 width값과 height값이 없기 때문에 이미지 파일의 원래 크기대로 들어간 모습입니다.

width와 height값은 img태그 내에서도 지정해 줄수 있지만, 저는 css를 통해서 해봤습니다.

1 2 3

#main-image img {     width: 100%; }

cs

width값만 100%로 설정했을때 이미자가 가로에 꽉차게 들어가게 되었습니다. 이떄 height는 비율에 맞춰 자동으로 값이 설정 되었기때문에 main-image부분을 빠져나와 footer부분을 가리게 됩니다.

 

height 값을 같이 주게 되면, main-image크기에 맞게 비율이 조정 되어 더이상 footer를 가리지 않게 되지만, 이미지의 크기가 달라져 원래의 비율에 맞지 않게 됩니다. 

2. CSS / background

이번에는 CSS / background를 통해서 이미지를 삽입해 보겠습니다.

background에 이미지를 넣을 때는 2가지를 사용할 수 있습니다. 

background 코드에 url 속성을 주거나 

따로

background-img에 url을 이용하여 이미지를 넣을 수 있습니다.

이미지를 넣고 나서는 background-repeat / background-size / background-position...를

통해서 이미지의 반복이나 크기,위치등을 조절 할수 있습니다.

제가 원하는대로 main-image안에 이미지가 비율에 맞게 들어간 모습입니다.

하지만 원래 이미지크기와 main-image의 크기가 다르다면 이미지가 잘릴수도 있습니다.

다음에는 메인이미지에 animate효과를 적용해 보도록 하겠습니다.

안녕하세요.

이번 포스팅에서는 Sidebar에 들어갈 Menu를 만들어 보겠습니다.

사용된 태그는 ul, li 입니다.

보시는 바와 같이 sidebar에 메뉴를 넣어 주기 위해서 id가 sidebar인 div에 ul,li 태그는 삽입해 줍니다.

<ul>

	<li></li>
	<li></li>
	<li></li>
	<li></li>

</ul>

각 ul,li 태그들 사이에 필요한 텍스트를 적어 줍니다. 

저는 ul tag에는 menu, 각 li 태그들에는 첫 페이지로 돌아갈수 있는 home, 저의 웹사이트를 소개하는 about us, 포트폴리오 gallary, 그리고 저에게 연락할수 있는 contact us를 만들었습니다.

필요한 페이지를 우선 대력적으로 생각하여 필요한 만큰 li갯수를 정해 만들어 주면 됩니다.

<ul>Menu

	<li>Home</li>
	<li>About Us</li>
	<li>Gallery</li>
	<li>Contact Us</li>

</ul>

각 텍스트들을 삽입후 css로 폰트 사이즈와 위치를 정해 줍니다.

#sidebar {
    position: absolute;
    background-color: rgba( 255, 255, 255, 0.5 );
    height: 100%;
    width: 15%;
    z-index: 2;
}

#sidebar > ul {
    margin-top: 100px;
}

#sidebar > ul > span {
    display: block;
    margin-bottom: 50px;
}

#sidebar > ul > li {
    font-size: 30px;
    padding: 10px;
}

li 텍스트들은 menu 폰트 사이즈 보다 작게 했습니다.

저번 포스팅에서 sidebar의 opacity값은 0.5로 하여서 main-image가 흐릿하게 보이도록 하였습니다.

하지만 opacity값은 배경뿐만아니라 폰트도 함께 불투명해지기 때문에 sidebar에 opcity값을 빼고,

background-color값을 rgba로 바꾸면서 함께 opacity값을 주면 뒷 배경만 불투명해지고 폰트들은 변하지 않습니다.

다음시간에는 추가적으로 header부분을 만들어서 title을 넣어 보겠습니다.

안녕하세요. 

저번시간에 이어서 제가 구상한 Layout을 HTML과 CSS를 가지고 만들어 보겠습니다.

그리 어렵지 않고, 복잡한 구조가 아니기 때문에 간단한 코딩만으로도 Layout을 구성할수 있었습니다. 

1. HTML - index.

<body>
    <div id="container">
        <div id="sidebar">sidebar</div>
        <div id="main-image">mainimage
            </div>

    </div>
    <div id="footer">footer</div>

</body>

먼저 HTML 코드 입니다. 

크게 구성은 main-image와 sidebar를 감싸고 있는 container와 footer로 나뉘어 있습니다. 

각 div는 id속성을 사용하였습니다. 

2.CSS - style.css

#container {
    position: relative;
    height: 100%;
    width: 100%;
    text-align: center;
    font-size: 50px;
}

#sidebar {
    position: absolute;
    background-color: #44d1da;
    height: 100%;
    width: 15%;
    opacity: 0.5;
    z-index: 2;
}



#main-image {
    height: 100%;
    width: 100%;
    background-color: #78bcc1;
}


#footer {
    text-align: center;
    width: 100%;
    background-color: #0a696f;
    font-size: 50px;

}

css 부분입니다.

HTML의 id 속성은 css에서 #을 사용하여 선택합니다. 

width값과 height값을 %로 주면서 브라우서 비율변화과 다양한 기기들의 뷰어들에 맞게 대응 할수 있겠끔 하고 싶었습니다. 

처음 시작할때 부터 %를 사용함으로서 나중에 있을 media부분에서의 복잡한 과정을 쉽게 하고 싶었습니다.

창 전체 부분을 꽉 채우기 위해서 main image의 width를 100%

sidebar같은 경우 오른쪽에서 15%정도의 크기를 차지 합니다. 

나중에는 오른쪽으로 밀려 나있다가 버튼 클릭시 나타나게끔 할 생각입니다. 

이때 전체 이미지의 비율에 영향을 주지 않기 위해서 

#container 에 position:relative 를 #sidebar에는 position:absolute를 이용하여서 각 div가 겹치게끔 하였습니다. 

이때 sidebar뒤로 main-image부분이 흐릿하게 보이도로 opacity값을 주었습니다. 

다음 포스팅에서는 sidebar에 들어갈 menu 부분을 만들어 보겠습니다.

안녕하세요.

이번 포스팅에는 저번에 참고했던 템플릿을 통해 저만의 웹사이트 Layout

사이트에서 보여지는 Home 또는 제일 첫 화면 페이지의 layout을 그려보겠습니다.

1. 메인 이미지와 푸터 (Main image & footer)

우선은 제 웹 사이트의 가장 중요한 것중 하나는 Image가 가장 큰 비율을 차지 하는 것입니다. 전체 화면 처럼 이미지가 크게 보이고, 앞으로 업로드 하게 될 포트폴리오 자료들의 제일 첫 이미지들이 나타나게 하는 것입니다.

위의 레이아웃 처럼 전체적으로 메인이미지가 오고 , 그 및으로는 Footer부분이 좌측 으로는 toggle을 이용한 side bar가 숨겨져 있다가 나타나는 것입니다. 

Side bar는 opacity값을 주어 그 뒤로도 메인이미지와 다른 컨텐츠들이 보이게끔 하는 것입니다.

이런 Layout에는 Title이 좌측 상단에 오게 되고, Sidebar에는 Navigation역할을 하게될 Menu 부분이 Main image위로는 간략한 설명이 들어가는 Article 과 contents가 배치됩니다.

그럼 다음 시간에는 이제 코딩을 통해서 웹사이트에 구현해보겠습니다.