날아라쩡글이의 블로그입니다.

flex는 class를 부여하여 부모속성인 container와 내부에 개별적인 item으로 부여를 할 수 있다. container의 경우 display, flex-flow, justify-content, align-item 의 속성을 부여할 수 있고, item의 경우 order, flex, flex-grow, flex-shrink, flex-basis, align-self의 속성을 부여할 수 있다. flex container의 display속성은 flex는 블록 요소로 수직으로 쌓고, inline-flex는 인라인 요소로 수평으로 쌓는 점을 기억하자 flex-container flex-flow = 주축으로 여러줄을 묶는다. flex-direction : items의 주축으로 주요 x, y축을 설정한다. ..

transform = 요소의 변형, 변환을 주는 효과 , 속성은 1개 속성하나로 여러가지 함수를 지정, 2D와 3D(평면과 삼차원)을 표현할 수 있다. transform:rorate(20deg) translate(10px,0) skew scale의 함수로 입력이 가능하다. transform: 원근법 이동 크기 회전 기울임; transform = 2D 변환 함수 translate : 이동을 변환하는 함수 (x축, y축)입력, 수치는 px단위로 입력가능함. translateX( x축 ) translateY(y축) scale : 확대, 축소, 크기를 변환하는 함수 , 단위는 없이 배수로 지정함. (1,1) 변화x, (1.5, 1.5); 05배효과 scaleX(x축) scaleY(y축) rotate : 회전 ,..

float나머지 요소는 항상 수직으로 쌓이려고한다. float의 경우 수평정렬로 만들어지며, float:right 는 우측부터 3, 2, 1의 형태로 배열되고, float:left의 경우 좌측부터 1, 2, 3의 형태로 쌓이게 된다. 해제의 경우 clear를 입력하고 left는 left로 right는 right로 작성하여 해제한다. 그러나 구별하기 어렵거나, 유지보수의 문제로 clear:both를 사용한다. 해제를 하지않고 작성시에 요소는 중복되어 사용된다. float의 속성이 적용된 요소의 주위로 다른요소들이 흐르게 되는데 이를 방지하기 위해 속성을 '해제;해야한다. 해제의 방법은 다음형제 요소에 clear:left,right,both를 추가한다. 부모요소에 overflow:hidden,auto를 추가..

font-weight = 9단계로 글꼴을 설정할 수 있다. 단계 크기 100 thin(hairline) 200 extra light (ultra light) 300 light 400 normal (기본값) 500 medium 600 semi bold(demibold) 700 bold 800 extra bold(ultra bold) 900 black(heavy) 상속 값 bolder( 부모요소보다 더 두껍게 ) lighter( 부모요소보다 더 얇게 ) 100~300 400 100 400~500 700 100 600~900 900 600,700 = 400 800,900 = 700 font-weight를 적었을 때 브라우저에 동일한 두께와 값이 없을 경우, 정확한 두께를 표현하지 못 하였을 경우 1. 400값..

reset : css를 초기화해주는 문법이다. 다양한 브라우저의 경우 style이 다르게 출력되기 때문에 동일하게 스타일을 만들기 위하여 초기화하고 작성을 해야한다. 일일히 margin:0; padding:0;으로 설정해주기보단 기존의 style을 초기화해주는 것이 좋은데, reset MDN을 검색해서 reset.min.css의 압출파일 경로를 Visual studio code에 입력시 main.css를 연결하는 link보다 위쪽에 입력하여 모두 reset이 되도록 설정해준다. codepan에서도 적용 가능한데, css좌측에 톱니바퀴에 설정을 해준다 emmet문법 = tab키를 이용하여 바로바로 작성이 되도록 설정해준다. 감싸는 방법도 가능하며, 복잡한 문서를 손쉽게 입력가능하다. emmet plug i..

CHILD( 자식) first child =E:first child (선택 E가 부모를 공유하는 형제요소 중 첫번째 요소인 경우 ) .fruits li:last child (막내) nth child =몇번째 요소를 선택할 것인가 (n번째 요소) ,짝수만 선택가능 n+3= 세번째요소부터 모두선택가능함 n키워드를 사용시 css는 1부터 해석, java와 java script는 0부터 해석(zero-base) 해석이 정확하기때문에 정확한 위치를 적어주어야 입력이 가능하다. first-child의 경우 모든 요소중의 first-child까지 지 적용하기 때문에 어느 class만의 바로 자식요소만 사용시 그 자식요소만을 사용하여야한다. 전체적인 __:first-child를 사용하고 싶을경우 빈칸으로 둬서 기본선택..

css의 경우 문법과 속성을 배워 모양을 만들어 흥미를 유발하는 역활을 한다. css의 선택자는 중요한 요소이다. selector{ 속성:속성값; 속성:속성값; } 으로 입력한다 속성과 속성값사이는 꼭 붙여서 작성한다. property = 속성 (검색된 대상될 명령 set) value = 값 주석: /* comment */ : 문서내 수정사항이나 설명등을 작성 css선언방식==>HTML->style 작성, div style=color :red; font-size:20px; =>html의 직접입력은 피하는것이 좋다. 1. 내장 embedded방식 link type , html 외부문서로 css가져와서 입력함 추천방법 2.@import 방식 =a+규칙 =>미디어쿼리 :css @ import 를 이용하여 문서..