IT업계 종사자의 블로그

[Project H4C] 21. JS, PHP 데이터 타입과 연산자 문자표기(큰따옴표) 숫자표기(숫자 그대로 적기) 큰따옴표 안에 있는 숫자는 문자로 인식됨. js에서 "10"+"10" 이라고 입력하면 문자로 인식된다. 반면에 php는, "10"으로 표기하면 문자로 인식하긴 하지만 가운데 "+"는 숫자의 연산자이므로 php는 우리가 실수한 줄 알고 10+10인 값인 20을 출력하게 된다. php에서 문자와 문자를 결합하고 싶다면 "." 을 쓰면 된다. 이렇게 "."을 쓰면

[Project H4C] 20. JS, PHP 웹페이지에 코드 삽입 프로그래밍 언어 기본 문법 배우기 첫번째. PHP 기본적으로 PHP는 HTML과 유사하다. phpjs 폴더 안에 1.php 파일 만들기 php의 시작을 알리는 태그: php에서 출력 태그: echo Hellow world 문자 출력하기 echo 다음에 10+10 이라고 입력하면 PHP가 계산해서 20이라는 값을 보여 준다. 두번째. JavaScript JavaScript의 시작을 알리는 태그: js 에서 어떤 정보를 화면에 출력하는 태그: document.write("출력하고자 하는 내용"); js에도 php처럼 10+10을 적어주면 더한 값인 20이 뜬다. localhost 페이지에서 우클릭 - 페이지 소스 보기 하면 php와 js의 ..

[Project H4C] 19. CSS 실습 2 이전 편에서 만든 page_vc.html 편에서 만든 부분을 copy 해서 각 페이지에 적용해주면 된다 첫페이지(index.html)의 밑에 붙여넣기 한다. 만약 세부 페이지 중 '변수와 상수' 부분의 글자 크기를 키우고 싶다면 스타일 안에 h2 를 지정하고 font-size:50;을 추가하면 그런데 만약 잦은 디자인 수정을 해야 된다면? CSS를 html로 부터 분리하자..!! style 안에 있는 내용을 따로 따서 style.css 파일 안에 붙여 넣는다. 각 파일의 은 지운다. 추가한다. 만약 또 다른 수정이 필요하다면 style.css의 문서의 내용만 수정하면 모든 페이지에도 변경 내용이 적용된다.

[Project H4C] 18. CSS 실습 1 본격적으로 CSS 실습을 시작해보자. UI 모델링으로 그려본 사이트 디자인을 CSS를 활용하여 만들어보자. 우선 빨간 박스부터 시작하다. 제일 위 제목의 JavaScript 는 JavaScript 로 표현할 수 있다. 그리고 CSS로 디자인 해야되는 요소는 하단 테두리, 적절한 여백을 주어서 UI모델링과 비슷한 디자인으로 완성시켜보자 우선 JavaScript는 header 부분에 해당한다. style을 추가하여 header 밑에 아래 테두리 추가하기 content와 border 사이의 간격을 padding으로 조절해보자 padding:20px; 추가하기 이제 왼쪽 메뉴바에 있는 nav 부분을 만들어보자. 와 , 로 html은 구성된다. 디자인적 요소의 CS..

[Project H4C] 17. CSS float 우선 새 파일 ex_css_3.html 을 만들고 긴 글 아무거나 body안에 붙여넣기 한다. body 안에 추가하기 이제 저 이미지에 테두리를 적용해 보자. 안에 이라고 추가한다. 글들을 이미지 오른쪽의 여백으로 끌어올리고 싶다면 img태그에 float:left; 추가한다. float:right;로 바꿔주면 이미지가 오른쪽으로 옮겨지게 된다.

[Project H4C] 16. CSS 박스 모델 위 태그를 htdocs > css > ex_css_2.html 경로에 저장하고 시작해보자. head에 style 태그를 넣고 태그에 빨간색 테두리 넣기 css에만 빨간색 테두리 넣어보자. css를 사용하고 head에 li를 #selected로 바꿔주면 된다. css의 빨간 테두리와 css글자 사이의 간격을 수정하고 싶다면 padding:30px 을 추가한다. javascript글자에 파란색 테두리를 적용하고 싶다면 id="extra"로 정의 후 border:blue 1px solid;를 추가한다. css와 javascript 박스 사이의 간격을 띄우고 싶다면 margin:50px; 추가한다. -margin: 태그와 태그 사이의 간격 박스모델 정리 bord..

[Project H4C] 15. CSS이론 심화 학습 (14. CSS 기본 문법에서 이어짐) h1에 폰트사이즈 추가하기 CSS에서 h1에 적용된 이 두 요소를 "속성"이라고 한다. 속성과 속성을 구분하는 기호는 세미콜론(;)이다. 이렇게 줄 바꿔서 작성 가능하다. ,h2 를 추가하면 h2도 똑같이 적용된다. 이렇게 하면 h2에 밑줄이 표시된다 h1에 header 추가하고 header밑에 있는 h1 코드에만 스타일을 적용하고 싶다면 header h1 { }을 쓰면 된다.

[Project H4C] 14. CSS이론 기본 문법 웹 사이트를 아름답게 표현하는 언어. CSS. CSS는 HTML과는 완전히 다른 독립된 언어이다. 하지만 CSS는 HTML을 떠나서 살 수 없다. 왜냐하면 CSS가 고안된 기본적인 목표가 HTML을 디자인하기 위해서 고안된 것이기 때문이다. 두 언어의 공존을 위해 태그가 나오면 '아, 이제 CSS 문법 끝났으니깐 다시 HTML 문법을 따라야겠네..' 라고 생각하면 된다. 오늘의 문법 선택자: 누구에게 적용시킬 것인가. 서술: 어떤 효과를 선택자에게 줄 것인가.

개발도구에 대해 생각해보자. 버전 관리 시스템이란? 코드들이 변화했던 히스토리를 기록하는 관리 시스템 (문제가 어디에서 발생했는지, 누구에게 발생했는지 등을 파악할 수 있다) 작업한 결과물을 서버에 저장해주기도 한다. (백업용) 생활코딩피셜: 버전관리 시스템은 꼭 익혀두어야 한다 버전관리 시스템에는 SVN, Mecurial, GIT 등이 있는데 GIT 을 많이 사용한다. 생활코딩 GIT강의 http://opentutorials.org/course/1492 GIT-SourceTree (새수업으로 대체) - 생활코딩 이 수업은 GITn 시리즈로 완전히 대체 되었습니다. GITn은 보다 많은 내용을 작은 단위로 쪼개서 선택적으로 공부하실 수 있도록 제작된 수업입니다. 아래 주소를 통해서 GITn 을 접할 수 ..

[Project H4C] 12. 사이트 완성 index.html 대문 페이지라고 약속되어 있다. => 해당 홈페이지의 정보를 담고 있는 파일이라는 암묵적인 약속..! e.g.) 위 예시 페이지에서 큰 메뉴인 JavaScript, 그리고 각 리스트에 있는 1번 JavaScript란?, 2번 변수와 상수, 3번 연산자에 링크를 추가한다. - 큰 메뉴인 JavaScript에 링크 추가하기 JavaScript (이 때 어떤 페이지에 들어가서도 대메뉴 JavaScript를 클릭하면 첫 화면으로 들어올 수 있게 위 태그를 모든 html 문서에 추가하여 저장한다.) - 리스트 1번 JavaScript란? 에 링크 추가하기 JavaScript란? (이 때 1번 "JavaScript란?" 메뉴를 클릭했을 때 뜰 내용이 ..