html5를 활용한 기초 레이아웃

See the Pen VwLyXva by LimsUIUX (@LimsUIUX) on CodePen.

 

---

!!! 포인트

 

1. body태그에 좌측 여백을 둔다.

2. body태그에 배경이미지를 넣는다. 

body{
            background-image:url("img/living.gif");
            background-repeat: no-repeat;
            background-position: 0 50px; 
            background-size: contain;
            margin-left:280px;   
            margin-top:50px;  
        }

 

3. 메뉴 정리는 ul>li>a로 하되

- a태그에 크기를 넣기 위해 display : inline-block으로 지정

- 우측테두리를 넣고, 마지막 요소만 따로 선택자로 가져와 테두리 없앰

 

4. li에 list-style-image:url();안에 이미지를 불러와 리스트의 스타일을 나만의 스타일로 꾸며준다.

- 이미지는 따로 제작한다.(포토, 일러 등 활용)

---

[ Lims Tip ]

메뉴는 가로배치 하는 방법이 몇가지 있다.

1. li {float:left}

2. li {display:inline} 

두가지의 차이점을 꼭 구분 할수 있도록 한다. 

 

3. ul>li>a로 메뉴를 짤 때, 링크의 손가락이 글씨 밖에도 표시되게 하기 위해  

 - a태그는 display:inline-block으로 지정해야 하며,

 - a태그에 크기 및 여백을 지정하여 공간을 만들어 준다.  

 

 

---

 

 

[ 이미지 참조 ]

가구 이미지를 하나 다운로드 받아서 living.gif로 저장한 다음 img폴더에 넣어두고 작업한다.

 

dot.gif이미지는 li태그에 list-style-image:url();안에 넣어주는 것으로, 

일러나 포토에서 작은 점을 하나 그려서 img폴더에 저장해 두고 작업한다. 

---