본문 바로가기

Archived(Programming)

(74)
Chap 6. 그래픽(Graphic) * 배경 특정 배경을 컬러나 사진 지정그 외에도 반복이나 높이, 사이즈 등 다양한 요소들을 결정할 수 있다 123456789101112.container{background-color: "컬러";background-image: url('인터넷 url/ directory');background-repeat : no-repeat; /* (repeat-x / reapeat -y) 어느 축 반복할 건지 결정 */ background-attachment : fixed; /*스크롤 내려도 이미지 고정 */background-size : 폭 높이;background-size: cover/contain; /* conatin은 다들어가게, cover는 이미지가 화면에 차게 */background-position: rig..
Chap 5. 레이아웃(Layout) 활용 * Flex Layout의 흑역사1) Table(Grid) - 구조화된 정보를 제공.But, 진짜 표인지 아니면 Layout으로 쓴 것인지 구분이 안감.2) Position - 지금도 사용하고 있긴함3) Float - 이미지 옆에 글씨가 흘러들어가게(이해, 제작 어려움) -> Flex 등장.어렵긴 하지만 활용할 수 있으면 최고conatiner와 item 으로 구성해야 함! container에 줘야하는 속성과 item에 줘야하는 속성 구분! * Flex의 기본 부모와 자식으로 구성해야 한다!Flex를 사용하려면 반드시 부모의 display를 flex를 줘야함! 12flex-direction : row-reverse; /* 행 반대 정렬 */flex-direction : column-reverse; /* 열..
Chap 4. Layout(레이아웃) 기본 * 인라인 vs 블럭 레벨 태그에 따른 줄바꿈이 일어남 12 Hello world 안녕하세요. 링크입니다.cs inline => 안에 들어가면서 줄바뀜이 일어나지 않는 것 ex) ablock => 혼자 공간을 차지하는 것 ex) h1 물론 다음과 같이 바꿀 수 있음! 1element{ display:inline/block; }cs * Box-Model 박스 모델 중요함! margin 및 padding 등과 관련된 모든 것들이 박스모델부피감과 여백, 위치, 크기 등을 결정하는 것 사각형의 박스와 같은 형태를 띄고 있어서 박스모델이라고 표현 1element{ border: 10px solid red; /* (한번에 표현/ font와 같은 원리) */}cs padding은 내부 간격margin은 외부 간격 w..
Chap 3. Font(서체) * Font-size px, em, rempx 는 고정, em/rem 은 상대적브라우저 설정에 따라서 달라짐 사용자가 브라우저의 글꼴 크기를 키웠을 때 같이 커짐즉, rem 을 쓰는 것이 적절(사용자의 권리 존중) * Color color name, hex, rgb * Text-align 참고용) Lorem Ipsum 텍스트 활용center, left, right 외에도 justify 를 쓰면 간격 조정 * Font-family, Font-weight, Line-height font-family로 글꼴 설정여러 개를 설정하면font-family: arial, herif, ... 등을 써주면 차례로 우선순위로 Serif(sans 부정) 을 통해 글꼴 장식 있는지 없는지 지정 가능monospace 고정폭(글..
Chap 2. Inherit(상속) * 상속(inherit) 하위의 element가 상위 element의 속성을 이어받게 됨 html에 컬러를 주게 되면 html이 감싸고 있는 모든 tag의 속성에 컬러를 상속받게 됨 BUT, border와 같은 속성은 상속되지 않음상속되는 것이 유리한 속성들은 상속되고 그렇지 않은 것은 상속되지 않음. * Cascading (계단식) CSS도 Cascading Sytle Sheet 일 정도로 Cascading의 의미 중요 웹 브라우저는 사용자와 저자들 간의 조화 관계 속에서 철학을 만들어 간다. 조화의 대가 -> 우선 순위웹 브라우저 < 사용자 < 저자 추가적으로,tag < .class < #id < html 의 순으로 우선순위를 가짐 BUT, value 값 뒤에 !important를 선언해주면 가장 우..
Chap 1. Selector(선택자) * 웹 HTML - 정보 제공CSS - 디자인 * 선택자_선언(Selector_declaration) 선택자는 속성을 입힐 대상(주어)선언은 우리가 입힐 속성과 값 (다음과 같은 양식) * ID 선택자 id 값을 주고#으로 속성 지정 * 부모-자식 선택자 1) ul의 li에만 속성만 입히고 싶으면ul li{}를 통해 선택자(띄워쓰기는 해당 자식의 의미) 2) ul>li{}를 통해 선택자를 활용시 직계자손만 적용(자식의 자식은 적용하지 않음) 3) ul,ol{}를 통해 선택자 활용시 공통 속성 * 선택자 공부 Tip flukeout.github.io 선택자 공부cheat_seat 검색해서 찾아보기 * 가상 클래스 선택자(psuedo class selector) :link - 방문한 적이 없는 링크:visi..
RubyOnRails 10) Tinymce Text편집기 RubyOnRails 10) Tinymce Text편집기 참고 :http://blog.naver.com/PostView.nhn?blogId=kbs4674&logNo=221039105137http://hibee.tistory.com/13 기본적인 Textarea가 아닌 글꼴이나 크기 등을 지정할 수 있는 텍스트 편집기 gem에 대해 공부하고자 한다. Tinymce를 활용할 경우 다음과 같은 텍스트 편집기를 사용할 수 있다. (시작하기에 앞서 기본적인 세팅은 다음의 페이지를 참고하여 세팅하기를 추천한다.) 먼저, 다음의 gem들을 설치해준다.tinymce의 경우 우리가 사용하려는 gem이고, carrierwave는 이미지 업로드를 위한 gem,fog의 경우 이미지 원격 저장소를 위한 gem이다. 123456..
RubyOnRails 9) Category 나누기 RubyOnRails 9) Category 나누기 여러 게시글들을 카테고리에 맞게 나눠서 관리할 수 있도록 하고자 한다.먼저 Post 모델에서 category field를 추가한다. 123$ rails g migration add_category_to_posts category:integer($ rails g migration AddCategoryToPosts category:integer)$ rails db:migrateColored by Color Scriptercs 그 다음 Routes.rb 파일에서 카테고리 ID를 나눠서 get으로 접근할 수 있도록 새롭게 지정해준다.또한 해당 Index에서 글쓰기를 눌렀을 때, 카테고리에 맞는 게시글을 쓸 수 있도록 new도 변경. 1234Routes.rb.....