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!!..

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

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/ 유닛 테스트, 픽스쳐 등 테..

Lab_Web_CSS_02 (CSS 고급활용) 유수봉 교수의 Web (CSS 고급활용) ▶ CSS0501.html - 인라인, 블록 인라인, 인라인 블록, 블록 나는 div(none)입니다. 나는 div(inline) 입니다. 나는 div(inline-block) 입니다. 나는 div span(block) 입니다. ▶ CSS0502.html - 상대배치 상대 배치, relative T h a n k s ▶ CSS0503.html - 절대배치 Merry Christmas! 예수님이 탄생하셨습니다. M E R R Y ▶ CSS0506.html - z-index 다음 빈 곳에 숨은 단어? I (love) you. CSS is Cascading (Style) Sheet. 응답하라 (1988). ▶ CSS0508..

유수봉 교수의 WEB(JavaScript)-1 웹 페이지에서 자바스크립트의 역할 - 사용자의 입력 및 계산 마우스와 키보드 입력은 오직 자바스크립트만으로 가능, 계산기능 - 웹 페이지 내용 및 모양의 동적 제어 HTML태그의 속성, 콘텐츠, CSS프로퍼티 값 동적 변경 - 브라우저 제어 브라우저 윈도우 크기와 모양제어 새 윈도우 열기/닫기 다른 웹 사이트 접속 히스토리 제어 - 웹 서버와의 통신 웹 페이지가 웹 서버와 데이터를 주고받기 - 웹 애플리케이션 작성 캔버스 그래픽, 로컬/세션 스토리지 저장, 위치정보서비스 등 1.HTML 태그의 이벤트 리스너 속성에 작성 마우스 올려 보세요 초기 그림은 두더지 그림 위치에 마우스가 올라가면 화난 닭 그림 위치에 마우스가 벗어나면 건강한 닭 4. URL 부분에 ..