올리비아 코딩스쿨

프로그래밍은! 1. WET X 프로그래머는 반복되는 일을 지양해야 한다. We Enjoy Typing 2. DRY O 대신, 프로그래머는 dry를 지향해야 한다. Don't Repeat Yourself 3. 주기적인 Refactoring을 하자! 또한, 프로그래머는 코드의 성능을 유지하기 위해 정기적으로 코드를 수정, 보완하는 작업을 거쳐야 한다. 이를 코드 리팩토링이라고 한다. Code Refactoring 코드 리팩토링을 할 때는 아래의 원칙을 지키는 것이 좋다. 1. 가독성 - 누구라도 한눈에 보고 이해하기 쉽도록 쓴다.(가장 중요) 2. 모듈성- 코드의 일부를 재사용할 수 있도록 쓴다. 3. 효율성- 코드가 빠르게 작동하도록 쓴다. 4. 길이- 되도록이면 짧게 쓴다. 하지만 짧게 쓰다가 가독성이나..

날이 갈 수록 PC보다 모바일의 중요성이 커지고 있다. 실제로 요즘 10대들은컴퓨터를 사용하는 시간보다, 모바일에 쏟는 시간이 훨~씬 많다. 영상편집, 글쓰기, 검색 등을 모두 할 수 있으니 컴퓨터 플러그를 연결하고, 전원을 켜고, 부팅하고, 사이트로 들어가, 로그인을 하고, 작업을 하는 긴 과정보다 자동로그인 되어 있는 모바일의 버튼 하나만 클릭하면 되는 간편함을 요즘 시대는 추구하는 것이 당연하기도 하다. 그렇다면 웹개발자는 이런 시대의 특성을 반영해야 한다. 실제로 구글에서는 웹사이트를 검색에서 노출시킬 때, 해당 웹사이트가 다양한 사이즈의 화면에서도 유동적으로 크기를 조절하고 배치하는 웹반응형인지를 체크하고, 그렇지 않다면 검색 순위에서 떨어뜨린다. 따라서 웹개발자는 반응형웹을 구성할 수 있어야 ..

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 마우스를..