HTML 기초

1. html편집기!!!아톰 에디터 Atom editor 설치하기


2. HTML의 기본 문법 (Basic HTML Grammar)


3. html5언어 구조_index.html


4. html5언어 구조_index.html


5. html5언어 구조_index.html

신텍스 하이라이터 SyntaxHighter?????

신텍스 하이라이터란 아래처럼 블로그 포스팅 안에 HTML 소스를 보여지게 하는 기능입니다.

참 유용한 기능이죠.

  


     
        
        
    
    
        
        
welcome to maranatha home

        MARANATHA
        

        

        즐겨찾는 페이지
        

        

        
        

물론 다른 방법도 있습니다.

아래처럼 순수하게 TEXT로만 보여지게 하면 간단하죠.

무선을 선택하든 맘에 드는 걸로 알아서 하면 됩니다.

신텍스 하이라이터 SyntaxHighter 다운로드 방법

syntaxhighlighter_3.0.83.zip

위의 압축 파일을 다운 로드 받아서 압축을 풀어줍니다.

복잡하거나 html을 잘 모르는 분이라면 위의 파일을 다운로드 받아서 압축을 풀어주면 됩니다.

아니면 아래의 사이트로 가서 다운로드를 받아도 됩니다.

문제는 영어라는거..ㅎㅎ;;;;

다운로드를 받아서 압축을 풀면 아래와 같은 폴더가 만들어집니다.

syntaxhighlighter_3.0.83의 압축파일을 풀면 아래와 같은 파일들이 들어 있습니다.

이제는 이 파일들을 티스토리에 적용을 시켜보겠습니다.

신텍스 하이라이터 SyntaxHighter 티스토리[Tistory]에 설치하기

티스토리 화면에서 블로그 관리자 화면으로 들어갑니다.

기본 설정에서 단축키 [Q]를 눌러도 블로그 관리자 화면으로 들어갑니다.

관리자 화면에서 [1]의 스킨 변경으로 들어가서 

[2]번의 스킨 다운로드를 클릭해서 현재의 스킨을 다운로드 받아서 따로 저장하면 좋습니다.

지금부터 스킨의 html과 css를 수정할 텐데 수정을 잘 못하면 되돌릴수 없는 요단강을 건너는 수가 있기때문에 안된다 싶으면 원본 파일로 다시 설치 해보리면 됩니다.

물론 이 방법 외에도 다른 방법이 있으니까 잘 찾아보기시 바랍니다.

[3]번 스킨 편집을 클릭합니다.

[3]번을 클릭하면 화면이 분할 되면서 우측에 스킨 편집 화면이 나옵니다.

[html 편집] 버튼을 클릭합니다. 

     
        
        
    
    
        
        
welcome to maranatha home
        MARANATHA
        

        

        즐겨찾는 페이지
        

        

        
        
 

sitemap.xml

 Won's Factory 

HTML의 기본 문법 (Basic HTML Grammar)

기본 문법의 표준이라는 뜻은 정해놓은 규칙이나 절차라는 의미입니다.

웹 표준을 준수한다는 의미는 '정해진 규칙을 잘 치켜서 마크업(makr-up)한다라는 의미입니다.

중요한 용어에 대해서 잠깐 설명을 해보겠습니다.

<P> , <spen> , <a> 등과 같은 명령어의 형태가 <>(각괄호)안에 들어가 있을 때 이런 문장들을 [Tag]라고 합니다.

<P>~</P>와 같은 태그[Tag]의 시작과 끝에는 <>으로 시작해서 </>로 끝나게 되어 있습니다.

이러한 각 괄호 안에 들어가 있는 <>~</>를 요서[element]라고 합니다.

XHTML 문법의 규칙은 다음과 같습니다.

요소는 정확하게 중첩되어야 합니다.

<a>요소에서 'href'를 속성[attribute]라고 합니다.

'='다음에 오는 것을 값[value]라고 표현합니다.

요소는 꼭 닫아서 마무리를 합니다.

아래의 이미지들은 maranatha의 html 이미지 소스들입니다.

점선 긋기

아래 이미지 입니다.

HTML

원본이미지-잘 찾아보면 중앙에 점4개짜리 이미지가 있습니다.

무료 호스팅의 최강자 깃허브 Git Hub!!!

무료 호스팅의 최강자 깃허브 Git Hub!!!

무료 호스팅의 최강자 깃허브 Git Hub!!!

깃(Git)의 대중화를 이끈 깃허브(Git Hub)

