AR삽질러

CSS - Flexbox 1. Flexbox - flex-direction의 디폴트는 row - inline block의 문제점을 해결하기위해 flexbox flexbox사용규칙 1) 자식에게 어떤것도 명시하지 않고 부모엘리먼트에게 명시한다. flex-direction, justify-content, align-items를 적용하고 싶다면 먼저 부모를 display:flex로 만든다. 2) flex컨테이너는 주 축(main axis)수평 와 교차축(cross axis)수 Flex Container는 두개의 축을 가지고 있다. 주요 Flexbox의 속성 flex-direction 주 축(main axis)를 정의한다. row row-reverse column column-reverse justify-con..

CSS - Classes, inline Block 1. lnline - inline 요소는 높이와 너비를 가질 수 없다. - padding 요소는 사방에 가질 수 있다. 위 상황에서 위 아래 margin을 적용하고 싶다면 inline요소를 block로 수정해야한다. hello hello line요소 - span : inline요소로 텍스트를 묶기 위해 사용 2. Class hello hello hello hello hello hello Class - .으로 시작하고 클래스 이름이 뒤에온다. ex) .className .class1 - 선택자로 해당 클래스가 적용된 모든 HTML요소에 스타일 규칙을 적용할 수 있다. - HTML요소에 클래스를 적용하면 class속성을 사용할 수 있다. ex) - Class..

CSS Margin, Padding, Border - (3) CSS(Cascading Style Sheets)의 margin속성은 웹 페이지 요소의 외부 여백을 조절하는데 사용된다. margin의 여백은 요소의 경계밖에 위치하며 인접한 요소와의 간격을 생성하는 역할을 한다. Margin을 이용해 웹 페이지 레이아웃의 정렬과 간격을 정의하며 스타일링한다. Margin - Margin은 요소의 경계를 넘어 그 주위에 공간을 생성하는 요소와 그 주변 요소간의 간격을 조절한다. 1.1. Margin의 값을 지정하는 방법 1) 기본구문 : margin : top, right, bottom, left 2) 단일 값지정 : 요소의 모든 방향에 동일한 크기의 마진을 적용한다. 3) 두값 : 첫번째 값은 top, bot..

CSS - How to Add CSS to HTML (1) 1. HTML 파일에 CSS 코드를 넣는방법 1-1. 같은 HTML파일에 HTML, CSS 코드는 넣는방법 - head 안에 style을 명시하려 css코드를 작성한다. 1-2. CSS와 HTML파일을 분리하는 방법 (추천) - 다른 방법 css파일을 분리하여 생성한후 link태그로 파일을 연결해준다. 2. CSS코드 작성 - CSS코드 작성 규직 3가지 1) CSS가 하는 일은 HTML태그를 가르키는 일로 첫쨰로 selector를 작성한다. 2) 어떤 태드를 가리키면 속성을 부여한다. 3) 중괄호 { } 를 사용하여 속성을 정의한다. styles.css h1{ color: red; } html The AR Profile Photo Hello!!..

HTML Form Tags - (2) https://developer.mozilla.org/ko/docs/Web/HTML/Element HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN 메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에 developer.mozilla.org - body 태그 내에 있는 콘텐츠가 브라우저에 표시된다. - 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다. - 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다. 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존해한다. -..

https://developer.mozilla.org/ko/docs/Web/HTML/Element HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN 메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에 developer.mozilla.org HTML HTML(Hyper Text Markup Language)는 웹 페이지의 구조를 만드는 언어로 HTML에서는 다양한 태그를 사용해 웹페이지의 요소를 정의한다. 태그는 ""로 둘러쌓인 키워드를 구성되어 어디서부터 어디까지의 구간이 tag인지 지정할 수 있다. Tag 0. - HTM..

CSS? CSS (Cascading Style Sheets) HTML은 Browser에게 웹사이트의 Content가 무엇인지 알려주는 것이다. CSS는 Browser에게 웹사이트의 그 Content가 어떻게 보이는지 알려주는 것이다. 즉 사용자에게 문서를 보여주는 방법을 지정하는 언어로 스타일, 레이아웃, 디자인 등 전반적인 모양을 지정하고 제어한다. CSS는 웹 페이지의 내용과 구조(HTML)와 분리되어 컨텐츠와 디자인을 분리하여 코드의 유지보수와 개선을 도와준다. https://ko.wikipedia.org/wiki/CSS CSS - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 종속형 시트 또는 캐스케이딩 스타일 시트(영어: Cascading Style Sheet)는 마크업 언어..

Ruby On Rails チュートリアル - 単語(2) Ruby On Rails 튜토리얼 - 단어(2) 書式例（しょしきれい） 서식예 題材（だいざい） 소재 印（しるし） 표시 テスト駆動開発（くどうかいはつ） 테스트 구동개발 削除（さくじょ） 삭제 実践的（じっせんてき） 실천적 豪快（ごうかい） 호쾌 実装（じっそう） 구현(설치,장치 하는것) 兼ね備える（かねそなえる） 겸비하다, 두루갖추다 提携（ていけい） 제휴 難関（なんかん） 난관 完走者（かんそうしゃ） 완주자 押さえる（おさえる） (억)누르다, (손 등)누르다 全文検索（ぜんぶんけんさく） 전문검색 躓 く （つまずく） 좌절하다, 실패하다 機構（きこう） 기구 躓きがち（つまずきがち） 실패하기 쉽다, 걸리기쉽다, 실패하다, 좌절하다 認証（にんしょう） 인증 連想（れんそう） 연상 後回..

HTML? 하이퍼 텍스트 마크업 언어(Hyper Text Markup Language) 웹 페이지를 만들기 위한 표준 마크업 언어로 HTML은 웹 브라우저가 이해하고 해석할 수 있는 텍스트 기반의 코드로 작성되며 웹페이지의 구조와 콘텐츠를 정의하는데 사용된다. https://ko.wikipedia.org/wiki/HTML HTML - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 하이퍼 텍스트 마크업 언어(영어: Hyper Text Markup Language, HTML, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는 웹 페이지 표시를 위해 개발된 지배적인 ko.wikipedia.org HTML 구성 요소 Tage 태그는 각 요소의 시작과 끝은 표시하며 요소의 종류와 특성을 정..

Hello Rails RubyOnRails 0. Rails구조 파일/폴더 목적 Gemfile Rails 애플리케이션에 필요한 Gem의 의존성 정보를 기술하는데 사용 README 설치, 사용방법 기술 Rakefile 터미널에서 실행할 수 있는 배치잡들을 포함 app/ Model, View, Controller를 포함한다. config/ 실행시간의 규칙, 라우팅, 데이터베이스 등의 설정을 저장 config.ru Rack기반의 서버들이 시작할때 필요한 설정 db/ 데이터베이스의 스키마 doc/ 설명문서 lib/ 확장모듈파일 log/ 애플리케이션의 로그파일 public/ imege, JavaScript, StyleSheet등 정적 파일을 보관 script/ 레일스 스크립트 test/ 유닛 테스트, 픽스쳐 등 테..