funfunweb

줄바꿈 관련 속성 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; 일 경우

flex된 요소들의 방향 설정- 부모요소(container )에 주는 속성 flex-direction:[row],[row-reverse],[column],[column-reverse] flex-direction은 자식요소는 그대로 있고 부모의 주축 방향이 바뀐다고 생각하면 된다(화살표- 주축) 부모요소인 div 에 display:flex 설정. 자식요소의 길이가 부모요소의 길이만큼 늘어난다.(stretch)

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

배경의 색상, 이미지, 반복여부, 위치, 고정 여부를 각각 따로 기술하거나 한번에 표기할 수 있다. /*한번에*/ 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..

opacity - 요소에 투명도를 부여할 수 있는 속성 opacity:0.5; 투명도는 0 ~ 1 로 표현 1에 가까워질수록 불투명 0에 가까워질수록 투명해진다.

글자의 색상 지정하는 속성으로 색상명을 넣거나 hex 값 RGB값 HSL 값, RGBA 값, HSLA 값으로 넣을 수 있다. A 는 ALPHA 값으로 불투명도를 의미한다.

글자 또는 박스에 그림자를 주는 속성 글자에 그림자 주기 text-shadow 박스에 그림자 주기 box-shadow 기본값: none, 상속 yes, 애니메이션 yes 문법 text-shadow:x-offset y-offset blur-radius color box-shadow:x-offset y-offset blur-radius color x-offset - 그림자의 수평거리 (필수) y-offset - 그림자의 수직거리(필수) blur-radius - 흐림정도 (기본값 0) color - 그림자 색 none - 그림자 효과 없애기 x-offset 양수 입력시 오른쪽에 그림자 생김 y-offset 양수 입력시 아래쪽에 그림자 생김 그림자 중첩 속성값을 쉼표로 구분하여 여러번 작성하면 여러개의 그림자를..

글자에 밑줄, 윗줄, 가운데 줄을 만들거나 없애주는 속성 text-decoration:[none],[underline],[overline],[line-through] none : 줄 없애기 underline: 아래줄 overline: 윗줄 line-through : 가운데 줄 See the Pen text-decoration by 정은 (@luchiaChoi) on CodePen.

문자의 글꼴 지정하는 속성 여러 단어이거나 한글 글골인 경우 따옴표로 감싸고 여러 개의 글꼴은 쉼표로 구분, 지정한 글골이 없을 경우 그 다음 글꼴로 지정 할 수 있다. font-family:"돋움", dotum, sans-serif; serif - 장식 sans - 없다.

css 작성 방법 선택자{속성:값;속성:값;} h1{color:blue;} h1 요소에 color(글자색)을 blue(파란색)으로 설정해라. 선택자는 스타일을 지정하려는 html 요소를 의미하고 선언 블록은 {} 안에 작성한다. 속성과 값을 : 로구분, 하나 이상의 선언이 포함되어있다. 선택자 종류 사용방법 태그 (type)선택자 ex) h1, p, section h1{color:red;} 클래스 선택자 ex) .util .util{color:orange;} 아이디 선택자(주의 이름은 숫자로 시작할 수 없다.) ex) #gnb #gnb{font-size:30px;} 전체 선택자 ex) * *{color:blue;} 하위 선택자 ex) header h1 header h1{color:pink;} 자식 선택자..