깃허브(Git Hub)를 알기 위해선 ‘깃(Git)’의 개념부터 살펴 보자. 깃(Git)은 2005년에 개발된 분산형 버전관리 시스템(DVCS)이다. 오픈소스 소프트웨어로, 리눅스를 만든 리누스 토발즈와 주니오 하마노가 깃을 개발했다. 깃(Git)을 이용하면 누가 어떤 코드를 수정했는지 기록하고 추적할 수 있다는 것이 가장 큰 장점이다. 많은 사람들이 함께 소프트웨어를 개발할 때 유용하다. 관리자는 여러 사람의 코드 중 일부를 합쳐가며 완성본을 만들어갈 수 있다. 버전 관리 시스템은 깃(Git) 외에도 SVN, CVS 등 여러가지가 있었지만 수 천명의 사람들이 이용해도 안정적이며 중앙저장소에 의존하지 않아 속도도 훨씬 빠르다는 장점이 있다.

깃허브(Git Hub)는 깃(Git)을 보다 편하게 이용할 수 있게 만든 무료 호스팅 서비스다. 

깃허브(Git Hub)를 이해 하려면 깃(Git)이 무엇인지를 먼저 이해해야 한다.

깃(Git)은 명령어를 입력하면서 이용해야 하지만 깃허브(Git)는 웹 그래픽 기반으로 깃을 이용할 수 있는 환경을 제공했다. 깃(Git)에 대한 관심이 높아졌던 덕분에 깃(Git)을 쉽게 이용할 수 있는 깃허브(Git Hub)에 대한 관심도 자연스레 쏠렸다. 그냥 그저 그런 관심이 아니고 완전 폭발적인 반응이었다.

깃허브의 가장 강력한 기능은 ‘포크’다. 

포크는 내 계정으로 외부 프로젝트 코드 저장소를 그대로 복사해주는 것을 말한다. 오픈소스 프로젝트들은 많은 사람들이 사람들이 함께 소스코드를 수정하면서 공동 잡업을 한다. 과거에 이러한 소스코드를 수정하려면 각자 알아서 최근 소스코드 파일을 내려받고, 수정하고, e메일로 수정된 소스코드를 보내야 했다. 깃허브(Git Hub) 덕에 소스코드를 복사하고 배포하던 과정을 클릭 몇 번만으로 가능해졌다. 또 웹사이트에 소스코드가 공개되니 검색도 쉬워졌다. 또한 소스코드에 외에 관련 문서나 번역 페이지도 붙일 수 있고, 관련 통계도 제공됐다.

유명 IT 산업 잡지<테크크런치>는 2012년 “깃허브(Git Hub)는 오픈소스 개발에 입문하는 장벽을 낮추고 누구나 오픈소스 프로젝트에 참여할 수 있게 만들었다”라며 “초기 단계 오픈소스 프로젝트들이 쉽게 성장하는 데 도움을 줄 것”이라고 평가했다.

GitHub의 장점

깃허브(Git Hub)의 최대 장점은 오픈 소스 프로젝트일 경우는 무료이다!!!

코딩을 연습하거나 코딩을 배우고 간단한 홈페이지나 프로그램을 만들어볼때 가장 유용하다.

진정한 무료 웹호스팅

검색엔진에서 '무료 호스팅'등으로 검색을 하면 대부분 광고뿐이지 진짜 무료 호스팅을 찾아볼 수 없거나 대부분 옵션이 걸려있다. 깃허브(Git Hub)는 GitHub Pages라는 이름으로 웹 사이트 호스팅 서비스도 제공하고 있다. Jekyll이라는 Ruby 기반 정적 CMS 툴을 내장하고 있다.  지킬을 사용하지 않을 경우에도 평범한 HTML/CSS/JS를 툭 던져놓으면 홈페이지로 쓸 수 있다. github.io라는 이름으로 저장소를 만들면 된다.

FPT가 필요없는 GitHub Pages

각 소스코드 저장소마다 홈페이지를 한개씩 만들 수 있다. 

GitHub Pages의 하위 디렉토리로 들어가게 된다.

각 레포지토리마다 별도의 이슈 트래커를 무료로 지원한다. 

마이크로소프트도 GitHub의 이슈 트래커를 상당히 애용하고 있다.

강력한 공동 작업

2명 이상의 협력자(Collaborators)를 등록하여 하나의 프로젝트를 가지고 GitHub를 통해 공동 작업할 수 있다.