일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- ruby
- nico
- 単語
- 日本語
- 비즈니스일본어
- springboot
- Web
- vscode
- Spring
- DART
- 디지몬
- rails
- javascript
- C로 시작하는 컴퓨터 프로그래밍4판
- 一日一つメソッド
- 반다이몰
- 건담베이스
- 연습문제
- 건담
- 일본어
- Python
- 자바
- jsp
- メソッド
- java
- Flutter
- 인프런
- CSS
- rails7
- html
- Today
- Total
목록CSS (18)
AR삽질러
Rails 一日一つメソッド (Day32) stylesheet_link_tagメソッド 1. stylesheet_link_tagメソッドとは? - Web Pageに stylesheet(css file)を指定して読み込ませるために使われる view hleperで、このメソッドを使えばHTML タグを生成し、指定された CSS FileをWeb Pageに見せる事ができる。 - 読み込みたいCSSファイルを app/assets/stylesheets/ ディレクトリに配置し、stylesheet_link_tagメソッドの引数に読み込みたいCSSファイル名を記述する。 2. stylesheet_link_tag 使い方 application - stylesheetのfile名を表す。 - 基本的に app/assets/stylesheets/applicai..
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 box - (2) - CSS의 box에는 두종류의 형태가 있다. 하나는 박스요소 옆에 다른 요소가 올 수 있고 하나는 박스요소 옆에 다른 요소가 올수없는것이다. - 요소 옆에 다른 요소가 올 수 없는것 blocks - 요소 옆에 다른 요소가 올 수 있는 것 inlines div는 요소 옆에 다른 요소가 올 수 없다. span은 요소 옆에 다른 요소가 올 수 있다. hello hello hello link도 요소 옆에 올 수 있다. hello hello hello link hello p는 div와 같이 요소 옆에 다른 요소가 올 수 없다. hello hello hello link hello 안녕하세요 HTML CSS를 활용한 프로젝트를 만들고 있습니다. img도 요소 옆에 올 수 있다. hello ..
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!!..
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/ 유닛 테스트, 픽스쳐 등 테..