Introduction

A web page is a collection of HTML elements. CSS can control the design of an element, like its color, font, and spacing.

CSS can also control where an element sits on a page to create a page layout.

For example, the layout to the right has a top navigation bar, a large feature element, a grid of images, and then three pieces of supporting content.

What CSS properties are available to move elements around and create page layouts? Here are three common CSS properties.



display

CSS treats HTML elements like boxes. A box can be "block" or "inline".

  • Block elements display on a new line (e.g.,h1, p, ul, li).

  • Inline elements display on the same line as their neighboring elements (e.g., img, a)

It's possible to change whether a box is block or inline by using the display property.







position

The position property is used to move an HTML element to a precise position on the page.

By setting position: relative, you can use the CSS properties top, left, bottom, andright to shift an element away from where it would have normally appeared on the page.



float

The float property moves an element to the far left or far right of the page.

For example, setting float: right pulls an element to the far right side of the page, and the surrounding text wraps around it.



반응형
저작자표시 비영리 변경금지

'Frontend' 카테고리의 다른 글

make an Interactive Website 3 JavaScript  (0) 2014.08.22
make an Interactive Website 2 Jquery coding  (0) 2014.08.22
make an Interactive Website 1  (0) 2014.08.21
make website 3 coding  (0) 2014.08.21
make web site 2 bootstrap  (0) 2014.08.21

margin

The properties margin-left, andmargin-right are available to set themargin on either side of an HTML element. If one of these properties is set to auto, then it will take as much as possible.

To move the HTML element to the far left of the screen, use margin-right: auto. This will maximize the amount of space there is on the right side margin, pushing the element to the far left.

To center an element, setmargin-right: auto and margin-left: auto. The margin to the left and right will be equal and the element will be centered.


스크린의 왼쪽으로 떨어트리고 싶을때는 ,  margin-right: auto. 

오른쪽의 margin 공백을 최대치로 두기때문에, 왼쪽으로 이동하게 된다. 


요소를 중앙으로 데려오고 싶을 경우, margin-right: auto and margin-left: auto

 하게되면, 그 요소들이 각각 동일하게 여백이 적용될 것이라, 중간에 올 것이다. 



반응형
저작자표시 비영리 변경금지

'Frontend > HTML5' 카테고리의 다른 글

.prependTo()  (0) 2014.08.22
make an Interactive Website 5 coding  (0) 2014.08.22
ASP.NET MVC4 WEB API  (1) 2013.10.22
Javascript / text / cs 연결할 때  (59) 2013.08.30
jQuery의 정의 셀렉터를 사용한 radio 버튼 값 가져오기  (60) 2013.08.29

 

WEB API

SOAP, WS 보다 기본적인 HTTP 위에 노출된 서비스와 같은RESTful 서비스 개발 가능

 

  1. 프로젝트 만들기
    1. ASP.NET MVC 4 PROJECT > project name : 'WorkManagerSimple '
    2. PROJECT TEMPLATE > Web API

      *NuGet 사용 : 패키지관리솔루션

       

  2. Controller > ValuesController.cs
  3. Models > Add > Class > WorkManager.cs 생성
    1. Entity Framework의 code First 컨벤션을 사용
      1. public class WorkManager
      2. {
      3. public int id { get; set; }
      4. public string name { get; set; }
      5. public string detail { get; set; }
      6. }
  4. Controller에서 폴더 추가하여 Web API컨트롤러 분리시킨다.
    1. Controller > new folder > Apis
    2. Apis > add > Controller
      1. Controller name : workmgtController
      2. Tamplate : MVC controller with read/write actions and views, using Entity Framework
      3. Model class :
      4. ..... http://www.youtube.com/watch?v=Dkgr3lpE_LY
반응형

'Frontend > HTML5' 카테고리의 다른 글

make an Interactive Website 5 coding  (0) 2014.08.22
margin by codecademy  (0) 2014.08.21
Javascript / text / cs 연결할 때  (59) 2013.08.30
jQuery의 정의 셀렉터를 사용한 radio 버튼 값 가져오기  (60) 2013.08.29
Alert 안에서 공백/줄바꿈  (55) 2013.08.28

 

무슨 말인고 하니.

 

<input type="radio" id="rdoList"> 이렇게 선언을 하고,

라디오버튼을 선택한 값을 cs단에 넘겨 무엇인가 이벤트를 하려고 할 때,

 

<script>

selectedValue = $(":input:radio[name=rdoIDList]:checked").val();

 

//document.getElementById('<%=hdnUSERID.ClientID%>').value = selectedValue;

document.getElementById('hdnUSERID').value = selectedValue;

document.getElementById("<%=ibtnSearchLastID.ClientID%>").click();

</script>

 

<body>

<input type="hidden" runat="server" id="hdnUSERID" />

