코딩 일지

1. CSS의 주요 속성과 값1) 색상과 배경 지정■ color 속성, background-color 속성, background-image 속성, background-repeat 속성, background-attachment 속성, background-position 속성, background 속성 등이 있음 2) 폰트 지정■ font-family 속성, font-style 속성, font-variant 속성, font-weight 속성, font-size 속성, font 속성 등이 있음 3) 텍스트 지정■ text-indent 속성, text-align 속성, font-decoration 속성, letter-spacing 속성, word-spacing 속성, text-transform 속성, white..

[ CSS ] : HTML 태그를 화면상에 어떻게 표현할지 설정. 즉, 문서의 내용을 디자인하는 방식을 말한다.>> 브라우저에 표시되는 문서의 형태를 다르게 표현함. 1. CSS 사용 이유: □ CSS를 통해 화면의 크기에 반응하여 자동으로 내용이 최적화되어 보이도록 설정할 수 있다.(=반응형 웹)□ HTML은 웹 페이지의 서식 설정을 위한 태그를 사용하지 않는 것이 좋다.>> CSS 라는 단일 체계에서 서식을 통합적으로 관리하여 체계적인 웹 사이트 개발과 이에 따른 개발 비용 감소를 이끌어내고자 함. 2. CSS 기본 사용 규칙1) 작성 위치 (3가지 방법 존재)(1) 인라인 스타일 시트 : 스타일을 적용할 HTML 파일 태그의 속성에 직접 지정한다. □ 한번에 여러 태그에 효과를 줄 수 없어 비효율..

1. HTML5 문서 구조■ 시맨틱 태그(sementic tag) : 의미적 태그. 태그명이 표현하는 데이터를 설명※ 페이지 기술 방식 변화□ HTML  : 문서를 좀 더 구조적으로 표현하기 위해 태그로 문서 구조의 각 영역을 구분하였다. 헤더/내용/푸터로 구분하여 가독성을 높이고, 각각 id 속성을 통해 영역을 구분한다.□ CSS : 문서를 표현하는 곳. HTML 태그로 이루어진 웹 페이지에 디자인을 입혀 표현□ JS : 웹 페이지에 필요한 작업 처리나 서버에 웹 페이지 요청을 담당.※ HTML5에 추가된 새로운 태그1) 시맨틱/구조적 태그1. 태그사이트의 소개나 내비게이션 등을 표시2. 태그사이트의 내비게이션(메뉴) 항목을 표시. 주로 에 넣어 표시3. 태그문서의 내용(글)을 표시하는 태그. ..

1. HTML 개요HTML이란?마크업 언어로, 웹 문서를 작성하며 태그를 사용해서 문서의 구조 등을 기술하는 언어.■ 각각의 HTML 태그는 문서 내에서 다른 내용을 기술한다.■ 보통 HTML 태그는 시작 태그와 종료 태그로 둘러싸여 표현되며, 과 같은 단독 태그도 존재한다.■ HTML 문서는 웹 브라우저에서 실행한다. ■ 어느 태그에나 넣을 수 있는 글로벌 속성 종류1. class태그에 적용할 스타일의 이름 지정2. dir내용의 텍스트 방향 지정.3. id태그에 유일한 ID를 부여함. 자바스크립트 제어에서 주로 사용4. style 인라인 스타일 시트를 적용하기 위해 사용ex. 하하하2. HTML 기본 태그-1) 태그 : html 문서에 대한 정보를 써 놓은 곳. 메타 데이터에 해당한다.■ , , , ..

■ 이클립스 기반에서 웹 사이트를 구축하려면 자바, 톰캣, 이클립스 순으로 설치할 프로그램이 너무 많아 세팅이 힘들다.>> 클라우드 기반의 코드 학습 및 사이트를 제공하는 사이트를 이용해서 학습할 수도 있음. 1. w3schools.com■ 온라인 웹 프로그래밍 학습 사이트. 여러가지 기능을 제공■ 해당 사이트에서 작성한 코드는 직접 다운로드 불가능하며, 소스코드를 복사해서 다른 툴에서 사용 가능 2. jsbin.com■ 클라이언트 사이드 웹 프로그래밍 코딩 기능 제공.■ 개발 툴 사용이 번거로울 경우 사용■ 코딩과 동시에 결과가 바로 표시되는 구조. 코드를 다운로드 받을 수 있고 라이브러리 추가도 쉽다.

