이 글의 목표 세가지

1. 뻔한것은 쓰지 않는다.(구글링으로 다 해결 가능하다.)
2. 여러분의 시간은 소중하다.
3. 내 레벨에서 잘 정리 안된 것들을 다시 한번 정리한다.

html

src와 href

img 태그의 src는 source약자다. href랑 헷갈리지 말 것.

태그 안에 태그를 쓴다는 개념 이해하기.

예시

<p><strong>예시입니다</strong></p>

결과

예시입니다

구조를 잡는 태그

🤔 : 이거 왜 쓰는거죠?

😺 : 이걸써야 구글이나 네이버같은 검색 엔진들이 "아~ 얘는 웹표준을 잘 지켰네 우리 검색 결과에 나오게 해야겠다." 이렇게 판단 할 수 있는 근거라서!

구조 태그 종류

<header>,<nav> : 웹사이트 목차를 담당한다.
<main>,<article> : 웹사이트 본문을 담당한다.
<footer> : 웹사이트 부록을 담당한다.(전화번호, 사업자번호, 주소 등)

CSS

🤔 : 왜 CSS의 C가 cascading인거죠? 폭포?

😺 : 폭포가 위에서 아래로 물이 내려오듯, CSS도 폭포와 같은형태로 CSS가 적용되기 때문에 이름 붙인거에요.

🌊폭포 같은 순서로 적용되는 CSS

순서에 의한 캐스케이딩 : 나중에 적용한 속성 값의 우선 순위가 높음.
디테일에 의한 캐스케이딩 : 더 구체적으로 작성된 선택자의 우선 순위가 높음.
선택자에 의한 캐스케이딩 : style > id > class> type 순 으로 우선 순위가 높음.

🤔 : Margin, Padding 얘내 뭐에요?

😺 : 여백이라고 생각하면 됩니다. 한컴 쓸때 글 여백 있잖아요 그런거에요.

이해할때 border을 기준으로 이해하면 쉽다.
Margin은 border 바깥쪽, padding은 border 안쪽!

🤔 : display: block? inline? 이거 왜 쓰는거죠?

😺 : <p>태그는 대표적인 block이고 <a>태그는 대표적인 inline인데, 혼합해서 쓰고 싶을때 씁니다.

block은 말 그대로 한줄을 다 잡아먹는 방식이고
인라인은 쭈욱~ 늘어트리면서 계속 이어가는 방식이다.
CSS Display는 이러한 inline과 block방식을 설정해줄수있으며, 혼합해서 사용하는 것도 가능하게 한다.

Reference: 엘리스 SW 트랙 2기, margin사진출처,inline/block비교사진출처