교육 | 외부활동

자바스크립트로 무엇을 할까 웹 요소를 제어한다. - 웹 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음 - 웹 사이트 UI 부분에 많이 활용 - 마우스 포인터를 올렸을 때 펼쳐지는 메뉴. 한 화면에서 탭을 눌러 내용만 바뀌도록 하는 콘텐츠 다양한 라이브러리를 사용할 수 있다. - 웹을 중심으로 하는 서비스가 늘어나면서 브라우저에서 처리해야 할 일이 늘어남 -> 라이브러리와 프레임워크가 계속 등장 - 예를 들어 시각화를 위한 d3.js, 머신러닝을 위한 tensorflow.js, DOM 조작을 위한 jQuery 등 - 웹 어플리케이션 개발을 위한 React나 Angular, Vue 등이 있다. 웹 어플리케이션을 만든다. - 최근의 웹 사이트는 사용자와 실시간으로 정보를 주고 받으며 어..

글꼴 관련 스타일 font-family 속성 - 웹 문서에서 사용할 글꼴 지정 - 태그를 비롯해 태그나 태그처럼 텍스트를 사용하는 요소들에서 사용 - 지정한 글꼴이 없을 경우에 대비해 두 번째, 세 번째 글꼴까지 지정. - 둘 이상의 글꼴 이름을 지정할 때는 쉼표(,)로 글꼴 구분 - 태그 스타일에서 한 번 정의하면 문서 전체에 적용되고 문서 안의 모든 자식 요소에 계속 같은 글꼴이 사용됨. font-size 속성 단위를 사용해 글자 크기 지정하기 font-style 속성 글자를 이탤릭체로 표시하는 속성 font-weight 속성 글자 굵기를 조절하는 속성 글꼴 관련 스타일 사용해보기 예제 레드향 껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고,..

웹 문서에 디자인 입히기 스타일을 사용하는 이유 HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성한다. -> 스타일을 사용하면 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다. 스타일과 스타일 시트 스타일 형식 알아보기 스타일 규칙 작성 방법 - 중괄호 {} 사이에 스타일 규칙을 나열한다. - 규칙이 여러 개일 경우 세미콜론(;) 으로 구분한다. 스타일 주석 - /*와 */ 사이에 주석 내용 입력 - 한 줄 또는 여러 줄을 입력 가능 스타일 시트 브라우저 기본 스타일 - 브라우저에서 기본으로 적용하는 스타일 - 웹 문서에서 아무 스타일도 적용하지 않고 HTML만 사용해도 그 기능에 따라 크기에 맞게 보여준다. 인라인 스타일 - 스타일 시트를 사용하지 않고 스타일을 적용할 대상..

폼 삽입하기 웹에서 만나는 폼 - 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼(form) - 폼과 관련된 대부분의 작업들은 정보를 저장하거나 검색하거나 수정하는 일들 - 이런 작업은 모두 데이터베이스를 기반으로 한다. - 아이디를 입력하는 텍스트 필드나 버튼 같은 폼의 형태를 만드는 것은 HTML태그이다. - 폼에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP 같은 서버 프로그래밍 이용 속성 설명 method 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정합니다. method에서 사용할 수 있는 속성값은 get과 post입니다. get : 데이터를 256 ~ 4096byte 까지만 서버로 넘길 수 있습니다. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는..

텍스트 태그 알아보기 목록 만들기 표 만들기 표의 구조 정의하기 - 표의 구조를 '제목' 과 '본문', '요약' 부분으로 나눈다. - , , 태그 사용 - 웹 브라우저 화면에서 보이지 않지만, 화면 낭독기나 자바스크립트 등에서 읽을 수 있다. -> 시각 장애인도 표의 구조를 쉽게 이해할 수 있다. - 표의 본문이 길 경우 자바스크립트를 이용해 제목과 바닥 부분을 고정하고 본문만 스크롤되도록 할 수 있다. 이미지 삽입하기 웹페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질은 좋게 유지해야 하기 때문에 주로 몇 가지 파일 형식만 사용한다. -> GIF, JPG, JPEG, PNG img 태그의 src속성 - 웹 문서 파일의 위치를 기준으로 이미지 경로 지정 - HTML과 이미지 파일..

HTML이란? 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 마크업 언어이다. HTML 문서의 기본 구조 1. -> 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻. 2. ~ -> 웹 문서의 시작과 끝을 나타내는 태그이다. 웹 브라우저가 html태그를 만나면 /html 태그까지 소스를 읽어 화면에 표시하게 된다. 3. -> 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분이다. 4. ~ -> 실제로 웹 브라우저 화면에 나타나는 내용이다. 앞으로 우리가 공부할 HTML 태그는 대부분 body태그 안에 들어있다. HTML 문서의 기본 구조 또는 웹 브라우저에게 '이제부터 처리할 문서는 HTML문서이다' 라고 알려주는 것 웹 문서 시작을 알리는 html태그 실제 문서 정보와 내용이 시작..