11일차_CSS_TEXT,POSITON

1. TEXT

---

text-indent를 사용하지 않는 이유

1. 본인 자체가 갖고 있는 height값 등이 있기에 예상 외 상황이 발생할 수 있다.

2. 컨텐츠 전체에 영향을 끼치기에 성능을 저하시킨다. 

 

 text-decorantion: none

1. a태그 밑줄 없앨 시 사용. 그 외 용도로 다른 text-decoration은 잘 사용하지 않음.

 

말줄임('...')표시

1. text-overflow:ellipsis; 요소의 크기를 넘친 텍스트를 말줄임 처리합니다.

 

2. POSITION

---

position이란 웹 페이지에서 만든 html 태그나 id, class 박스 등의 위치를 지정해주는 속성입니다.

position 속성을 이용해 우리는 페이지의 레이아웃을 결정할 수 있습니다.

 

2.1 STATIC

---

기본적으로 모든 태그들은 따로 position 속성값을 주지 않았다면 static 값을 가집니다. 즉 html에 쓴 태그 순으로 위치가 지정되게 됩니다. 그래서 굳이 기입할 필요는 없지만, 부모 객체에서 다른 position 속성값이 주어졌을 때, 그를 무시하기 위해 사용될 때가 있습니다.

2.2 RELATIVE

---

단어 자체의 뜻처럼 '상대적'인 속성을 가지고 있습니다. 그럼 대체 '무엇'에 상대적인지 궁금해하실 텐데요. 바로 static, 즉 원래 자신이 있어야 하는 위치에 상대적입니다. relative는 그 누구보다도 자신이 원래 있던 자리를 기억하는 친구입니다. 그래서 position: relative;라는 값을 주고 left : 50px; 이라고 추가적으로 적어 주면, 본인의 static 자리에서 왼쪽으로 50px만큼 떨어진 자리에 위치하게 됩니다.

 

원래 있던 위치에서 이동을 합니다.

 

2.3 ABSOLUTE

---

absolute의 특징을 굳이 한 단어로 설명하자면 'my way'라고 할 수 있습니다. position: absolute;라고 한 뒤 top : 20px; right: 30px;이라고 추가적 값을 주면, 오른쪽 상단에 동떨어진 박스가 하나 놓여있는 것을 보실 수 있습니다. 이들은 기준점이 html 위치에 있기에, 왼쪽 제일 상단이 본래 자신의 위치라고 생각하고 움직이게 됩니다.

그러나, 이 absolute도 눈치를 보는 녀석이 있는데, 바로 부모 요소입니다. relative, absolute, fixed 같은 position 속성이 부모에 놓여있다면, absolute는 position 속성을 가진 가장 가까운 부모의 박스 내를 기준으로 위치하게 됩니다. 마치 relative가 static의 자리를 유념하고 있는 것처럼요.

 

쌉 마이웨이이지만 부모말은 듣습니다.

부모 요소에 position값이 주어지면 부모요소 위치를 기준으로 움직입니다.

 

2.4 FIXED

---

예시: 일반적으로 네비게이션 바.

 

2.5 STICKY

---

예시: 백과사전 제목

sticky된 요소는 부모요소에 붙게 됩니다.

2.6 Z-INDEX

---

부모와 자식이 position: absolute일 경우에는 z-index가 안 먹힌다