Html&CSS71 0305_html5/css3_ex.main https://fontawesome.com/icons?d=gallery Font Awesome fontawesome.com icon > free 폰트 태그 복사해서 넣기 css 파일 링 크 걸어야지 확인할 수 있음 2020. 3. 16. EX.HTML5/CSS3_예제 2020. 3. 16. 질문사항 display:block: 인라인요소를 블록요소로 바꿔준다 1. 매번 display: block 해주는 이유는? 2. 47번째 줄 display: block; 있을때는 동그라미 "흰색"으로 나오는데 없으면 안나오고 ("파랑색")으로 나오는 이유는.. HTML 일자리 소식 전자 도서관 당직 직원 2020. 3. 16. 0305_html5/css3_예제5 마우스 오버하면 아이콘 주변 회전 [ 작성 순서 ] # HTML 작성 # 더보기 HTML 일자리 소식 전자 도서관 당직 직원 # CSS 작성 # #1. 기본 세팅하기 더보기 reset /* #1. reset*/ body, ul, li, a, span, em{margin: 0; padding: 0; font-size: 12px; } em{ font-style: normal } ul{ list-style: none; width: 300px; margin: 50px auto } a{ text-decoration: none; color: #222 } li{ display: inline-block; width: 90px; text-align: center } /*왜 width 값에 따라서 배치가 달라질까? */ .. 2020. 3. 9. 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-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. 이전 1 2 3 4 5 ··· 8 다음
