웹사이트는 그냥 text 파일
브라우저가 웹 사이트를 만드는 것
브라우저는 text를 받고 웹사이트로 구현
브라우저는 인간들이 쓰는 언어를 이해 못 함
브라우저에게 콘텐츠가 뭔지 알려줘야 함
HTML로 브라우저에게 content구조가 어떤지를 설명
오직 HTML만이 브라우저에게 content가 어떻게 구성되었는지 설명할 수 있음
CSS는 HTML과 같이 사용
CSS는 브라우저에게 웹사이트가 어떻게 보여야 하는지에 대해 알려줌
HTML은 브라우저에게 웹사이트의 콘텐츠가 무엇인지에 대해 알려주는 것
HTML은 뼈대
CSS는 근육
JS는 뇌
동적 상호작용성 (interactivity)
클릭하면 어떤 일이 생김
HTML은 Markup language
Markup은 content
CSS는 브라우저에게 그러한 content들이 어떻게 보여야 하는지를 알려줌
JS는 웹사이트를 똑똑하게 동적으로 만들어줌
클릭하면 뭔가 생기도록
프로그래밍 언어는 오직 JS뿐
HTML
태그, attribute
src는 img만의 attribute
이미지는 셀프 클로징 태그
<!DOCTYPE html>
이 코드는 브라우저에게 이건 text파일이 아니라 html 문서라고 알려주는 것
<html></html>사이에 넣는 것이 html 코드가 되는 것
웹 사이트의 구조는 두 개의 파트로 구성
head와 body
head 파트에서는 웹사이트의 환경을 설정
외부적으로 보이지 않는 설정을 함
body는 사용자가 볼 수 있는 content를 보여줌
head 태그 안의 태그들은 invisible 태그
브라우저 상에 내용이 보이지 않음
meta 태그의 meta는 부가적인 정보라는 뜻
meta 태그는 두 개의 attribute를 가지고 있음
content와 name
<meta name="description" content="This is web site">
description은 구글이 검색할 때 찾는 태그
title도 구글 검색에 중요한 비중을 가짐
<meta charset="utf-8"/>
브라우저에게 text를 어떻게 그려달라는지 말해줌
한글이나 다른 특수문자가 있는 언어를 입력할 때 브라우저가 그 문자들을 이해 못 할 때가 있음
charset 메타 태그가 없으면 글자가 사이트에서 깨져 보일 것
잊지 말고 넣어주자
메타 태그들은 셀프 클로징 태그
html에도 lang이라는 attribute가 있음
구글, 네이버, bing과 같은 검색엔진들에 도움을 주기 위해 있음
사이트에서 사용되는 언어가 무엇인지 말해줌
<html lang="kr">
주된 언어가 한국어인지 영어인지 검색엔진에 알려줌
<link rel="shortcut icon" sizes="16x16 32x32 64x64" href="https://nomadcoders.co/m.png"/>
rel은 relationship
head에서는 보이지 않는 태그들로 사이트 설정을 해주는 것
브라우저에게 사이트가 어떻게 보이는지
구글이 어떻게 사이트를 바라보는지
모든 게 head 태그에 속해있음
구글에 html이나 css 혹은 js를 검색할 때 mdn이라는 키워드를 붙이는 것을 추천
mdn 키워드로 검색하면 Mozilla developer Network로 안내해줌
파이어폭스 브라우저를 만드는 회사가 제공하는 웹에 관한 정보들을 정리한 문서
id는 body안의 어떤 태그에든 넣을 수 있는 attribute
body안의 어떤 태그에도 id를 넣을 수 있는 이유는 id가 unique identifier(고유 식별자)이기 때문
엘리먼트당 하나의 id만 가질 수 있는 게 id의 규칙
id가 유일해야 하는 이유는 CSS가 어떤 걸 가리키게 할 수 있도록
id는 고유해야 하고 태그는 하나의 id만 가질 수 있다!
전체 html문서에서 id값은 고유해야 한다
CSS
CSS를 HTML에 추가하는 방법
styles.css 파일을 만들고 html에서 link 태그를 이용해서 파일을 연결
<link href="styles.css" rel="stylesheet" />
styles.css와 HTML과의 관계(rel)는 스타일시트
CSS가 하는 일은 HTML 태그를 가리키는 일
가리키는 것 자체는 selector라고 함
selector가 blueTitle이라고 한다면 글씨체, 글씨 색 이런 것들을 속성(property)라고 함
이처럼 selector는 많은 속성을 가질 수 있음
그래서 속성들을 하나로 묶기 위해 curly bracket(중괄호)를 사용
속성을 쓰는 규칙
속성의 이름: 값;
color: blue;
font-size:20px;
CSS 속성 이름은 띄어쓰기를 하지 않음
Cascading
브라우저가 CSS 코드를 읽을 때 위에 있는 코드부터 차례차례 읽음
맨 마지막에 있는 코드가 가장 마지막에 적용
box를 만들면
div, header, main, section, article, footer 등 어떤 박스든 옆에 또 다른 박스가 오지 않음
box처럼 옆에 아무것도 오지 않는 것 block
옆에 다른 요소가 올 수 있는 것은 inline이라고 함 (in the same line)
아주 작은 글이나 링크, 그림 등등이 inline에 속함
대부분의 box들은 block
block이 아닌 것은 span, a, image가 있음
블락을 인라인으로 바꾸는 것도 가능, 인라인을 블락으로 바꾸는 것도 가능
이렇게 하는 것을 display 속성이라고 함
display: inline;
display: block;
inline은 높이와 너비가 없음
block은 높이와 너비가 있음
기본적으로 span의 display 속성은 inline
이걸 block으로 바꿔주면 span도 block이 됨
div를 inline으로 바꾸면 div가 사라짐
이유는 어떤 요소가 inline이면 그 요소는 높이와 너비를 가질 수 없기 때문
높이와 너비가 없고 내용도 없기 때문에 사라져 보임
내용이 있으면 그 내용만큼의 크기를 가지고 보여지게 됨
inline은 box가 아님
block은 box
box에는 특징이 3가지가 있음
margin, padding, border
user agent stylesheet
브라우저가 기본적으로 style 속성을 줬다는 뜻
margin은 box의 border로부터 바깥에 있는 공간
collapsing margin
위, 아래쪽에서만 일어나는 현상
흰 box의 경계가 보라색 box의 경계와 같을 때 일어남
그때 두 박스의 margin은 하나가 된다는 것
parent box와 first(last) child box의 top(bottom) margin이 겹칠 때
더 큰 margin이 parent box에 적용
padding은 margin과 반대 개념
margin은 box의 경계로부터 '바깥'에 있는 공간
padding은 box의 경계로부터 '안쪽'에 있는 공간
border은 말 그대로 box의 경계
너비, 스타일, 색깔
border: 1px solid black
inline도 border를 가질 수 있음
border은 inline과 block 모두에 적용됨
'프로그래밍 > CSS' 카테고리의 다른 글
| [CSS] box-sizing (0) | 2022.03.30 |
|---|---|
| [CSS] BEM, reset, not, inherit (0) | 2022.03.29 |
| [CSS] transition, transform, animation, media (0) | 2022.03.28 |
| [CSS] flex, selector, state, variable (0) | 2022.03.27 |