풍선도움말...

호가계부를 시작페이지로

은행 카드 증권 보험 부동산

     
My 즐겨찾기 수정
[무료]  오늘의 운세  /  바이오리듬
여기는 회원님이 직접 등록하신
즐겨찾는 사이트가 출력됩니다.
컴퓨터와 관련있는 모든 팁을 공유합시다.

CSS 반응형 레이아웃 만들기

호가계부|2018-07-25 14:38:13|조회 : 12923
<!DOCTYPE>
<html>
<head>
<title> 반응형 레이아웃을 만들기 </title>

반응형 레이아웃을 만들기 위해서는 해상도에 종속되어야 하기때문에 다음을 html head 에 삽입한다.

<meta name="viewport" content="width=device-width, initial-scale=1">


<style>
body{margin:0%;}
.ho-header, .ho-sidebar, .ho-content, .ho-footer{border:solid 1px gray; margin: 2%; padding: 10px;}
/* sidebar 를 왼쪽에 위치 시킨다 */
.ho-sidebar{float:left; width:16%; margin-right:0%;}
/* content 를 오른쪽에 위치 시킨다 */
.ho-content{float:right; width:72%; margin-left:0%;}
/* 위의 float 속성 무시하고 block 으로 인식하도록 clear 속성 사용 */
.ho-footer{clear:both;}
/* 폭이 600 이하일때는 레이아웃 설정 */
@media (max-width: 600px) {
    /* 반응형 레이아웃을 float 속성을 none로하여 block 으로 설정
    폭을 auto 설정 */
    .ho-sidebar, .ho-content{float:none; width:auto; margin: 2%;}
}
</style>
</head>

<body>
<div id="" class="ho-header">
    <h1>반응형 레이아웃</h1>
</div>

<div id="" class="ho-sidebar">
    <h2>Sidebar</h2>
<ul>
<li>호가계부</li>
<li>간편장부</li>
<li>업무관리</li>
<li>세금계산서</li>
</ul>
</div>

<div id="" class="ho-content">
    <h2>Content</h2>
    <p>
2002년 말에 개발을 시작해서 2003년 4월에 수입/비용을 중심으로 기록, 관리하는 "웹가계부"로 서비스를 시작했습니다. 2004년 11월에 프로그램의 기능과 성능을 개선해서 개정판인 "호가계부"로 발전 했습니다. (자산/부채/수익/비용/카드사용/은행입출금 관리 및 음/양력 기념일, 매월행사, 매일메모 입력, 즐겨찾기 등록 관리) 2006년 2월에는 프로그램의 기능보다는 사용자의 편의를 위해서 로그인 페이지를 대신할 즐겨찾기 페이지를 메인페이지로 변경했습니다. 가계부를 시작페이지로 등록하셔서 인터넷 서핑이 보다 편리하고 안정적으로 이뤄지길 기대합니다. 2007년 4월에 기능도 약간 개선해서 홈페이지를 리뉴얼 했습니다. 그리고 회원님의 요청이나 필요가 발생하면 계속 버젼업 하고 있는 중입니다. 호 가계부의 최대 장점은 우선 무료라는 것이겠죠...! 그리고 다양하고 무한대의 보고서를 제공한다는 것입니다. 현재 제공하는 보고서 외에 다른 보고서를 원하신다면 보고서 양식만 제출해 주시면 보고서를 추가해 드린다는 겁니다.
그리고 추가로 회사에서만 사용하는 것이지만 세금계산서, 계산서, 입금표 양식도 서비스하고 있습니다.
</p>
</div>

<div id="" class="ho-footer">
    <p><b>http://www.hosoft.kr</b></p>
</div>


</body>
</html>




TAG : CSS  반응형  레이아웃 


번호 제             목 첨부 작 성 일 작성자 조회
114  

cURL 사용법

(6)
  2020-05-16 호가계부 73
113  

[Javascript] 숫자를 글자로 바꿔주는 자바스크립트

(1)
  2020-03-11 호가계부 331
112  

[엑셀] 셀을 클릭하면 설명 메시지를 팝업 시키는 방법

(1)
2019-11-07 호가계부 1321
111  

[Javascript] confirm 클릭 확인받기

  2019-10-09 호가계부 934
110  

[HTML][CSS] 페이지 넘김 및 프린터 출력 여백 설정

  2019-09-30 호가계부 1690
109  

[javascript] window.open으로 오픈한 자식창에서 부모창 태그 ...

  2019-09-27 호가계부 1293
108  

[jQuery] 익스플로러 외 날짜 입력박스 사용하기(input type dat...

2019-09-23 호가계부 3362
107  

[JavaScript] 스크롤할때 메뉴바 상단에 고정하기

(1)
  2019-09-11 호가계부 2331
106  

CSS3 미디어쿼리 @media 규칙 이해.

  2019-09-09 호가계부 4092
105  

[엑셀] 특정 자릿수 숫자 반올림

  2019-08-22 호가계부 1307
104  

[Android] Chrome Custom Tabs 시작하기

(2)
  2019-08-17 호가계부 2450
103  

[Android] 상태바 없애기

2019-08-13 호가계부 1568
102  

[Android] 타이틀바 없애기

2019-08-13 호가계부 1670
101  

[Android] ERR_CLEARTEXT_NOT_PERMITTED 웹뷰 호출 에러

  2019-08-11 호가계부 1963
100  

Chrome 크롬 강력 새로고침 단축키

  2019-07-15 호가계부 3178
99  

홈페이지(웹브라우저) 창 가로 세로 확인 방법

  2019-07-07 호가계부 3468
98  

Html CSS 수직으로 중앙 정렬 하는 방법

  2019-07-05 호가계부 2938
97  

textarea 엔터키 입력할때마다 입력박스 높이를 증가시키는 자바...

(1)
  2019-06-19 호가계부 3882
96  

javascript encodeURI -> php EUC-KR decode

(1)
  2019-06-18 호가계부 3073
95  

윈도우 창 단축키

  2019-06-07 호가계부 2976
처음으로 앞으로 | [1] 2 3 4 5 6 | 다음 마지막