HTML 속성

text-overflow 속성 (넘치는 텍스트 표기하기)
clip : 넘치는 텍스트를 자릅니다.

ellipsis : 텍스트가 잘렸다는 의미로 밑 줄임표 표시

 

 

텍스트 들여쓰기

text-indent 속성을 이용합니다.

 

배경 이미지 고정하기

background-attachment 속성을 이용합니다.

 

<style>
body{background-image:url("main.jpg");
background-repeat:no-repeat;
background-attachment:fixed;}
</style>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>
<h1>1</h1>

 

---

드롭다운 내비게이션 만들기

* 드롭다운 메뉴란 메인 메뉴 위로 마우스 포인터를 올려놓으면 서브 메뉴가 메인 메뉴 아래로 펼쳐지는 메뉴를 의미합니다.

메뉴를 항상 화면에 표시하지 않고 필요할 때 펼쳐볼 수 있어 편리합니다.

 

 

 

 

 

ul : 이 스타일은 <ul> 요소에 적용됩니다.

list-style-type:none 기본 목록 마커를 제거합니다.

margin:0; padding:0 은 여백을 제거합니다.

display:flex는 자식요소를 가로로 배열합니다.

 

 

ul ul은 내부 드롭다운 메뉴 ul에 적용됩니다.

display:none 초기에는 하위 메뉴를 보이지 않게 합니다.

postion:absolute 절대 위치로 설정하여 상위 요소에 대해 상대적으로 배치

 

 

ul li 스타일은 각 메뉴 항목 li에 적용됩니다.

border-right:1px solid #ddd 오른쪽에 1px의 두께의 회색 선을 추가하여 항목 사이에 구분선을 생성합니다.

position:relative 상대적 위치로 설정하여 하위 메뉴의 위치를 조정합니다.

cursor:pointer 마우스 커서를 포인터로 변경하여 사용자에게 상호 작용 가능한 항목을 나타냅니다.

ul li:last-child 이 스타일은 메뉴의 마지막 항목에 적용됩니다.

ul li :hover > ul 이 스타일은 메뉴 항목 위로 마우스를 가져갔을때 해당 항목의 하위 메뉴가 표시되도록 합니다.

display:block 하위 메뉴를 보이게 합니다.