<div> 테두리(border) 겹침 제거(collapse) 테두리(border) 겹침 제거(collapse)태그에 border를 사용해 틀을 잡으려다 선이 겹쳐서 두 배의 두께로 나온 적이 있을 것이다. display: table 을 설정하면 해결할 수 있지만, display: float와 같이 다른 값이나 속성을 사용하고 있을 땐 난감해진다. 반응형 웹페이지에서 테이블셀을 사용하면 대응이 힘들 때가 있기도 하고. 아래처럼 1px의 solid black 테두리선이 특정 영역에서 2개씩 겹쳐서 2px로 보이는 경우의 해결법이다.html1234567 1 1 1 1 1 cscss123.sucks div{ border:1px solid black;}csoutput 원래 위와 같은 현상을 극복하기 위해서는, 첫번째 에 border가 모두 설정되어 있다면 그 아래 는 첫번.. react - 4 lifecycle renderrender()가 발생하면 아래와 같은 메소드가 차례로 호출된다.componentWillMount()render()componentDidMount() 1234567891011class App extends Component { componentWillMount(){ console.log('will Mount'); } componentDidMount(){ console.log('did Mount'); } render() { console.log('render'); }}cs componentWillMount()를 통해 해당 컴포넌트의 사이클이 시작되었음을 알게 되고, render()를 통해 해당 컴포넌트의 '존재'를 확인하며componentDidMount()를 통해 컴포넌트가 자리잡았음을 확인할 .. 기본 Git 커맨드 Basic Git commands 기본 Git 커맨드 Basic Git commandsGit과 함께 가기 위한 기본 Git Command들입니다. 원본은 여기에서 볼 수 있습니다.아래 각각의 Git task를 누르면 링크로 이동해 자세한 설명을 볼 수 있습니다.Git taskNotesGit commandsTell Git who you are커밋에 사용될 저자와 이메일주소를 설정합니다. Git은 user.name. 에서 후행 마침표와 같은 일부 문자를 제거하므로 주의하세요.git config --global user.name "Sam Smith"git config --global user.email sam@example.comCreate a new local repository git initCheck out a repository지역 지.. ExtJS : TreePanel / Tree Store Extjs : TreePanel / Tree Store 이해Preview 트리 패널(Tree panel)은 사진처럼 뎁스별로 어떠한 기능을 컴포넌트화/구현하는 데 사용된다.공식 docs의 설명:The TreePanel provides tree-structured UI representation of tree-structured data. A TreePanel must be bound to a Ext.data.TreeStore.TreePanels support multiple columns through the columns configuration.By default a TreePanel contains a single column which uses the text Field of the store's.. ExtJS : Form Field ExtJS : Form Field폼필드는 그냥 선언해서 갖다 쓰면 된다. 구구절절 써놓는 것보다 그냥 공식문서 보는게 더 좋다.기본적으로 선언만 해도 validation check가 이루어져서 편한 듯. ExtJS Docs : FormsExtJS Kitchen Sink 1234567891011121314151617181920212223242526272829303132333435363738394041424344Ext.onReady(function(){ Ext.create("Ext.panel.Panel",{ width:500, height:500, title:"폼필드", renderTo:Ext.getBody(), items:[{ xtype: 'textfield', allowBlank : false, empt.. ExtJS Window Component / Tap Panel ExtJS Window Component / Tap Panelwindow 컴포넌트는 응용프로그램 창으로 사용되기 위한 특수패널이다. 사이즈 조절과 최대/최소화 등이 가능하다.Windows can also be linked to a Ext.ZIndexManager or managed by the Ext.WindowManager to provide grouping, activation, to front, to back and other application-specific behavior.By default, Windows will be rendered to document.body. To constrain a Window to another element specify renderTo.선언Ext.windo.. ExtJS : MessageBox ExtJS : MessageBoxalert을 비롯한 여러 메시지창에 대해 알아본다.사용하기 전에, ExtJS에서 쓰이는 메시지창을 불러오기 위한 Ext.Msg 는 싱글톤 인스턴스singleton instance기 때문에 create()를 사용할 필요가 없다.따라서 사용하고자 하는 곳에서 곧바로 불러오면 된다.alert기본 alert 창이다. JavaScript의 alert()은 확인버튼을 누르기 전까지 다음 라인의 동작이 이루어지지 않지만Extjs의 alert은 사용자의 반응을 기다리지 않는다. 즉 다음 로직이 곧바로 실행된다. 따라서 따로 function을 구현해 return으로 제어해야 하는 등의 작업이 필요하다. 타이틀과 메시지 내용을 각각 파라미터로 넣으면 된다.1234Ext.onReady(fun.. ExtJS : Buttons ExtJS : Buttons기본 버튼들과 크기조절, 버튼에 아이콘 삽입 등에 대해 알아본다.Preview레이아웃과 버튼을 조합해서 아래와 같이 eclipse UI를 비슷하게 만들어보자.layoutborder를 이용해 레이아웃을 잡고, 위에 메뉴역할을 할 버튼 몇 개를 넣었다.12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758Ext.onReady(function(){ Ext.create('Ext.container.Viewport',{ layout:'border', renderTo: Ext.getBody(), items:[{ xtype: 'panel', height:1.. 이전 1 ··· 11 12 13 14 15 16 17 ··· 24 다음
