HTML

• HTML tag 사이에 넣는 텍스트가 무언가가 된다 (title, image, 등등)
• 브라우저는 아무의미가 없어도 이해하려한다
• h1 = header no.1, h2 = header no.2 . . . h6까지 존재
• 브라우저는 내가 만든 태그를 사용하지 못한다 (텍스트로 표현할 수는 있지만 원하는대로 작동은 안됨)

Tag attribute

• a = anchor를 뜻함 (link를 떠올리면 됨) (추가적인 정보가 필요함)
• attributes = 태그에 추가하는 정보
• href = http reference라고 함 (anchor 태그에만 추가 가능)
• target = 기본값은 self이고, _blank 입력 시 새 탭에서 링크가 열림
• img = 다른 태그와 다르게 /로 닫는 태그가 없다 (자체 닫기 태그이기 때문)
• src = img 안에 사진을 집어넣음 (img에서 작동)

Tag & Head

• 같은 폴더에 이미지가 있을 경우 이미지 이름.확장자

• 다른 폴더일 경우 폴더/이미지.확장자 (경로 표기 법)

• 모든 HTML 문서는 로 시작

• HTML 문서는 HEAD(웹사이트의 환경 설정), BODY(사용자가 볼 수 있는 내용)로 구성됨

• title = 제목 설정

• 브라우저 화면상에 보여질 내용들은 body에 있어야 함.

• meta tag = 부가적인 요소 라는 뜻 (content, name attribute를 가짐)

• charset = 한글 등 문자 표시하게 해줌

• language = 사이트에 사용되는 언어 표기 (검색엔진에게 알려줌)

• 다른 수많은 meta tag들이 있음

• HEAD 태그는 보이지 않는 사이트 설정들을 바꿔준다!! (중요)

• og:~~~ = 카카오톡에서 사용하는 정보들

TAG & ID

lable은 input과 함께 작동한다. (label이 input을 activate)
lable 태그에 for=""
input 태그에 id="" 에 완전 똑같은 벨류가 들어가야 함.

(커서 동시 선택하고 싶을 때는, option 키)

• 핵심은 Id
  id는 body 안에 어떤 태그에든 넣을 수 있는 attribute임
  element당 하나의 id 만을 가질 수 있다 (고유식별자임, 중복된 id를 사용하면 doesn't work!)
  Why? CSS가 태그를 지정하여 꾸미기 위해서 ID가 필요하기 때문이다!

• 'div'는 division의 약자로, 박스의 개념으로 생각하면 된다.
  요소가 옆으로 늘어나는 것이 아닌, 상하로 위치 시켜줄 수 있다.
  'header' 또한 같은 기능
• 'footer'는 꼬릿말을 위한 태그
• semantic이란 기능이 담겨 있지 않은 태그지만, 문서를 보기만해도 그 의미를 짐작할 수 있는 것이다. semantic한 코딩을 해야 확인도 간편하고, 팀 작업에도 중요하다.
• 문단 text는 'p'로, 짧은 text는 'span'

CSS

• CSS가 하는 일은 HTML 태그를 가리키는 일. (이 태그는 초록색이다. 이 가리키는 것 자체를 'selector'
• CSS 작성에선 띄어쓰기를 하지 않는다.
• font-size:20px; 과 같이, 속성 다음 콜론(:), 값 다음 세미콜론(;)으로 닫아줘야 한다.

속성이름:속성값;

• 밑줄(_) 또는 슬래쉬(/)도 사용해선 안된다.
• css 또한 어떤 값이든 쓸 수 있다. 하지만 속성에 맞는 값을 써야 브라우저에서 적용이 된다.
• css 또한 모든 속성을 일일이 다 기억할 필요 없다. 기본적으로 어떻게 동작하는지만 기억하면 된다.

동작 원리
1. 태그를 지정
2. 원하는 속성값을 쓴다.

CASCADING MEANS

브라우저가 CSS를 읽을 때 위에서부터 순서대로 읽는다.
CSS를 직접 적는 것을 inline CSS, CSS 파일을 include 하는 것을 external CSS라고 한다.
만약 같은 selector를 가리키는 CSS가 여러개이면, 가장 마지막 스타일이 적용된다

Blocks & inline

div는 옆에 다른 div가 오지 않는다.
span은 옆에 다른 span이 올 수 있다.
link는 옆에 올 수 있다.
p는 옆에 올 수 없다.
옆에 다른 요소가 못 오는걸 block
올 수 있는걸 inline라고 한다. (in the same line)
inline의 대표적인 태그 span, link, img

MARGIN

block의 특징 (inline에는 없음)
inline block 서로 바꿀 수 있다. (display속성이라고 함)
어떤 요소가 inline 이면, 높이와 너비를 가질 수 없다.
block는 높이와 너비가 있다.
block의 특징 margin, padding, border
브라우저는 기본적으로 style 속성을 준다.

• margin - 경계의 바깥에 있는 공간 (border보다 바깥)

방향 설정 없이 margin 하나를 주면 사방에 전부 다 적용된다.
두 개를 줄 경우 상하, 좌우 이다.
네 개를 줄 경우 시계방향 순으로 적용된다. (상 우 하 좌)

• Collapsing margin 현상 (상하에서만 발생함)

body안에 div의 위 아래 마진이
body의 마진과 만나면 둘 중 큰 값의 마진으로 body에 적용된다가 맞는 것 같습니다.

PADDING

• padding은 margin과 반대 개념이다.
• padding은 box의 경계로부터 '안쪽'에 있는 공간이다.
• 값의 개수에 따라 적용되는 방향은 margin과 동일하다.
• 여러 div를 생성했을 때 'id'를 이용하여 div들을 구분할 수 있고, 각각 다른 속성을 적용시킬 수 있다.
• CSS로 first div에 속성을 적용 시킬 땐, #first {}
• 이는 body, span 등에서도 마찬가지다.
• CSS 코드의 id명은 HTML 코드에서 썼던 id명과 같아야 한다.

BORDER

border는 box의 경계이다.
*는 전체를 뜻한다.
border : 굵기, 스타일, 색상 순이다.

Classes

padding은 span에 적용 된다.
margin은 inline 속성이므로(높이와 너비가 없다) 좌, 우에만 적용된다.
class는 여러개의 속성들이 공용으로 사용할 수 있는 스타일 형식이고,
여러 개의 속성에 같은 스타일을 적용하고 싶을 때 사용한다.
class는 .속성 으로 사용한다.
class는 여러 개를 가질 수 있다.