본문 바로가기

분류 전체보기

 (433)
Chap 7. 유지보수 * Link, Import 유지보수를 할 때, 동일 css를 여러 사이트에서 사용하고 있을 때 한번에 처리를 해줄 수 있도록! -> 중복을 제거하자 style.css 라는 css를 새로 만들고html 파일에서 링크 태그를 통해 접근 1cs 다음과 같이 import로도 가져올 수 있음(css 안에서 다른 css를 로드할 때 많이 사용) 123 @import url("style.css") cs * Minify css 코드를 작게 만들기 -> 코드를 경량화 한다온라인으로 minify를 통해 css 코드를 줄여줄 수 있다!
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..
Model & Admin Model & Admin Django Project 내에는Model + View + Template 의 MTV 구조로 동작되는데지난 Word Counter 에서는 View 와 Template 간에 데이터를 주고받고 가공해서 넘겨주는 구조에 대해서 공부하였다.이번에는 Model을 통해 데이터를 넘겨주고 View에서 가공하고 Template에서 출력하는 것에 대해 공부를 하려고 한다. 1) Model에 데이터를 어떻게 담을 것인가2) Model의 데이터를 어떻게 View로 넘길 것인가3) 이러한 데이터를 어떻게 Template 화면에 띄울 것인가 사전 준비.가상환경 켜기 - project 만들기 - app 만들기 - project에 app 연결하기 1. DB를 다루는 Model Model을 만들기 위해서 우..

티스토리툴바