대학원 공부/programming language79 CSS : CSS 짤 때 좋은 습관, 나쁜 습관 좋은 습관 Component Library를 이용하여 HTML을 구성하자. (like lego) http://pflannery.github.io/oocss-skeleton.docpad/oocss/help/components.html semantic 스타일을 지속적으로 사용하자 내부에 종속되지 않도록 모듈을 디자인하자 코드를 유연하게 (width는 container가 제어하고, height은 contents가 제어하도록) Grid를 사랑하는 습관을 갖자. http://jsfiddle.net/inuitcss/CLYUC/l 선택자(selector) 사용은 최소화하자 --> OOCSS를 사용하자. 다중클래스 여러개의 클래스를 적용하여 확장성을 열어두자 CSS Lint를 사용해서 코드를 검사하자 구조와 스킨을 독.. 2020. 5. 12. CSS : grid 추후에 다시 포스팅 https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout CSS 그리드 레이아웃 CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다. developer.mozilla.org 2020. 5. 12. CSS : display body{ font-family: fantasy; } div{ display: block; } span{ display : inline; display: inline-block; display: none; } display가 block인 경우 div section article nav display inline인 경우 span img a 여기서 만약에 inline을 block을 주고 싶으면 display : inline-block이라고 한다. 여기서 만약에 안 보이게 하고 싶다면, display : none; 하면 된다. display block : div nav section을 써야하는 이유 나중에 모바일에서도 비슷하게 보이려면, 창을 줄이더라도 css가 뭉게지면 안된다. 따라서 block 형태로 쌓아.. 2020. 5. 11. HTML : tag reference tag reference HTML tag는 기억안날 때, 찾아보자. https://www.w3schools.com/tags/ref_byfunc.asp HTML Reference www.w3schools.com 2020. 5. 10. HTML : Entity Entity non-breaking space greater than > > & ampersand & & " double quotation mark " " ' single quotation mark (apostrophe) ' ' ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ € euro € € © copyright © © ® registered trademark ® ® 2020. 5. 10. HTML : Table HTML Table Basic HTML Table Test Firstname Lastname Age Jill Smith 50 Eve Jackson 94 John Doe 80 Tag : Description Defines a table Defines a header cell in a table Defines a row in a table Defines a cell in a table Defines a table caption Specifies a group of one or more columns in a table for formatting Specifies column properties for each column within a element Groups the header content in a .. 2020. 5. 10. HTML : string formatting HTML Tag : Description Defines an abbreviation or acronym Defines contact information for the author/owner of a document Defines the text direction Defines a section that is quoted from another source Defines the title of a work Defines a short inline quotation 사실 posting은 하지만, 이 부분은 외우는 거 보다는, 이렇게 적어두고 나중에 필요할 때 찾아서 쓰면 된다. 2020. 5. 10. HTML : HTML Attribute HTML's Attribute : Description Attribute Description alt Specifies an alternative text for an image, when the image cannot be displayed disabled Specifies that an input element should be disabled href Specifies the URL (web address) for a link id Specifies a unique id for an element class Specifies a unique class for an element src Specifies the URL (web address) for an image style Specifies an .. 2020. 5. 10. HTML : form form form은 어떤 형식에 따라 제출할 때 보통 쓰인다. Type Description Defines a single-line text input field Defines a radio button (for selecting one of many choices) Defines a submit button (for submitting the form) text는 text를 입력하는 창 radio는 클릭하는 창 submit은 제출하는 창, --> js와 연결지을 수 있다. Radio Buttons Male Female submit form 종류 https://www.w3schools.com/html/html_form_input_types.asp HTML Input Types HTML Input Type.. 2020. 5. 10. Web : 무료 html template https://tonhnegod.tistory.com/102 무료 반응형웹 템플릿 사이트 모음 이번 포스팅에서는 무료 반응형웹 템플릿 사이트들을 소개해 드리겠습니다. 직접 사이트들을 찾아보니, 트렌드에 심하게 뒤처지는 것들만 모아놓은 곳도 많이 있었고 광고성으로 무료처럼 해놓고는 유료 구매를 해.. tonhnegod.tistory.com 2020. 5. 10. javascript : module화 하기 2020/05/09 - [web/javascript] - javascript : 객체와 실습코드 javascript : 객체와 실습코드 객체지향프로그래밍 python, C++ 등등 객체를 지향하는 프로그래밍 언어에서 보통 class로 틀을 만들고, 객체를 생성하여 code의 재사용률을 높이자는 취지가 바로 객체지향프로그래밍이다. javascript� mambo-coding-note.tistory.com 지난 포스팅에서 javascript의 객체란 무엇이고, 이 객체를 어떻게 구성하는지에 대해 적었다. 오늘은 이런 function들을 담고 있는 객체들을 어떻게 관리하고 이를 모듈화 시킬 것인지에 대해 포스팅하겠다. module 우선 모듈이 무엇인가? 를 살펴보면, 만약 html 안에 내가 정의하고 싶은 f.. 2020. 5. 9. javascript : 객체와 실습코드 객체지향프로그래밍 python, C++ 등등 객체를 지향하는 프로그래밍 언어에서 보통 class로 틀을 만들고, 객체를 생성하여 code의 재사용률을 높이자는 취지가 바로 객체지향프로그래밍이다. javascript는 어떤 형태로 객체지향프로그래밍을 하는지 잘 몰랐는데, 이번에 javascript를 공부하면서 알게 되었다. javascript의 객체 javascript는 class가 따로 존재하지는 않지만, json 형식으로 해서, key value 형태를, function_name : function_method 이런식으로 구성이 되어있다. 위의 실습코드는 grades라는 객체 안에, list라는 data를 넣고, show라는 function을 넣은 객체이다. 흔히 python 에서 말하는 class의 .. 2020. 5. 9. 이전 1 2 3 4 5 ··· 7 다음