[개발 환경 작성 순서]1. JDK 다운로드, 설치 및 환경 변수 설정JDK : 자바 개발 킷. 자바 기반의 프로젝트 작성 및 이클립스 사용에 필요2. 톰캣 다운로드, 설치 및 환경 변수 설정톰캣 : 웹 컨테이너. [웹 서버 + 웹 어플리케이션 서버(WAS) + 웹 컨테이너]의 기능 포함3. 이클립스 다운로드, 설치 및 실행이클립스 : IDE4. 이클립스에서 웹 애플리케이션 작성웹 애플리케이션 : 웹 기반에서 작동하는 웹 앱 및 모바일 웹 앱 1. JDK 다운로드, 설치 및 환경 변수 설정■ JDK : 자바 기반에서 작성되는 프로그래밍을 실행할 수 있는 환경으로 만들어주는 개발환경 도구■ 오라클 사이트에서 다운로드. ■ 자바 컴파일 명령어(javac)와 실행 명령(java)의 위치를 컴퓨터에게 인식시켜 ..

HTML, CSS, JAVASCRIPT가 무엇인가?■ HTML : 하이퍼텍스트 마크업 언어의 약자로,  "웹 페이지 작성" 시 사용하는 프로그래밍 언어이다.□ , 등의 태그 사용 ■ CSS : 캐스케이딩 스타일시트의 약자. HTML 웹 페이지를 브라우저에 표현하는 방법. "디자인"을 의미 ■ JavaScript : 웹 브라우저에서 동작하는 프로그래밍 언어. "동작 처리"에 사용HTML, CSS, JAVASCRIPT의 활용① 웹 사이트 작성■ 반응형 웹 사이트 : 웹 사이트가 표시되는 화면의 크기에 따라 사이트의 표현 구조가 자동으로 변경되는 웹 페이지② 사물 인터넷 구현라즈베리 파이 컴퓨터③ 게임 작성HTML5 기반 게임④ 인공지능 프로그래밍텐서플로(TensorFlow)

[ 1. 글꼴 ] ① font-family : 글꼴 지정 font-family: | [, ] □ 사용자의 시스템에 지정한 글꼴이 설치되어 있지 않을 때를 대비하여 ,(콤마)를 통해 여러 개의 글꼴을 지정함 body { font-family : "맑은 고딕", 돋움, 굴림 }＊ 맑은 고딕에만 쌍따옴표("")가 있는 이유는 두 단어 이상으로 된 이름을 갖고 있기 때문에.□  3개의 글꼴 지정. 만약 맑은 고딕이 없다면 돋움, 돋움도 없다면 굴림을 지정한다. ② font-size : 글자 크기 지정font-size : | | | □ 보통 px, pt, em, rem, ex 등의 단위를 사용하여 크기를 지정한다.p { font-size : 16px; }③ font-style : 이탤릭체 사용□ italic..

웹 디자인에는 CSS를 사용함. 웹 문서의 디자인을 구성하는 것이 CSS! 스타일과 스타일 시트선택자 {속성1: 속성값1; 속성2: 속성값2; } □ 중괄호 안에 스타일 정보 작성 □ 스타일 규칙 : 속성과 값이 하나의 쌍으로 이루어진 것. 세미콜론으로 구분하여 여러 개 작성 가능□ 선택자 : 웹 문서에서 어느 부분에 스타일을 적용할지 알려주는 것 p { text-align : center; color : blue; }p를 선택자로 지정하여 스타일 지정. 텍스트 정렬을 지정하는 text-align을 통해 중앙 정렬하고 글자색은 파란색으로 지정 + ) css는 네트워크를 통해 파일로 내려받으므로 되도록이면 파일 크기가 작은 것이 좋다.  □ 스타일 시트 : 스타일 규칙을 한눈에 확인하고 필요..

[1. 이미지 삽입하기]■ src : 이미지 파일 경로를 지정하여 웹 브라우저에 알려주는 역할. 필수■ alt : 화면 낭독기 등에서 이미지를 대신 읽어줄 텍스트 입력   - 인터넷이 불안정하거나 파일 경로 잘못 넣어서 이미지를 제대로 표시할 수 없을 때도 이미지 대신 alt 텍스트 나타남.  □ width, height 속성: 이미지 크기 조절. □ width : 너비□ height : 높이 - 둘 중 하나만 지정해도 나머지 속성은 비율을 자동으로 계산해서 나타냄- 퍼센트(%), 픽셀(px) 사용 원래 크기 이미지 width = "50%", heigh="50%"로 지정한 이미지 width="150"으로 지정한 이미지   [2. 오디오와 비디오 삽입하기]■  □ : 대부분의 브라우저에서 사용..