열정 도토리

https://www.youtube.com/watch?v=m7wsrVQsVjI&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=11 유튜브 드림코딩으로 공부한 내용입니다. 🐚 기본 형식 ! + tab 🐚 div 태그 빠르게 작성 .className 후 tab #idNum 후 tab div 가 아닌 태그는 . 과 # 앞에 H1, p 등을 적어주면 된다. 🐚 부모,자식, 형제 노드 div 안에 ul 안에 li 부모 > div>ul>li 형제 + div>ul+li 반복 * ul>li*5 🐚 태그 안에 텍스트 입력 {} p{hello} hello 🐚 더미용 텍스트 생성 p>lorem 🐚 숫자 자동 생성 $ p.class${item $}*5 item 1 item 2 item 3 ..

https://www.youtube.com/watch?v=jWh3IbgMUPI&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=8 유튜브 드림코딩으로 공부한 내용입니다. 🌈 Display - Inline , Inline-block , block 차이 Block (ex. ) 은 한 줄에 하나씩, Inline (ex. ) 은 한 줄에 나란히 배치된다. 이 속성을 바꾸고 싶으면 각각의 태그에 다음과 같은 css 를 설정하면 된다. div{ background:red; display:inline-block; } span{ display:block; } 이 때 inline-block 대신 inline 을 쓸 경우, content, 즉 글자 크기에 맞춰서 배경색이 칠해진다. 🌈 P..

https://www.youtube.com/watch?v=gGebK7lWnCk&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=7 유튜브 드림코딩으로 공부한 내용입니다. 🌈 공식문서 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference 🌈 셀렉터 HTML에서 어떤 태그들을 고를 것인지 규정하는 문법이다. 구체적인 조건일수록 우선순위가 높아진다. 가령 universal 로 초록색, li tag 로 파란색을 부여했다면, 더 구체적인 tag 의 설정 즉 파란색이 적용된다. 1. * 모두 * { color:green; } 2. Tag 태그 타입 li { color: blue; ] 3. #id id First #special {..

https://www.youtube.com/watch?v=i0FN-OwJ7QI&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=5 유튜브 드림코딩으로 공부한 내용입니다. 🐚 기초 - 기본 코드를 자동완성 시키려면 ! 후 enter - 기본적으로 head 와 body 두 부분으로 나뉘어져 있다. head 에는 기본 정보가 들어있고 사용자에게 노출되는 부분은 body 이다. - 웹사이트는 대개 header, nav, aside, main, footer 로 나뉜다. 🐚 태그 - 아래 공식 문서를 참고하자 HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN - 태그는 box 와 item 이렇게 두 가지로 분류할 수 있다. Box는 hea..