page의 경우 dafault를 1값으로 처리해, 페이지가 없는 경우 항상 1페이지로 보냈다.
키워드의 경우, 스트링 파라미터의 ?kwd=kwd 형태로 오기 때문에 request.GET.get('kwd') 코드를 통해 kwd 변수로 받아주었다.
django orm을 통해 해당 키워드의 게시글은 Board.objects.filter(title__contains=kwd) 코드로 조회했다.
PAGESIZE=10# 한 페이지에 보여줄 게시글 수
deflist(request,page=1):# 키워드의 받기
kwd=request.GET.get('kwd')# 키워드가 없는 경우 모든 게시글 조회
ifkwdisNoneorkwdis''orkwd=='null':start=(page-1)*PAGESIZEboard_count=Board.objects.count()boardlist=Board.objects.all().order_by('-groupno','orderno')[start:start+PAGESIZE]# 키워드가 있는 경우 해당 키워드만 조회
else:start=(page-1)*PAGESIZEboard_count=Board.objects.filter(title__contains=kwd).count()boardlist=Board.objects.filter(title__contains=kwd).order_by('-groupno','orderno')[start:start+PAGESIZE]# template에 총 게시글 수와 현재 페이지 정보를 보내준다.
data={'boardlist':boardlist,'board_count':board_count,'current_page':page,'page':page,}# 검색어가 null인 경우 javascript에서 처리해줘야한다.
kwd=request.GET.get('kwd')ifkwdisNone:data['kwd']=json.dumps(kwd)else:data['kwd']=kwdreturnrender(request,'board/list.html',data)
검색어가 null인 경우, javascript에서 Python의 None값을 인식하지 못해
data['kwd'] = json.dumps(kwd) json형태로 변환해서 보내주었다.
다른 뷰에서 page, keyword 정보 유지하기
글 상세 조회 후, 답글 등록 후 등 여러 상황이 끝난 뒤 항상 기존의 page와 keyword정보를 갖고 제자리로 돌아가야 하는 처리
defmodify(request,page=1):...# 코드 생략 ...
data={'board':board,# page 추가
'page':page,}# 검색어 추가
kwd=request.GET.get('kwd')# 자바스크립트를 위한 처리
ifkwdisNone:data['kwd']=json.dumps(kwd)else:data['kwd']=kwdreturnHttpResponseRedirect('/board/'+board_id+'/'+str(page),data)
지정 방법
방법1. 4개의 방향을 각각 지정
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
방법2. 각 방향으로 한꺼번에 지정하는 단축형
margin: 10px 20px 30px 40px;
margin 값은 음수가 될 수 있다.
가장 자주쓰는 속성
마진은 컨텐츠의 테두리를 기준으로 외부공간 지정
패딩은 컨텐츠의 테두리를 기준으로 내부공간 지정
보통 모든 브라우저마다 마진 값이 기본적으로 지정되어 있다. 그리고 브라우저 마다 그 값이 다르다. 그래서 초기화 해주는 것이 페이지 레이아웃 잡을 때 편리하다.
* { margin:0; padding:0}
px(픽셀), %(퍼센트), em(엠) 이렇게 세가지 단위를 가장 많이 사용
margin 값은 음수가 될 수 있다.
ex)
padding-top:10px;padding-right:20px;padding-bottom:30px;padding-left:40px;/* shorten */padding:10px20px30px40px;/* 상하 좌우 같은 경우 */padding:10px20px10px20px;/* shorten */padding:10px20px;/* 모두 다 같은 경우 */padding:10px10px10px10px;/* shorten */padding:10px;/* 좌우만 같은 경우 */padding:50px10px80px10px;/* shorten */padding:50px10px80px;
margin음수값은 어떻게 응용할 수 있을까?
시간 지나면 점점 올라가 사라지는
<script>window.onload=function(){varmargin=0;varintervalId=setInterval(function(){varel=document.getElementById('box');/* console.log(el.style.marginTop) */margin-=10;el.style.marginTop=margin+"px"if(margin<-200){clearInterval(intervalId);}},100);}</script><body><divid='box'style='margin-top:0;'>
Hello World
</div></body>
width & height 지정
width 와 height 지정
width 와 height의 속성값은 %(퍼센트) 또는 px(픽셀 사용)
최대(최소) width 와 최대(최소) height 는 화면해상도에 맞는 페이지 작성할 때 유용
<style type="text/css">.box1{max-width:980px;min-width:800px;max-height:100px;min-height:50px;height:500px;overflow-y:hidden;overflow-y:scroll;overflow-y:auto;}</style><body><divclass="box1"><p>여름 장이란 애시당초에 글러서, 해는 아직 중천에 있건만 장판은 벌써 쓸쓸하고 더운 햇발이 벌려 놓은 전 휘장 밑으로 등줄기를 훅훅 볶는다. 마을 사람들은 거지반 돌아간 뒤요, 팔리지 못한 나무꾼패가 길거리에 궁싯거리고들 있으나 석유병이나 받고 고깃마리나 사면 족할 이 축들을 바라고 언제까지든지 버티고 있을 법은 없다. 춥춥스럽게 날아드는 파리떼도 장난꾼 각다귀들도 귀찮다. 얼금뱅이요 왼손잡이인 드팀전의 허생원은 기어코 동업의 조선달을 나꾸어 보았다.</p><p>"그만 거둘까?" </p><p>"잘 생각했네. 봉평 장에서 한번이나 흐붓하게 사본 일 있었을까. 내일 대화 장에서나 한몫 벌어야겠네." </p></div></body>
백그라운드 이미지를 사용하면 스타일만 제거했을 때 불필요한 이미지들이 대부분 사람짐 -> 프린트할 때 유용
표준 웹 페이지 는 백그라운드 이미지로 이미지를 대부분 표현한다.
지정 방법
방법1 :
{background: 속성값;}
[속성값]
color: 색상을 지정,
image: 배경 이미지 지정 URL(‘……’)
repeat: 배경이미지의 반복 repeat, no-repeat, repeat-x, repeat-y
position: 백그라운드 이미지의 위치 x,y 축을 기준으로 픽셀 값으로 지정 하거나 top, center, bottom, left, right 를 복합적, 또는 하나만 사용
<style>h1,h2,h3{color:#F60;text-decoration:underline;}</style><body><h1> Hello World </h1><h2> Hello World </h2><h3> Hello World </h3></body>
수도 선택자
선택자로 바로 사용되는 것이 아니고 선택자와 함께 사용되어 선택자를 보조 하는 역할
그 역할에 따라 몇가지가 정해져 있다.
:hover -> 마우스의 커서가 올라가 있는 상태
:active -> 마우스 커서를 클릭한 순간부터 놀기 직전까지 상태
:link -> 링크를 클릭하지 않은 그냥 링크만 되어 있는 상태
:visited -> 링크를 눌러서 방문한 후 상태
:before -> 문장이 시작되기 전
:after -> 문장이 끝난 다음
:hover, :active, :link, :visited 는 a 태그와 함께 링크를 데코레이션 할 때 많이 사용된다
코드
<style type="text/css">a:link{color:#F60;text-decoration:none;}a:hover{color:#06F;text-decoration:underline;}a:visited{color:#999;}a:active{color:#F00;text-decoration:line-through;}h1:before{content:url(images/bul1.gif);}h1:after{content:url(images/bul2.gif);}table{border-collapse:collapse;width:500px;}td{padding:10px;}tr:hover{background-color:#FC6;}</style><body><h1>제주글꼴 <strong>공개</strong> 되었습니다. </h1><p>원래는 2010년 5월 4일 공개된 글꼴이지만, <ahref="#">다시 여러분에게 안내해</a> 드리겠습니다. 첫번째로 제가 생각한 내용은 대한민국에서 가장 유명한 관광지인 <ahref="#">제주를 상징할만한 요소</a>는 많지만 디자인적으로 통일된 무언가가 있어야 하겠다. 두번째로 <ahref="#">공항부터 시작해서 관광객들이</a> 접하는 모든 곳에서 일관된 디자인의 통일성과 상징성이 필요하다. </p><tableborder="1"><tr><td>test1</td><td>test2</td><td>test3</td><td>test4</td></tr><tr><td>test1</td><td>test2</td><td>test3</td><td>test4</td></tr></table></body>
전체 선택자
말그대로 전체 엘리멘트를 뜻한다. (와일드 카드)
스타일이 적용되는 모든 엘리멘트에 일괄 적용하고자 할 때 사용한다.
모양 : * { margin:0; padding:0 } : 기본중에 기본!!!!!!!
ex)
브라우저 별로 모든 엘리멘트는 기본적인 margin값과 padding값을 가지고 있다. 그런데 브라우저별로 이 값이 틀리기 때문에 디폴트로 0로 만들고 시작하자 -> 기본중에 기본!!!!!!!으로 꼭 설정하자!!!!ㄴ
하위 선택자에 적용된 경우
#idname * 또는 .classname *
아이디가 idname 인 엘리멘트 내부의 모든 자식 엘리멘트에 해당 속성들이
적용될 것이다.
클래스 이름이 classname 인 엘리멘틀들의 내부의 모든 자식 엘리멘트들에게 해당 속성들이 적용될 것이다.
콩정의 개발 정리 블로그
