올리비아 코딩스쿨

1. 기본 stacking order html에서는 쓰여진 순서대로 차례차례 쌓이는(stack) 것이 기본이다. yellow blue red .yellow { height: 100px; width: 100px; background-color:yellow; } .blue { height: 100px; width: 100px; left:50px; background-color:lightblue; } .red { height: 100px; width: 100px; left:100px; background-color:red; } 2. 부모-자식 parent-child 그런데 HTML 요소 간에 계열이 있다면, 부모 위에 자식이 올라온다. 노랑(부모) - 파랑(자식) 간의 계열로 바꾸면 파랑이 노랑색보다 위에 있..

부트스트랩에서 카드를 만들어 자료 구조를 시각화해보자. 1. card-header, body, footer 카드는 html이 헤드, 바디, 푸터로 나누어 코드를 작성하는 것처럼 코드를 쓴다. 이번에는 헤더와 바디만 써보도록 하자. card header card body 2. 크기에 따른 반응형 class ="row", class="col-lg-6" 등을 사용하여 반응형 카드를 만들어보자. col-lg-4 화면의 크기가 'lg' 이상일 때는 한 줄의 4/12만큼의 크기로 존재하다가, 그 이하로 줄어들면 화면의 100%로 바뀐다. 첫 번째 카드 두 번째 카드 세 번째 카드 이번에는 이 상태에서 col-md-6, col-md-12를 추가하여 첫 번째, 두 번째 카드는 가로 사이즈가 md 이상일 때는 전체의 6..

캐러샐이란 파워포인트의 슬라이드쇼 같은 것이다. 동일한 화면 위치에서 특정한 규칙에 따라 글이나 사진 같은 데이터들이 넘겨진다. 마우스나 방향키를 사용해 옆으로 넘길 수도 있고, 자동으로 넘어가도록 설정할 수도 있다. 1. 슬라이드 자동 넘기기 2. 옵션 넣기 이런 옵션을 설정할 때는 반드시 이름에 data-bs-를 붙인다. 1) interval 속도 조절하기 interval은 어떤 것과 어떤 것 사이의 간격을 의미한다. 기본값은 5000밀리초이다= 5초 interval 옵션을 통해 데이터 간 변경 속도를 조절한다. >>>>>>>속도(interval)을 1초로 수정함 >>>>>>>속도(interval)을 1초로 수정함 >>>>>>>속도(interval)을 1초로 수정함 2) hover-pause 마우스를..

아이콘 사이즈 무료 아이콘을 가져올 수 있는 웹사이트를 알고 싶다면 폰트어썸 사이트를 참고하면 된다. fontawesome------------>클릭 만약 아이콘 크기를 키우고 싶다면, 1) 먼저 사이즈를 확인한다. 사이즈를 표현하는 방법은 상대적인 사이즈(relative sizing)와 문자적인 사이즈(literal sizing)이 있다. 상대적인 사이즈는 2xs부터 2xl 사이즈까지 있다. 문자적인 사이즈는 1x부터 시작된다. 2) 코드를 작성해보자. 방법은 두 가지가 있다. 첫 번째, 클래스에 fa-size를 추가한다. 두 번째는 CSS 코드로 적어준다. .feature-icons { font-size: 3rem; } .feature-icon { color: blue; } 아이콘 hover 사용자가..

text-align 내용을 정렬해보자. CSS의 text-align 속성을 이용한다. 값은 center, left, right, justify가 있다. div.a { text-align: center; } div.b { text-align: left; } div.c { text-align: right; } div.d { text-align: justify; } 아래 화면에서 글씨가 가운데 정렬이 되어 있다. 실제 HTML과 CSS를 비교해보면서 text-align코드를 확인해보자. 학생. 학생들이 주도가 되어 배움을 일으키는, 자기주도학습 선생님. 학생들의 진심어린 조언자, 학생들이 믿고 따르는 어른 학부모. 학교를 신뢰하고 지지해주고 힘을 복돋아주는 조력자. #features { padding: 10%..