본문 바로가기

Archived(Programming)/Css

(8)
Chap 8. Css 뛰어넘기 * Preprocesser Css 자체가 커다란 표준이기에 다양한 기능이 추가되기까지 많은 과정과 시간이 걸림. 그래서 추가적인 기능을 미리 맛보일 수 있도록 하는 것임. 즉, css의 변형 모듈을 사용가능 http://lesscss.org/ (온라인 변환기)http://sass-lang.com/http://stylus-lang.com/ (온라인 변환기) Preprocesser 문법이 있고 이러한 문법을 컴파일을 통해 css 문법으로 변형해주는 것으로 구성되어 있음 에디터에서 확장기능을 통해 컴파일러 설치! * Fontello (참조: Fontello.com)(참조: thenounproject.com) 아이콘 같은 것들을 이미지가 아닌 폰트로 삽입하기(Vector 방식)Fontello.com 사이트에서 ..
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..