728x90
728x90

무료로 사용할수 있는 템플릿들을 소개합니다.

 

1. ARCH4

 갤러리를 중심으로 자신만의 이미지들을 링크해서 만들수 있는 템플릿입니다. 

 건축과 관련된것이 아니더라도 다양한 이미지 포트폴리오들을 만들수 있을것 같습니다. 

 첫 페이지에 나와있는 텍스트를 따라 보이는 이미지가 인상적입니다.

 

https://www.free-css.com/free-css-templates/page246/arch4

 

Arch4 Free Website Template | Free CSS Templates | Free CSS

 

www.free-css.com

 

2.marble

 

오른쪽 navigation - sidebar와 함께 큰 main image를 첫페이지에 보여줄수 있는 구성입니다.

모던하면서도 베이직한 웹 템플릿입니다. 심플한 디자인을 좋아하시는 분들이 사용해 보시면 좋을것 같습니다.

 

https://www.free-css.com/free-css-templates/page244/marble

 

Marble Free Website Template | Free CSS Templates | Free CSS

 

www.free-css.com

 

3.Black

Black 이라는 이름에 맞게 전체적인 background 가 검은색인 1page 웹 템플릿 입니다.

 

하나의 페이지로 스크롤을 내리면서 자신의 작품들을 보여줄수 있는 포트폴이로를 만들기에 좋은것같습니다.

 

https://www.free-css.com/free-css-templates/page239/black

 

Black Free Website Template | Free CSS Templates | Free CSS

 

www.free-css.com

 

728x90

'Web > template' 카테고리의 다른 글

[Web] 무료 이미지 사이트 모음 - Free image website ##1  (0) 2020.10.12
728x90

 

안녕하세요.

이번 포스팅에서는 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을 넣어 보겠습니다.

728x90

'Web' 카테고리의 다른 글

8. <Portfolio> 웹 사이트 제작 - Main image 삽입 / img tag / background  (0) 2019.11.23
6. <Portfolio> 웹 사이트 제작 - Header  (0) 2019.11.09
4. <Portfolio> 웹 사이트 제작 - Layout.2  (0) 2019.11.07
3. <Portfolio> 웹 사이트 제작 - Layout  (0) 2019.11.06
2. <포트폴리오> 웹 사이트 제작 - Reference _Bato - 템플릿  (0) 2019.11.05
728x90

안녕하세요. 

저번시간에 이어서 제가 구상한 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 부분을 만들어 보겠습니다.

728x90

'Web' 카테고리의 다른 글

6. <Portfolio> 웹 사이트 제작 - Header  (0) 2019.11.09
5. <Portfolio> 웹 사이트 제작 - Layout.3_Menu  (0) 2019.11.08
3. <Portfolio> 웹 사이트 제작 - Layout  (0) 2019.11.06
2. <포트폴리오> 웹 사이트 제작 - Reference _Bato - 템플릿  (0) 2019.11.05
1. <포트폴리오> 웹 사이트 제작 - Reference _무료 웹 템플릿 사이트  (0) 2019.11.04
728x90

안녕하세요.

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

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

 

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

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

 

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

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

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

 

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

 

728x90

'Web' 카테고리의 다른 글

5. <Portfolio> 웹 사이트 제작 - Layout.3_Menu  (0) 2019.11.08
4. <Portfolio> 웹 사이트 제작 - Layout.2  (0) 2019.11.07
2. <포트폴리오> 웹 사이트 제작 - Reference _Bato - 템플릿  (0) 2019.11.05
1. <포트폴리오> 웹 사이트 제작 - Reference _무료 웹 템플릿 사이트  (0) 2019.11.04
0. <포트폴리오> 웹 사이트 제작 - 시작  (0) 2019.11.03
728x90

 안녕하세요.

 지난번에 포스팅했던

1. <포트폴리오> 웹 사이트 제작 - Reference _무료 웹 템플릿 사이트

https://hiio.tistory.com/6

 

1. <포트폴리오> 웹 사이트 제작 - Reference _무료 웹 템플릿 사이트

<포트폴리오>형식의 웹사이트를 제작하기 위해서 첫 단계로 기존의 웹사이트 템플릿을 참고 하기로 했다. 이미 많은 HTML + CSS 를 사용하여 디자인하고 제작되어 있는 템플릿들을 살펴보고, 나만의 사이트는 레이..

hiio.tistory.com

이 사이트들 중에서 고민한다가 제가 원하는 디자인의 방향성과 가장 근접한 템플릿을 골라 봤습니다. 

 

- Bato - 

바로 이 템플릿인데요. 

 

가장 심플하면서도 제가 원하는 이미지를 잘 보여주고, 이러한 이미지들을 갤러리 형식으로 보여줄수 있다는 것입니다. 

그럼 구성 방식을 차례대로 한번 살펴 보겠습니다.

 

1. Main Image - 메인 이미지

보시는 것과 같이 메인이미지가 페이지의 좌측, 절반 정도 크기로 배치 되어있습니다.

메인 이미지는 가장 눈에 띄고 크게 보여 주는 것이 중요하다고 생각합니다.

물론 크기 조절을 해서 비율을 늘릴수도 있을 것 같습니다.

 

2.Title - 제목

좌측상단에 위치하고 있는 웹사이트 타이틀입니다.

저는 타이틀이 중앙에 위치하는 것보다는 좌측이나 우측 그리고 간단한 디자인을 하려고 합니다.

앞서 말씀드린것 과 같이 포트폴리오에서는 이미지가 가장 중요하다고 생각하기 때문에 이를 방해하지 않는 정도의 적당한 크기가 좋을 것 같습니다.

 

3. Navigation Menu - 메뉴

기존의 웹사이트 들이 많은 카테고리를 담고 있고 이런 페이지 링크들을 안내해주는 메뉴들이 PC에서는 중앙이나 사이드 바형식으로 많이 들 배치가 되어있습니다. 

제목과 마찬가지로 첫페이지 그리고 이미지를 방해하지않기 위해서 토글 형식의 버튼을 사용하여 필요할때만 나타나고 사라지게 하는 Nav 구성이 필요할 것 같습니다.

 

 토글버튼을 클릭시 좌측 사이드바가 나타나는 형식입니다. 

 제일 위에는 검색 창 - 메뉴 -  갤러리 순으로 배열이 되어있습니다. 

 갤러리 부분 같은 경우에는 작은 이미지들을 보여 주소 클릭시 그 페이지로 이동을 할 수 있게끔 하는 부분이 좋습니다.

 

대략적인 참고 템플릿의 기본 구조와 레이아웃을 살펴 보았습니다.

이 점들을 토대로 다음에는 저만의 레이아웃을 구성해 보겠습니다.

728x90

'Web' 카테고리의 다른 글

5. <Portfolio> 웹 사이트 제작 - Layout.3_Menu  (0) 2019.11.08
4. <Portfolio> 웹 사이트 제작 - Layout.2  (0) 2019.11.07
3. <Portfolio> 웹 사이트 제작 - Layout  (0) 2019.11.06
1. <포트폴리오> 웹 사이트 제작 - Reference _무료 웹 템플릿 사이트  (0) 2019.11.04
0. <포트폴리오> 웹 사이트 제작 - 시작  (0) 2019.11.03
728x90
728x90

+ Recent posts

티스토리툴바