교육 썸네일형 리스트형 환경설정 준비물 노트북-크롬 설치-VS Code 설치-폴더 workspace 만들기 더보기 클라우드 컴퓨팅이란? 클라우드 란? 클라우드 컴퓨팅의 줄임말이다. 클라우드 컴퓨팅이란 가상의 저장소를 제공하고 손쉽게 접근할 수 있도록 하는 서비스이다. 손쉽게 사용하고 반납할 수 있는 각종 컴퓨터 자원의 공유 풀(shared pool)에 대해서 어디서나 편리하게 접근할 수 있게 해주는 기술이다. 컴퓨터 자원이란 USB나 외장하드,저장장치 엑셀 같은 프로그램을 말한다. 1. 클라우드 컴퓨팅 개념의 등장 ‘클라우드 컴퓨팅’은 언제 처음 등장했을까요? 의견이 분분하지만, 그 개념 자체는 1961년 John McCarthy라는 컴퓨터 과학자가 맨 처음 제시한 것으로 보입니다. 당시 그는 이렇게 말했습니다. “컴퓨팅 또한 지금의 전화 시스템처럼 언젠가 public utility가 될 것입니다. 그리고 누구나 그것을 사용하는만큼 돈을.. 더보기 실습과제. css 최적화 웹사이트를 열심히 만들다보니 어느덧 코드가 엄청 길어졌습니다. 옆에 앉아 있던 친구가 제 코드를 쓱 보더니 한 마디 하네요. “뭘 그렇게 복잡하게 해? 그거 열 줄이면 되는데~ ㅎㅎ” 아, 자존심 상합니다! 얼른 CSS 코드를 열 줄(빈 줄 제외)로 줄여보세요. 결과물이 동일하다면 HTML 코드를 조금 변형해도 됩니다. 결과물은 아래 사진과 같습니다. 셀프 채점 다음 항목들이 제대로 구현되었는지 확인해 보세요! CSS 코드가 빈 줄을 제외하고 열 줄 이하이다. 코드를 짧게 줄여도 결과물이 기존과 동일하다. 과제 해설 CSS에서 상속을 사용하는 가장 중요한 이유는, 중복 코드를 제거하고 유지 보수를 용이하게 하기 위함입니다. 아래와 같이 HTML을 약간 수정하고, CSS 코드를 정리하면 동일하게 동작하는 .. 더보기 css 우선순위 다양한 선택자를 배워봤습니다. 그런데 여러 선택자가 같은 요소를 가리키면 우선 순위를 어떻게 평가할까요? 순서 우선 가장 간단한 겁니다. 완전 똑같은 선택자가 나중에 또 나오면, 이전에 나온 스타일을 덮어쓰게 됩니다. html Heading 1 css h1 { color: blue; text-align: center; } h1 { color: green; } 명시도 (Specificity) 같은 요소를 가리키지만 선택자가 다르다면, '명시도(specificity)'에 따라 우선 순위가 결정됩니다. 명시도 계산기 명시도 계산 방법을 알려드리겠습니다. 인라인 스타일이 가장 우선 순위가 높습니다. 선택자에 id가 많을 수록 우선 순위가 높습니다. 선택자에 class, attribute, pseudo-class.. 더보기 css 상속 CSS에는 '상속'이라는 개념이 있습니다. 말 그대로 부모 요소의 속성들을 자식들한테 넘겨주는 것인데요. 예시를 한 번 봅시다. html Heading 1 Paragraph bla bla bla css .div1 { color: blue; } .div1의 폰트 색을 blue로 설정해주었고, 과 에 대해서는 별도의 설정이 없었습니다. 그런데도 과 태그의 폰트 색이 파란색으로 설정되었죠? 그 이유는 .div1의 스타일이 자식들에게 상속되었기 때문입니다. 상속되는 속성들 하지만 태그와 속성에 따라 상속이 되지 않는 경우도 많이 있습니다. 예를 들어서 부모 태그에 설정한 margin이 모든 자식들에게도 적용되면 총체적 난국이 되겠죠? 웬만하면 상속되는 몇 가지 속성들입니다: color font-family fo.. 더보기 실습과제. 마우스 오버 버튼 실습과제 마우스 오버 버튼 로그인 페이지 과제의 버튼에 작은 효과를 하나 주려고 합니다. 마우스를 '로그인' 버튼 위에 올릴 경우 로그인 버튼에 box-shadow 속성을 설정해주세요. 속성값은 위 사진에 나와 있듯이 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.50);입니다. 코드는 css/style.css에 작성해주세요. 사이트 도면 다운로드 셀프 채점 다음 항목들이 제대로 구현되었는지 확인해 보세요! 로그인 버튼 위에 마우스를 올리면 과제에서 제시한 대로 그림자가 생긴다. 로그인 버튼에 마우스를 올리면 약간의 그림자를 만드는 방법은 css코드에 .submit-btn:hover { vox-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.50); } 코드를 추.. 더보기 선택자 정리 CSS에서 스타일링 해줄 요소는 '선택자'로 결정합니다. 우리가 이미 알고 있는 것들부터 시작해서, 또 어떤 선택자들이 있는지 살펴봅시다! 태그 이름 HTML Heading 1 Heading 2 CSS /* 모든 태그 */ h1 { color: orange; } 클래스/아이디 HTML Paragraph 1 Paragraph 2 Paragraph 3 Paragraph 4 Paragraph 5 Paragraph 6 CSS /* 'important'라는 클래스를 갖고 있는 모든 태그 */ .important { color: orange; } /* 'favorite'라는 아이디를 갖고 있는 태그 */ #favorite { color: blue; } 자식 (children) HTML Outside Inside 1.. 더보기 실습과제. 코딩의 민족 코딩의 민족 위 이미지의 지시사항을 따라, '코딩의 민족' 웹사이트를 완성해주세요. 참고로 '바로 결제' 버튼은 href="#"로 설정되어 있는 태그로 써주세요! 셀프 채점 다음 항목들이 제대로 구현되었는지 확인해 보세요! 음식 사진의 아래 모서리를 제외하고는, 모든 모서리가 둥글게 설정되어 있다. 식당 제목과 음식 이미지는 가운데 정렬, 식당 설명글은 왼쪽 정렬 되어 있다. 각 메뉴의 이미지와 설명이 도면대로 잘 들어가 있다. HTML 코딩의 민족 넌 코딩할 때가 제일 이뻐 코코스시 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 코데리아 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 코르가즘 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 CSS @font.. 더보기 이전 1 2 3 4 ··· 17 다음
