[HTML , CSS] 개념 recap

🍕HTML recap

 

HTML(Hypertext Markup Language)은 마크업 언어이다. 

마크업?
마크업은 말 그대로 표시하는 것이다. 웹 페이지에는 그림도 있고, 글도 있고 표도 있고, 여러가지 요소가 있다. "여기는 글자 영역이고 여기는 이미지 영역이다!" 라고 표시해서 브라우저가 웹페이지를 잘 그릴 수 있도록 하는 것이 HTML 이다.

 

<div>안녕</div>

-> <div> <button> <p> 등은 엄밀히 말하면 tag가 아닙니다. 우리는 이것들을 요소(element)라고 부른다. 

   tag는 요소를 만들 때 사용하는 <> </> 이 꺽쇠 기호를 뜻합니다.

 

🐱‍👤DOM(문서객체모델)?

-DOM은 html 단위 하나하나를 '객체로 생각'하는 모델입니다.

예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위 어떤 값을 가지고 있을 겁니다. 이런 구조를 트리 구조라고 합니다. 즉, DOM이 트리구조란 소리이다. 그렇다면 JS로 dom요소에 어떻게 접근할 수 있을까?

 

dom 트리 확인하기

-> 개발자도구(f12)를 통해 확인할 수 있다. 

// 현재 dom 트리를 볼 수 있어요.
document

// dom 트리 중, body의 내용을 확인합니다.
document.body

// dom 트리 중, head의 내용을 확인합니다.
document.head

document와 body, head는 부모 - 자식 관계. 

body 와 head는 형제 관계이다. (sibling이라고도 한다.)

 

자식 요소에 접근하기 

body안에 있는 요소에 어떻게 접근하는 지 배워보자

• childNodes 

document.body.childNodes

• children

document.body.children

• getElementsByTagName("태그이름")

document.getElementsByTagName("div")

이 외에도 firstChild, lastChild 등등 자식 노드에 접근할 수 있는 방법이 많다.

 

Q. HTML은 프로그래밍 언어인가? 

A. 프로그래밍 언어는 어떤 연산을 수행하거나, 소프트웨어, 시스템을 동작하게 하는 언어이다. 즉, HTML은 프로그래밍 언어가 아니라 마크업 언어이다.

---

🍕CSS recap 

selector : 꾸밀 요소를 선택하는 선택자이다.

/* id selector */
#id { ... }

/* class selector */
.class { ... }

/* tag selector */
tagName { ... }

/* 여러 요소 선택하기 */
/*모든 요소를 콤마를 통해 구분하여 써줄 수 있음*/
#id, .class { ... }

/* 수도 클래스 선택자 */
/* 어떤 요소가 특정 상태(마우스 올림, 포커스 됨 등등)일 때만 선택하게 해주는 선택자예요. */
button:hover { ... }

#id .class를 '선택자'라고 부르고 { ... }는 '선언부'라고 부릅니다.

 

🐱‍👤그리드 시스템 

 

1) 박스 모델 

DOM 요소들은 기본적으로 박스형태로 표시된다. p, div 할 것 없이 모두 네모난 영역을 가집니다. 

margin box: 가장 바깥 영역 margin 속성을 주면 해당 영역이 변한다. 

✔주로 다른 요소들과 간격을 줄 때 사용

 

border box: 테두리 영역 border 속성으로 테두리를 주면 해당 영역이 변한다. 

 

padding box: 테두리와 콘텐츠 사이 영역 padding 속성을 주면 해당 영역이 변한다. 

✔박스 내부의 간격을 줄 때 사용한다. 

 

contents box: 실제 콘텐츠 영역 width, height 등으로 사이즈를 줄 수 있고, 따로 지정하지 않을 경우는 콘텐츠 내용(글이나 이미지 등)에 따라 임의로 사이즈가 잡힌다. 

 

 

2) 그리드 시스템 

- 레이아웃을 잡는데 사용함 

e.g) todo-card를 두 줄로 보여주고 싶을 때처럼, 가로, 세로를 나누어 화면 배치를 조정하는 것

대표적으로 flex로 그리드를 잡는다.

 

레이아웃 방법은 여러가지이다. 

• flex
• table
• block 
• grid 

정리할 것: em rem  단위 

CSS 코드 작성 TIP: HTML 요소 순서대로 CSS도 그에 맞춰 작성하기

 

🐱‍👤CSS 사칙연산

CSS도 연산이 된다. 사용자의 환경은 전부 다르기 때문에 내가 임의로 준 사이즈를 사용자의 환경에 맞춰서 계산해주기 위해서 사용됩니다.

 

버튼의 크기를 조정해준다고 했을 때 

부모의 크기의 80% - 20px 만큼 버튼을 조정한다고 해봅시다. 

calc()를 쓰면 CSS연산이 가능한데 위처럼 %(퍼센트) px 단위가 다른 것을 확인할 수 있죠. 즉, CSS연산을 할 때에는 연산 단위를 맞춰주지 않아도 알아서 적용이 됩니다.

 button {
        width: calc(80% - 20px);
      }

🌞calc() 

사칙연산을 한다면 연산 순서를 신경써야 합니다 

calc()의 경우

• 왼쪽->오른쪽
• 곱셈, 나눗셈 -> 덧셈, 뺄셈 
• 괄호가 있으면 괄호 안쪽을 먼저 계산