Html&CSS/html5&css323 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. 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. 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_선택자:nth-of-typenth-of-type()/ nth-child() /not() 코드보기 [더보기] 선택 더보기 [ last-child ] 마지막 자식요소를 선택하는 선택자 첫번째 자식요소 두번째 자식요소 세번째 자식요소 [ nth-of-type()/ nth-child() ] 몇번째 자식을 선택할 것인지 1) nth-of-type() : 해당하는 요소들 중 몇 번째 요소 2)nth-child():전체에서 몇번째 요소 1. 첫번째 p요소 -----------> 1 1.첫번째 strong요소 -----------> 2 2. 두번째 p요소 -----------> 3 2.두번째 strong요소 -----------> 4 3. 세번째 p요소 -----------> 5 3.세번째 strong요소 -----------> 6 [ not() ] :not() ()을 제외하고,~~ 지정/스크립트에서도 씀 2020. 3. 4. 0227_html5/css3_단락나누기, column-cont/column-width [ column ] 단락 나누기 /ie 10부터 가능 SKT “5G 실내 중계기 기술력 유럽 뚫었다” (지디넷코리아=박수형 기자)SK텔레콤(대표 박정호)은 도이치텔레콤과 함께 국내 기술 기반으로 개발한 5G RF 중계기를 2분기 중 독일 주요 도시에 구축한다고 27일 밝혔다. 5G RF중계기는 실외 기지국의 5G 전파를 받아 빌딩, 터널, 지하공간 등 전파가 닿기 어려운 실내로 증폭시켜 전파 도달 범위를 넓히는 장비다. 유선망 없이 신호를 중계하기 때문에 유선망이 국내보다 열악한 유럽에서 높은 관심을 보이는 기술이다. 지난해부터 국내 주요 건물에 설치되고 있는 5G RF 중계기를 두고 SK텔레콤과 도이치텔레콤은 독일을 비롯한 유럽 환경에 맞게 개선했다. 양사는 이달부터 중계기 현장 테스트를 진행하고, 올.. 2020. 3. 4. 0227_html5/css3_animation-3 [ animation ] 애니매이션:반복적인 패턴의 움직임 - animation은 반드시 @keyframes과 같이 써야함 animation 코드보기 [더보기]선택 더보기 [ animation ] 애니매이션:반복적인 패턴의 움직임 - animation은 반드시 @keyframes과 같이 써야함 animation 2020. 3. 4. 0227_html5/css3_animation-2 [ animation ] 애니매이션:반복적인 패턴의 움직임 - animation은 반드시 @keyframes과 같이 써야함 animation 코드 보기 [더보기] 선택 더보기 [ animation ] 애니매이션:반복적인 패턴의 움직임 - animation은 반드시 @keyframes과 같이 써야함 animation 2020. 3. 4. 0227_html5/css3_animation [ animation ] 애니매이션:반복적인 패턴의 움직임 - animation은 반드시 @keyframes과 같이 써야함 animation 코드보기 [더보기] 선택 더보기 [ animation ] 애니매이션:반복적인 패턴의 움직임 - animation은 반드시 @keyframes과 같이 써야함 animation 2020. 3. 4. 이전 1 2 3 다음
