무료 웹 사이트 제작 도구 - WIX
WIX는 무료로 홈페이지를 제작할 수 있는 솔루션을 제공하고 있습니다.
무엇보다 다양한 템플릿 들을 제공하여서 깔끔하면서도 멋진 디자인의 템플릿들을 무료로 사용하여 홈페이지를 제작할 수 있다는 장점이 있습니다.
WIX를 이용해서 웹사이트를 만드는 방법부터 기본적인 템플릿을 수정하여 자기만의 웹사이트를 간단하게 만들어 보겠습니다.
| [Wix] 1. Wix Web PortFolio - 윅스 시작하기 (0) | 2020.10.06 |
|---|
안녕하세요.
이번 포스팅에서는 저번 시간에 만들었던 Text와 안내 지시선을 브라우저 크기 변화에 반응하여 원하는 위치에 계속 적으로 고정 시켜 보겠습니다.
제가 사용하고 있는 웹 브라우저의 가로와 세로 크기는 각각 1920*850입니다.
창을 최대화하여 위치를 잡아주었을 경우네는 창이 줄어 들면 처음 잡아 놨던 위치가 변하게 되어 지시선의 끝 부분이 제가 원하는 위치에 있지 않게 됩니다.
그래서 Jquery를 통해서 각 지시선이 반응하도록 만들어 줍니다.
function spanimgPose(selector, x, y) {
var iwidth = $(window).width();
var mainimg = $('.mainimg[data="' + selector + '"]');
var leftT = (1920 - iwidth);
var leftLength = x - leftT / 2;
mainimg.offset({
left: leftLength
});
var mainimgleft = mainimg.offset().left;
// img left
var iheight = $(window).height();
var TopT = (850 - iheight);
var TopLength = y - TopT / 2;
mainimg.offset({
top: TopLength
});
var mainimgTop = mainimg.offset().top; // img top
};먼저 함수를 만들어서 각 parameter를 정해줍니다.
저는 안내 Text의 selector와 초기 위치 x,y좌표값을 param로 하였습니다.
창의 가로와 세로 크기 값을 변수에 담아 줍니다. 그리고 창의 변화 값은 제 브라우저의 최대 크기에서 변화 후 창크기 값의 창이 를 변수에 담아 줍니다.
브라우저가 작아 지거나 커질떄는 왼쪽과 오른쪽이 동시에 변화 하므로 2로 나누어 주면 한쪽의 변화 값을 알 수 있습니다.
이 변화값만큼 안내text가 이동하면 창크기가 변화 하더라도 제가 원하는 위치에 계속적으로 고정시킬수 있습니다.
하지만, 창 크기를 실시간으로 변화 시킬때에는 대응을 하지 않게 됩니다.
그래서 이때는
window.resize()명령어를 사용하여 이 안에 제가 만들어 놓은 함수를 넣어 줍니다.
spanimgPose("children", 540, 430);
spanimgPose("acha", 1080, 200);
function spanimgPose(selector, x, y) {
var iwidth = $(window).width();
var mainimg = $('.mainimg[data="' + selector + '"]');
var leftT = (1920 - iwidth);
var leftLength = x - leftT / 2;
mainimg.offset({
left: leftLength
});
var mainimgleft = mainimg.offset().left;
// img left
var iheight = $(window).height();
var TopT = (850 - iheight);
var TopLength = y - TopT / 2;
mainimg.offset({
top: TopLength
});
var mainimgTop = mainimg.offset().top; // img top
};
$(window).resize(function () {
spanimgPose("children", 540, 430);
spanimgPose("acha", 1080, 200);
});이렇게 되면 창크기가 변화 하더라도 안내 Text와 지시선은 제가 원하는 위치에 고정되어서 원하는 곳을 가르키게 됩니다.
다음 포스팅에서는 메인 이미지를 슬라이드 이미지 갤러리로 만들어 보겠습니다.
| [CSS] Css 초기화 / Reset.css (0) | 2023.02.27 |
|---|---|
| 9. <Portfolio> 웹 사이트 제작 - Main-Image / CSS Animation (0) | 2019.11.24 |
| 8. <Portfolio> 웹 사이트 제작 - Main image 삽입 / img tag / background (0) | 2019.11.23 |
| 6. <Portfolio> 웹 사이트 제작 - Header (0) | 2019.11.09 |
| 5. <Portfolio> 웹 사이트 제작 - Layout.3_Menu (0) | 2019.11.08 |
안녕하세요.
이번 포스팅에서는 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을 넣어 보겠습니다.
| 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 |
안녕하세요.
저번시간에 이어서 제가 구상한 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 부분을 만들어 보겠습니다.
| 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 |
안녕하세요.
이번 포스팅에는 저번에 참고했던 템플릿을 통해 저만의 웹사이트 Layout
사이트에서 보여지는 Home 또는 제일 첫 화면 페이지의 layout을 그려보겠습니다.
우선은 제 웹 사이트의 가장 중요한 것중 하나는 Image가 가장 큰 비율을 차지 하는 것입니다. 전체 화면 처럼 이미지가 크게 보이고, 앞으로 업로드 하게 될 포트폴리오 자료들의 제일 첫 이미지들이 나타나게 하는 것입니다.
위의 레이아웃 처럼 전체적으로 메인이미지가 오고 , 그 및으로는 Footer부분이 좌측 으로는 toggle을 이용한 side bar가 숨겨져 있다가 나타나는 것입니다.
Side bar는 opacity값을 주어 그 뒤로도 메인이미지와 다른 컨텐츠들이 보이게끔 하는 것입니다.
이런 Layout에는 Title이 좌측 상단에 오게 되고, Sidebar에는 Navigation역할을 하게될 Menu 부분이 Main image위로는 간략한 설명이 들어가는 Article 과 contents가 배치됩니다.
그럼 다음 시간에는 이제 코딩을 통해서 웹사이트에 구현해보겠습니다.
| 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 |