팁

.dbg { border : 1px dotted red; }-> 모든 레이아웃의 border line이 나타남

html에는 <div class = "text dbg"> 라고 쓰면 됨

 

alt 누르고 커서 누르면 다중으로 커서 작고 입력 가능함

 

navbar - 위

wrapper - 중간 (container)

footer - 밑

 

주석처리를 하면서 작업

navbar-left 이런 식으로 하이픈 써가며 사용하면 편함

 

.navbarleft.dbg*2>ul>li*4 하고 탭키 누르면 

<div class="navbarleft dbg">

            <ul>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

            </ul>

        </div>

        <div class="navbarleft dbg">

            <ul>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

            </ul>

        </div>

 

 

 

.navbar > .navbar-left

부모자식관계 나타내줌, 보기 편하게, 

나중에 복잡해지면 곤란해져서, 동작은 하나 확실하게 누군지 보기위해

 

<svg style="fill:rgb(124,124,124);" viewBox="0 0 24 24">

<path d="경로~~~"></path>

svg태그

 

vs code 자동 줄바꿈

세팅-word wrap 검색, editor: word wrap 을 on으로 설정