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

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 : 회전 ,..

https://codepen.io/kimseunghee27/pen/XWMLGXN XWMLGXN ... codepen.io 제가 작성한 codepen링크입니다. 누가 이겼을까요?! 첫 animaition강의 후 병원에서 사용하는 BP와 BT를 입력하는 그래프를 만들고 싶었으나 조금 더 특별하게 "제 2의 보노보노"를 만들기 위하여 특이하게 만들어 보았습니다. 기초적인 CSS문법중 font문법과 @keyframes와 함께쓰는 animaition과 위치 지정 position을 응용해보았습니다. 그리고 색상의 경우 red처럼 단위가 아닌 rgb을 사용, 다양한 색상을 사용해봤습니다. 1. 그래프 앞에 작은 상자를 입력하여 숫자입력하기 (font는 너무많으면 튀어나오니까.. 숫자로만) 2. 현재 3d강의를 듣고있..

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를 추가..

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를 사용하고 싶을경우 빈칸으로 둬서 기본선택..