HTML/CSS 첫 걸음

HTML 기본구조

① HTML: HyperText Markup Language

    ● 사용자(유저)가 브라우저를 통해서 웹페이지에 접속을 할 때, 개발자가 사용자에게 보여주고 싶은 컨텐츠를 브라우저가 읽을 수 있도록 만들어놓은 문서

    ● html태그안에 head태그와 body태그를 적는것이 가장 기본적인 구조

    ● head태그에는 body태그를 읽기 이전에 알아야할 정보와 이 HTML 파일의 기본적인 정보를

    ● body태그 안에는 사용자에게 보여주고 싶은 콘텐츠를 넣음

    ● 버전 확인을 위해 doctype선언을 꼭 해줄것

    ● ! + enter키로 기본적인 구조 만들 수 있음

 

HTML 을 이루는 Tag- 태그의 선언

① 태그 사용방법

    ● <>안에 태그이름을 넣어주면 됨

    ● <>여는태그 </>닫는태그

    ● 여는태그와 닫는태그 사이에 컨텐츠를 입력하여 사용자가 볼 수 있게 해줌

    ● 태그 안에도 태그를 넣을 수 있음

    ● 모든 태그가 닫는태그가 있는것이 아님

        ○ 컨텐츠가 필요로 하지 않는 태그에는 닫는 태그가 없음

 

HTML 을 이루는 Tag- 태그의 구조

    ● 태그들은 계층적으로 이루어져 있음

    ● 부모, 자식 관계를 이루고 있음

    ● 자식태그들은 부모태그가 닫히기 이전에 닫혀야함

    ● 들여쓰기를 통해 계층을 좀 더 알아보기 쉽게 함

 

HTML 을 이루는 Tag- 태그의 속성

    ● 여는 태그에서 태그의 속성을 정의할 수 있음

    ● class와 id가 있음

    ● 태그들 마다 각자 가지고 있는 성질에 따라 속성은 필수 일 수도 옵션일 수도 있음

 

CSS - Inline 방식으로 적용하기

    ● HTML은 웹페이지의 내용, CSS는 웹페이지의 디자은을 담당함

    ● html의 태그 안에 속성을 정의해서 디자인을 입힐 수 있음

 

CSS - Style 태그로 적용하기

    ● head영역에 style태그를 만들어서 그 안에 스타일을 입힐 태그 {} 로 스타일 넣어주기

    ● 브라우저는 문서를 위에서 밑으로 읽기때문에 오류를 방지하기 위하여 style태그를 head안에 넣어줌

    ● class로 선언한 것은 .class, id로 선언한것은 #id

    ● 한 태그안에 class와 id모두 선언된것은 id가 이기기 때문에 id값이 입혀짐

    ● 태그 < class < id

    ● css가 겹치게 되면 inline속성이 먼저 적용이 됨

 

CSS - class와 id속성

    ● id의 값은 하나만 있어야함

    ● 굳이 id를 쓰고 싶다면 값을 다르게 해서 쓰도록 함

    ● class는 여러번 중복되어도 됨

    ● 쌍따옴표 안에 여러개 클래스를 부여할 때는 스페이스바로 나누어줌

 

CSS - Link 태그로 CSS파일 불러오기

    ● html파일에서 link:css로 css링크 걸어주기