</body>

 

 

//document.getElementById('<%=hdnUSERID.ClientID%>').value = selectedValue;

이 경우로 할 때 type을 hidden으로 주면 에러가 난다.

document.getElementById('hdnUSERID').value = selectedValue;

반응형

'Frontend > HTML5' 카테고리의 다른 글

margin by codecademy  (0) 2014.08.21
ASP.NET MVC4 WEB API  (1) 2013.10.22
jQuery의 정의 셀렉터를 사용한 radio 버튼 값 가져오기  (60) 2013.08.29
Alert 안에서 공백/줄바꿈  (55) 2013.08.28
팝업 종료 후 부모창 리로드  (58) 2013.07.04

jQuery의 정의 셀렉터를 사용한 radio 버튼 값 가져오기. by Coder

  • 2008/12/25 15:33 
  • 0 comments

    jQuery에서 제공해주는 정의 필터 셀렉터를 사용해서 radio버튼의 value값을 가져오는 방식은 아래와 같다.

      $(":input:radio[name=sample]:checked").val()

    <input type="radio" name ="sample" value="Y" checked>
    <input type="radio" name ="sample" value="N">


    보기엔 좀 길어보이지만 간단하게 설명된다.
    최초 input 폼 엘리먼트를 선택후 radio 버튼을 가져온다음 name 속성의 값이 sample인 것중에서 선택된 값의 value를 가져온다.
    위의 경우 value 값은 "Y"가 출력된다.
    아무것도 선택하지 않은상태에선 value값은 'undefined'가 반환된다.

    마찬가지로 radio대신 checkbox등의 체크값을 가져오는 방식도 위와 동일하다 하겠다.

반응형

'Frontend > HTML5' 카테고리의 다른 글

ASP.NET MVC4 WEB API  (1) 2013.10.22
Javascript / text / cs 연결할 때  (59) 2013.08.30
Alert 안에서 공백/줄바꿈  (55) 2013.08.28
팝업 종료 후 부모창 리로드  (58) 2013.07.04
apple이 보여주는 html5  (0) 2011.09.11

 

공백 &nbsp;

줄바꿈

Alert ('안녕 \n반가워');

반응형

'Frontend > HTML5' 카테고리의 다른 글

ASP.NET MVC4 WEB API  (1) 2013.10.22
Javascript / text / cs 연결할 때  (59) 2013.08.30
jQuery의 정의 셀렉터를 사용한 radio 버튼 값 가져오기  (60) 2013.08.29
팝업 종료 후 부모창 리로드  (58) 2013.07.04
apple이 보여주는 html5  (0) 2011.09.11

리스트페이지에서 상세뷰를 누를경우 
상세페이지의 내용은 이미지를 보여주고 있음.
이미지를 클릭할경우 팝업을 띄어서
이미지 수정시 해당팝업을 종료시키면서 
상세페이지의 이미지 바뀐걸 갱신 시켜주고자 할때
updateDataInfo를 호출하면 
수정이 된후 팝업창을 닫으면서 부모창의 reloadPage()함수를
호출 갱신시킨다.


//----------------------------------------------
// 수정 (팝업창에 있는 함수)
//----------------------------------------------
function updateDataInfo() {
    var objFrm = document.getElementById('childForm');

    //     spring에 매핑되는 modelAndView             
    objFrm.action="<%=request.getContextPath()%>/album/albumUpdateEXEC.do"; 
    objFrm.submit();
    opener.reloadPage();
    self.close();
}


//----------------------------------------------
// 페이지를 갱신시킨다. (자식창에서 호출하는 함수 )
//----------------------------------------------
function reloadPage() {
    location.reload(); 
}

[출처] 팝업창에서 수정후 닫기와 부모창 리로드|작성자 이타치


반응형
저작자표시 비영리 변경금지

'Frontend > HTML5' 카테고리의 다른 글

ASP.NET MVC4 WEB API  (1) 2013.10.22
Javascript / text / cs 연결할 때  (59) 2013.08.30
jQuery의 정의 셀렉터를 사용한 radio 버튼 값 가져오기  (60) 2013.08.29
Alert 안에서 공백/줄바꿈  (55) 2013.08.28
apple이 보여주는 html5  (0) 2011.09.11

http://www.apple.com/html5/
반응형
저작자표시 비영리 변경금지

'Frontend > HTML5' 카테고리의 다른 글

ASP.NET MVC4 WEB API  (1) 2013.10.22
Javascript / text / cs 연결할 때  (59) 2013.08.30
jQuery의 정의 셀렉터를 사용한 radio 버튼 값 가져오기  (60) 2013.08.29
Alert 안에서 공백/줄바꿈  (55) 2013.08.28
팝업 종료 후 부모창 리로드  (58) 2013.07.04

+ Recent posts

티스토리툴바