221221 html/css + WIL I

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

 

 

---

목차

- 서두 : 과거 html, css의 경험

- 새로 알게된 것들 정리

- Mini Memo

---

 

 

 

아주 예전에 html, css에관련해서 더나아가 js까지 깔짝거렸던 경험이 있다.

독학 할 때 사실 각 Tag에 대한 역할, 기능, 왜 이런 기능을 하는지, 구조가 어떻게 되어야하는지 등

이런 배경지식이 없는 상태로 독학을 했다보니 입력하는대로 출력은 되지만,

'이해를 하고' 코딩을 짠다고 느끼진 못했었다.

(이래서 배경지식은 필요하고 어디서부터 공부해야하는지 모르겠다 라고 말하게 되는 것 같다.)

 

때문에 복습 + 개념 재 정립을 위해 강의를 수강 중에 있는데,

강사님이 설명해주시는 내용들을 듣다보니 html태그 중 왜 이건 이렇고 저건 저런지 알게되었는데,

그 중에 내가 새로이 알게 된 것들과 깨달은 것들 위주로 정리를 해보려한다.

 

 

---

 

 

HTML 개요

Tag의 역할 및 특징

- script - src ⭕ : link / src ❌ : style

- meta : information

- name : 정보의 종류, content : 실제값

ex) name: 제작자, content: 누구 → 정보종류는 제작자이며, 그 제작자는 누구입니다. 라는 내용을 작성한것

- css를 가져올 땐 link, js를 가져올 땐 script

-  브라우저 초기화 (reset.css cdn)

- Emmet : 요소 자동완성

---

글자와 상자

- 글자요소는 가로, 세로 사이즈 지정할 수 없음, 내부여백 위아래 안됨(margin, padding)

- 글자 안에는 상자를 넣을 수 없음

<!--이렇게는 안된다-->
<span>
	<div>내용내용내용</div>
</span>

- 글자는 왼쪽에서 오른쪽으로, 상자는 위에서 아래로 늘어나려는 시도를 한다

 

 

 

반응형

---

 

 

Mini Memo

- HTML은 구조의 역할로만 만드는 것. 즉, html코드안에서 스타일링 하는 것은 지양하기

- attribute(속성) of input tag : 다양하기때문에, 특히 type 속성에 대해 알아두기

- 웹 접근성을 위한 Sementic Tag 적재적소 활용 필요

- class attribute는 tag의 중복가능한 이름

- html Entitys에 대해 알아두기 (ex. &ndsp)

- css: first-child, last-child, nth-child() 알아두기

- 가상요소와 가상클래스의 차이, 부정선택자 알아두기 (::, :)

   - 가상요소와 content는 항상 세트

- css에서 문자나 글꼴만 자동상속이 되지만, inherite '강제속성'을 부여하면 자동상속이 가능하다