html511 0227_html5/css3_display:flex -(1)기본정렬 space-between display: flex 유연한 박스를 만들 수 있음 - ie11부터 지원함으로 웹에서는 아직까지는 사용하기 어려움 - 모바일은 괜찮음 알아서 가로로 배치해줌. -비고) float를 이용해서 작업하려면, float해지하는 작업도 해야함 -웹상에서 flex로 작업한 것은 찾기 힘듦.(외국 사이트에서는 크롬 위주로 개발해서 찾기 쉬움) -모바일 용으로는 사용하기 유용 dispaly:flex; justify-cont: ; - 선택한 속성 대로 자동으로 정렬 함 justify-content: center - items를 가운데로 배치 .container{width: 700px; height: 100px; border: 2px solid #07c; display: flex; justify-content: cent.. 2020. 3. 4. 0227_html5/css3_animation [ animation ] 애니매이션:반복적인 패턴의 움직임 - animation은 반드시 @keyframes과 같이 써야함 animation 코드보기 [더보기] 선택 더보기 [ animation ] 애니매이션:반복적인 패턴의 움직임 - animation은 반드시 @keyframes과 같이 써야함 animation 2020. 3. 4. 0226_html5/css3_background-color / gradient background-color gradient linear-gradient , radial-gradient 코드 보기 [더보기 클릭] 더보기 [background-color]rgba투명도 값은 0.1~1까지 지정 가능 1 2 3 4 5 6(16진수로 컬러지정) [gradient] ie10부터 지원 라인1 라인2 라인3 원형1 원형2 원형3 색상을 코드로 바꿔주는 사이트 https://www.cssmatic.com/ The ultimate CSS tools for web designers | CSSmatic CSSmatic is a non-profit project, made by developers for developers Are you a web developer? Would you like to c.. 2020. 3. 4. 0226_html5/css3_background-clip [background-clip]: 배경의 범위 지정 배경을 표시할 범위가, border부터/까지 배경을 표시할 범위가, padding부터/까지 배경을 표시할 범위가, content부터/까지 2020. 3. 4. 0226_html5/css3_background-origin [background-origin]: 배경이미지의 기준 위치 지정 배경이미지의 기준 위치를 padding으로:border라인 안쪽에서부터 배경이미지의 기준 위치를 border으로:border라인 뒤에서부터 배경이미지의 기준 위치를 content로:content영역(텍스트위치)에서 부터 2020. 3. 4. 0226_html5/css3_background-size [background-size] 이미지 전체가 지정한 표시 영역에 모두 들어갈 수 있는 최대 크기로 표현되는것을 말함 해당 이미지 하나만으로 표시영역을 덮을 수 있는 최소 크기::contain보다는cover 많이 씀 이미지를 자동으로 이미지 표현 auto::웹에서 많이 사용 배경이미지 크기 변경::모바일에서 많이 사용 2020. 3. 4. 0226_html5/css3_background [background] 배경 이미지 2020. 3. 4. 0226_html5/css3_border-radius css3는 ie9부터 적용됨 css코드는 제이쿼리, 스크립트에서도 적용 가능 [border-radius] box1 box2 box3 box4 2020. 2. 26. 0211_div 태그 _HTML4 1. 태그 :블록요소의 형태로 그룹화 시킬 수 있음 2. 태그 인라인 요소의 형태로 콘텐츠를 그룹화 시킴 div { width: 250px; margin: 50px auto; background-color: aqua } span { color: red; width: 300px; height: 50px; background-color: yellow; } span { color: red; width: 300px; height: 50px; background-color: yellow; display: inline-block } All div : 블록요소로 그룹화 --> css 공지사항 디자인과정 개강 10일 퍼블리셔 과정 개강 11일 개발 과정 개강 12일 Span : 인라인요소로 그룹화 --> css spa.. 2020. 2. 11. 0210_html4 vs html5 (선언문) HTML 4 선언문 HTML5선언문 2020. 2. 11. 이전 1 2 다음
