HTML CSS 복습

-HTML tag사이에 넣는 텍스트가 무언가가 된다. (title,image 등)

 

-브라우저는 아무 의미가 없어도 이해하려함.

 

 -h1 = header 글자 no.1 ~ h6까지 존재

 

-Header, main footer 

div 태그랑 같이 쓸 수 있음

태그들을 이용하여 시네마틱으로 짜면 좋음

 

Div - div는 의미가 없는 box

-div 태그는  Block 속성 칸을 다 차지삼

 

span -은 짧은 text를 위한 태그

 

Attribute 값에는 큰 따음표 무조건 ""

a=anchor를 뜻함 // link

 

href= http reference 라고 함! // anchor 태그에만 추가 가능

 

target = 기본값은 self 이고 , _blank 입력 시 새 탭에서 링크가 열림

 

img = 다른 태그와 다르게 /로 닫는 태그가 없다 자체 닫기 태그이기 때문

 

scr = img 안에 사진을 집어넣음

 

-CSS 와 HTML 을 섞는 방법

 

1. 같은 HTML 파일에 HTML,CSS 코드를 놓는 방법

head tag 안에 style tag를 작성한다

 

2. CSS와 HTML을 분리시키는 방법 ( 이걸 더 선호함)

-link tag 를 이용해 style.css와 연결하고 rel을 이용해 관계를 적어준다.

 

 

-CSS가 하는 일은 HTML에 색을 입혀줌 HTML 태그를 가리키는 일을 함.

 

동작원리

1.태그를 지정한다.

2.원하는 속성값을 쓴다.

 

브라우저가 CSS를 읽을 때 위에서부터 순서대로 읽는다.

CSS를 직접 적는 것을 inline CSS , CSS 파일을 include 하는 것을 external CSS라고 한다

만약 같은 selector를 가리키는 CSS 가 여러개이면 가장 마지막 스타일이 적용된다!

 

div 는 옆에 다른 div가 오지 않는다 

span은 옆에 다른 span이 올 수 있다.

 

div는 위에서 말했듯이 block 효과를 가지고 있고 옆에 다른 요소가 오지 못한다.

span은 inline 효과를 가지고 있고 자기만에 영역을 가지고 있다. (in the same line)

 

하지만 div 든 span이든 block 속성과 inline속성은 바꿀 수 있다.

 

inline속성은 높이와 너비를 가질 수 없고 

 

block 속성은 높이와 너비가 있다.

 

block의 특징으로는 margin,padding,border 가 있고.

브라우저는 기본적으로 style 속성을 준다

 

margine - 선 기준 경계의 바깥에 있는 공간

padding - 선 기준 안쪽 공간이라고 보면 된다.

 

방향 설정 없이 크기 설정을 주면 사방에 전부 다 적용 되고 , 하나씩 적용하면 시계방향으로 적용이 된다

두개를 줄 경우 상하 , 좌우 이다

 

그리고 상하에서는 Collapsing margin 현상이 발생한다. 

div margin이 body margin과 같을 때 발생하고 body와 div margin은 하나로 취급한다!

 

padding 과 margin은 반대 개념이고 , 특정 id 의 값을 지칭 하려면 #id를 이용해 접근하면 된다.

한 요소는 하나의 id만을 가질 수 있다.