funfunweb

See the Pen template-columns by 정은 (@luchiaChoi) on CodePen. See the Pen grid-template-columns-fr by 정은 (@luchiaChoi) on CodePen. 2번째 열 2/4 비율 너비 See the Pen grid-template-columns: repeat(3, 1fr) by 정은 (@luchiaChoi) on CodePen.

클래스 이름을 변수에 담아서 사용할 수 있다. #{이름} 이럴 경우 에러가 생길수 있는데 이 경우 이 경우 아래처럼 적으면 잘 작동하지만 width:$n10 + $n20 + px; width:#{$n10+$n20} + px; 아래처럼 적으면 숫자를 문자로 인식하여 작동하지 않는다. width:100200px 로 나옴. width:#{$n10} + #{$n20} + px;

1. vscode 확장프로그램에서 sass 검색하여 complier 설치하기 2. 문서 작성 css 파일의 확장자는 .scss 연결은 css 3. 컴파일 시키는 방법 ctrl + shift + p

scss를 사용해야 하는 이유 CSS는 복잡한 언어는 아니지만 작업이 커지고 코드가 많아질수록 불편함이 생기게 된다. 예를들어 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 ..등 프로젝트가 커지면 코드 중복이 많아지고 복잡해지어 유지보수가 어려워지게 된다. 프로그래밍에서 가장 흔한 조건문이나 반복문 조차도 문법을 지원하지 않아 '복사 & 붙여넣기' 만 반복 해야한다. •선택자(Selector)을 만들때 매번 불필요한 부모 요소 선택자를 적어야 한다. •function 같은게 없으니, 규모가 큰 프로젝트의 경우 자동화하기 어렵고 모든 것을 수동으로 변경해야 한다. •결국 중복되는 코드가 많아 코드 줄 수가 길어져 유지보수에 마이너스적인 요소가 된다. scss 를 사..

줄바꿈 관련 속성 flex-wrap flex-wrap:[nowrap],[wrap],[nowrap] flex-direction:row 일 경우 기본값 nowrap 줄바꿈하지 않음. 자식요소에 width 를 넣었지만 부모요소에 넓이가 500px 이라서 100px 적용 안되어 있는 상태이다. (shrink) 자식요소가 너무 많고 더이상 수축하지 못할 경우엔 부모요소 밖으로 나가게 된다. flex-wrap:wrap(줄바꿈) 부모컨테이너 크기 300px, 자식요소의 크기(height 100px) 자식요소가 많아서 부모 요소 밖으로 넘치게 됨 wrap-reverse(줄바꿈-거꾸로) flex-direction:column; 일 경우

display:flex Flexible Box, Flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계됨. flexbox를 1차원이라 칭하는 것은, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 뜻 이전에는 레이아웃을 가로배치하기 위해 float, inline-block 을 사용하였는데 이들과 다른 점은 부모요소(container )에 주는 속성이라는 것이다. ex) float은 원래 이미지 옆쪽에 글자를 흐르게(?)하는 목적으로 생겼지만 layout을 만들기 위해서 사용해왔다. 하지만 flex 속성은 자식요소를 가로배치하기 위하여 부모요소에 설정한다. container{display:flex} flex 속성에는 displ..

1. 구글에 xeicon 검색 또는 xeicon XEIcon, 문자를 그리다 XEICon은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이지 제작을 돕습니다. xpressengine.github.io 2. get started 클릭 3. 블록표시된 부분 드래그하여 copy 4. 문서에 붙여넣기 5. 필요한 아이콘 가져오기 - LIBRARY 에서 버전 선택 6. 필요한 아이콘 이름 복사하기(이름선택후 CTRL+C) 7. 문서로 돌아와서 태그 작성 후 CLASS 에 복사한 이름 붙여넣기(CTRL + V) 8. 완성화면

input 의 type 이 search 일 경우 x 모양 없애기 x모양 나오는게 싫다면? 1. input type 을 text 로 넣는다. 2. 꼭 search 로 하고 x 모양을 없애려면? 원래 나오는 x모양 대신 내가 디자인한 x모양을 넣고 싶다면? 버튼을 따로 만들고 이미지를 넣는다. 여기선 xeicon 활용함. xeicon 활용법 공부하러가기 input field 에 내용을 입력하면 x모양 나오게 하기

배경의 색상, 이미지, 반복여부, 위치, 고정 여부를 각각 따로 기술하거나 한번에 표기할 수 있다. /*한번에*/ background:color image repeat position attachment; /*하나씩*/ background-color:값; background-image:url(경로); background-repeat:[repeat],[no-repeat],[repeat-x],[repeat-y] background-position:left top;/*기본값 = 0 0*/ background-attachment:[scroll][fixed] background-color(배경색) 색상명, hex값, rgb값, hsl 값, rgba값, hsla 값 transparent - 투명(기본값) backg..