Html/CSS 기초 자습 - TIL 2일차
이 글의 목표 세가지
- 뻔한것은 쓰지 않는다.(구글링으로 다 해결 가능하다.)
- 여러분의 시간은 소중하다.
- 내 레벨에서 잘 정리 안된 것들을 다시 한번 정리한다.
html
src와 href
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 얘내 뭐에요?
😺 : 여백이라고 생각하면 됩니다. 한컴 쓸때 글 여백 있잖아요 그런거에요.
🌊폭포 같은 순서로 적용되는 CSS
순서에 의한 캐스케이딩 : 나중에 적용한 속성 값의 우선 순위가 높음.
디테일에 의한 캐스케이딩 : 더 구체적으로 작성된 선택자의 우선 순위가 높음.
선택자에 의한 캐스케이딩 : style
> id
> class
> type
순 으로 우선 순위가 높음.
이해할때 border을 기준으로 이해하면 쉽다.
Margin은 border 바깥쪽, padding은 border 안쪽!
🤔 : display: block? inline? 이거 왜 쓰는거죠?
😺 : <p>
태그는 대표적인 block이고 <a>
태그는 대표적인 inline인데, 혼합해서 쓰고 싶을때 씁니다.
block은 말 그대로 한줄을 다 잡아먹는 방식이고
인라인은 쭈욱~ 늘어트리면서 계속 이어가는 방식이다.
CSS Display는 이러한 inline과 block방식을 설정해줄수있으며, 혼합해서 사용하는 것도 가능하게 한다.
Reference: 엘리스 SW 트랙 2기, margin사진출처,inline/block비교사진출처
Author And Source
이 문제에 관하여(Html/CSS 기초 자습 - TIL 2일차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sokojh/HtmlCSS-기초-자습-TIL-2일저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)