All78 0305_html5/css3_예제4 마우스 오버하면은 ... [ 작성 순서 ] # HTML 작성 # 더보기 HTML Google Fonts Roboto Solway NanumGothic # CSS 작성 # #1. 기본 세팅하기 - ul 점 없애기 >> list-sytle: none - a {} 폰트 스타일 적용 >> text-decoration 더보기 reset /* #1. reset*/ body, div, img, h3, ul, li, a{ margin: 0; padding: 0;} ul{ list-style: none } a{ text-decoration: none; color:#fff} #2. 가장 큰 박스 효과 적용 2.1 효과 적용: .style_1_wrap{ } 더보기 2.1 코드 전체 /* #2. 가장 큰 영역 reset */.. 2020. 3. 9. 0305_html5/css3_예제3 마우스 올리면 카드처럼 회전 하는 것 [작성 순서] HTML 작성 CSS 작성 # HTML 작성 # 더보기 HTML [뒷면]통신3사, 유통·협력사 '코로나19' 극복 3000억대 지원(종합) [서울=뉴시스] 오동현 기자 = 통신3사가 '신종 코로나바이러스 감염증(코로나19)' 확산으로 영 업에 어려움을 겪는 전국 유통망과 협력사를 위해 총 3000억 규모의 상생안을 시행한다. 5일 통신3사가 발표한 상생안에 따르면, SK텔레콤과 자회사 SK브로드밴드가 각각 1130억원과 110억원 규모의 지원책을 마련했다. KT는 1040억원, LG유플러스는 850억원 규모를 지원한다. [앞면]가상화폐 거래소, 이젠 정부가 관리한다…'특금법' 국회 본회의 통과 가상화폐(암호화폐) 거래소 등이 지켜야 할 규제를 담은 '특.. 2020. 3. 9. 0305_html5/css3_예제2 [ 작성 순서 ] # HTML 작성 # 더보기 HTML 작성 -ater, befor는 중복해서 사용할 수 없음 >> 세로선 적용을 위해서 div 그룹 하나 더 만듦 WEB DESIGN UX DESIGN # CSS 작성 # #1. 기본값 주기 : body, div, img, h2, p 태그 요소에 공통으로 적용되는 값 주기 #2. 제일 큰 영역 세팅 >> .style_1_wrap{ } : 이미지를 둘러싸고 있는 부모요소 style_1_wrap에 스타일 적용 1. 기본 모양 잡기 .style_1_wrap{ width: 500px; height: 500px; margin: 50px auto; text-align: center; font-size: 18px; position: relative; color: #f.. 2020. 3. 8. 0305_html5/css3_예제1 [ 작성 순서 ] HTML 작성 CSS 작성 효과 자연스럽게 하기: transition # HTML 작성 # 더보기 Home Apple Google Brackets Mozilla # CSS 작성 # #1. 기본 셋팅하기 더보기 /* #1. reset*/ * { /* *{} : 전체 선택자*/ margin: 0; padding: 0 } .iconbox { width: 1000px; height: 230px; background-color: gray; margin: 50px auto 0 auto; display: flex; /* display:flex; 모바일에서는 괜쥰*/ } #2. 세부 스타일 적용 더보기 /* #2. 아이콘*/ div.iconodr { width: 200px; height: 230px;.. 2020. 3. 7. 0304_html5/css3_media-2 %단위 많이 씀 vw 잘 안씀 PX넣을 때도 범위 지정해서 넣으면 됨 ~이상, ~ 이하 범위값을 잘 지정하면 그대로 상속받아서 반복작업을 줄일 수 있음 LOGO MENU1 MENU2 MENU3 MENU4 MENU5 1 2 3 article_1 article_2 banner_1 banner_2 banner_3 footer 2020. 3. 5. 0304_html5/css3_media-1 반드시 있어야 모바일, 반응형 작업을 할 수 있음 페이지 크기와 device-width : 장치의 화면 폭에 따라 화면 페이지 폭을 설정 하겠따 initial-scale=1 : 초기 zoom값 minimum-scale= : 최대 값 지정 user-scaleble = :사용자가 확대/축소를 할 수 있게 할 것인가 --- 더보기 @media all and(min-width:768px){ 사용자 해상도가 768px 이상일 때, 이 안에 있는 코드가 실행 됨 } (and:그리고 , 두가지 조건이 모두 만족할때) @media all and(min-width:768px) and (max-width:1024px){ 사용자의 해상도가 768이상이고 1024이하일 때 코드가 실행 됨 } @media all and(wid.. 2020. 3. 5. 0304_html5/css3_display:flex - (3)형태잡기 flex-grow , flex-shrink:'숫자' 형태잡기 - 비율로 형태를 잡음 - 여백 없이 형태를 잡을 수 있음 flex-grow section article { flex-grow: 1; flex-basis: 600px; flex-shrink: 1; } - flex-grow: - flex-shrink: flex-shrink section article { flex-grow: 1; flex-basis: 600px; flex-shrink: 1; } - flex-grow: - flex-shrink: 참고사이트: https://blog.naver.com/coding-/221394620200\ CSS3 [flex] flex-direction/justify-content/align-items/align-content/flex-wrap/flex-grow/fle.. 2020. 3. 5. 0304_html5/css3_display:flex - (3)형태잡기 flex-basis:'값'px 형태잡기 -가로 세로 값을 각각 다 지정해주지 않아도 형태를 만들 수 있음 flex: 1 section article { flex:1; } - section article 영역 내부에 있는 개별 콘텐츠들을 1:1 의 비율로 만들어 줌 더보기 header article_1 article_2 article_3 footer 2020. 3. 5. 0305~_html5/css3_예제1_이미지 자료 2020. 3. 4. 0304_html5/css3_display:flex - (2)정렬,순서바꾸기 flex-derection, order 기본 정렬 순서 바꾸기 flex-direction: ; order: ; flex-direction : 정렬하기 - row, row-reverse, column, column-revers - 순서 뒤바꾸는 작업은 잘 하지 않음 - 주로 row 사용함 order : 배치되는 순서 정하기 - order값이 지정되지 않으면 작은 값(0) 바로 뒤로 이동 - z-index와 개념은 다르지만 원하는대로 순서를 바꿀 수 있음 flex-direction: row; (기본값) - 가로 정렬 .container{width: 600px; height: 100px; border: 2px solid #07c; display: flex; flex-direction: row; } .item1{ width: 200px; backgr.. 2020. 3. 4. 이전 1 2 3 4 5 6 ··· 8 다음
