CSS / CSS 특강

---

🔔 CSS

Text

1. line-height

- 글자 라인의 높이를 지정하여 텍스트 라인과 라인 사이의 간격(leading)을 조정할 때 사용
- normal : 기본 값 / 폰트의 font-family 에 따른 글자의 기본 높이 /사용하는 font-family에 따라 기본 line-height 값이 다르다는것에 유의
- number : 숫자로 값을 설정할 수 있음 / 1은 font-size 값 만큼의 라인 높이를 의미/ 2는 font-size 값의 두 배를 의미 / 소수점을 지원


2. letter-spacing
- 글자 사이의 간격을 조절


3. text-align
left : 기본값으로 텍스트를 왼쪽에 정렬
right : 텍스트를 오른쪽에 정렬
center : 텍스트를 가운데에 정렬
justify : 마지막 라인을 제외하고 텍스트를 양쪽 끝으로 정렬


4. vertical-align
- 인라인 요소의 수직 정렬을 맞추기 위해 사용하는 속성
- baseline : 베이스라인을 부모의 베이스 라인에 맞추어 정렬합
- top : 상단의 위치를 라인(인라인 박스를 감싸고 있는 공간)의 상단으로 정렬
- bottom : 하단의 위치를 전체 라인의 하단으로 정렬

5. text-decoration
- 텍스트에 붙는 라인을 꾸며주는 속성
- 텍스트의 상단 & 하단에 라인을 그려줄 수 있고, 라인의 종류와 색상도 지정할 수 있음
- 글씨의 font-family, 텍스트의 형태에 따라 라인이 잘리는 경우가 있기 때문에 스타일링의 용도로는 잘 사용하지 않음
- 대신 <a> 태그의 기본 스타일을 제거할때 가장 자주 쓰이는 속성

    a {
      text-decoration:none;
    }

6. text-overflow
- 부모 컨테이너를 넘어간 컨텐츠가 어떻게 보여질지 결정하는 속성

- text-overflow 속성은 그 자체만으로 넘친 컨텐츠를 만들어서 처리하지 않음
컨테이너에 overflow:hidden, white-space:nowrap 속성이 같이 사용되어야 함

postion

HTML 태그의 위치를 지정해주는 속성

• position : static
  - 기본적으로 모든 태그들은 따로 position 속성값을 주지 않았다면 static 값을 가짐
  - html에 쓴 태그 순으로 정상적인 흐름(normal flow)에 따라 위치가 지정

• position : relative
  - 원래 자신이 있어야 하는 위치에 상대적/ 자신이 원래 있던 자리를 기억

• position : absolute
  - static을 제외한 position 속성값을 가진 가장 가까운 부모의 박스 내를 기준으로 위치하게 됨

• position : fixed
  - 현재 사용자가 보고 있는 브라우저 화면(뷰포트)를 기준으로 마치 화면에 붙은 것처럼 그 자리에 계속해서 위치

• position : sticky
  - 조상에 스크롤이 있다면 가장 가까운 부모 요소의 컨텐츠 영역에 달라붙음

• z-index
  - 어떤 요소가 더 위로 나타나게 할지 결정할때 사용
  - static을 제외한 position 속성값이 적용된 요소의 Z축 순서를 결정할 수 있으며, z-index 값이 더 큰 요소가 값이 작은 요소의 위를 덮어버리게 됨
  - 부모가 z-index를 높여 자식 앞으로 나올 수 없습니다. 자식은 z-index를 낮춰 부모 뒤로 가는 것은 가능
  - 보통 10단위로 많이 사용 / 음수도 가능
  - 부모가 다른 부모에게 이미 졌으면 자식은 절대 못 이긴다.

Float

'띄우다'라는 뜻 / 요소를 띄워서 좌 or 우로 정렬을 하는 속성을 가짐

그림을 따라 흐르는 텍스트 레이아웃을 웹에서 구현하기 위해 탄생한 속성

왼쪽 혹은 오른쪽으로 정렬이 되는 특성 덕분에 현재는 아래 코드와 같이 블록 박스 요소를 정렬하는 가장 기본적인 방법으로 사용되고 있습니다.

• float:left, float:right
  - float 속성의 left 값은 요소를 왼쪽으로, right 값은 오른쪽으로 정렬

• <span> 과 같은 inline 요소에 float 속성을 적용하면 display 속성값이 자동으로 block 으로 바뀜 / 때문에 float 속성이 적용되면 inline 요소도 width, height, margin, padding 속성값 사용 가능

• 자식 요소들이 모두 float 속성을 가질 때, 컨테이너 요소가 자신의 높이에 자식 요소들의 높이를 반영하지 못함
  / 자식한테 float 속성을 설정하면 자식 요소들은 붕 띄워진 상태(floating)이기 때문에 부모 요소가 자식 박스들의 존재를 인식하지 못함

  ※ 해결방법

1. 부모 요소에 overflow 속성을 추가

overflow은 Block-Formatting-Context(BFC)를 생성 / BFC는 float 속성이 적용된 요소를 컨테이너가 인식하도록 만들어줌 / 때문에 컨테이너 요소에 overflow:hidden; 혹은 overflow:scroll; 등 overflow:visible;을 제외한 overflow 속성을 추가하여 해결

- BFC : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

2. 부모 요소의 높이 값을 직접 지정

비효율적

3. clear 속성 사용

float 이 사용된 요소의 바로 다음 형제 요소에 clear 속성을 사용 / clear 속성은 left, right, both 세 가지 값을 가지며 float이 사용된 요소가 정렬된 방향에 따라 적절히 사용

오직 float을 해제 하기위해서만 존재 / 주로 clear: both 사용

🔔 CSS 특강

line-height

https://www.w3.org/TR/css-inline-3/

- 텍스트를 더 읽기 쉽게 만들기 위해 납(lead) 조각을 넣어 구분한 것에서 leading 유래

- CSS에서는 leading을 반으로 나누어 상하단에 half-leading으로 사용

- line-height = (Half Lead * 2) + font-size

- font-family에 따라 line-height 다르다 / 폰트 만든 사람이 정한 것

- CSS / leading-trim 준비중

negative margin

- 마진에 음수 값 설정
- 이미지는 inline-block으로 보는 것이 현명
- 마진 겹침은 블록과 블록 사이에서만 발생
- 마진을 마이너스로 쓸 수 있다는 것은 스펙이다 / 남용은 하지 말자

.poketmon img {
	background-color: orange;
    margin-top: -50px;
    margin-bottom: -50px;
}

.poketmon img {
	margin-top: -200px;
}

🔔 마무리

✅ 폰트가 어떤 세계관을 가지고 있는지 정확하게 이해할 필요가 있음
✅ 구두 디자이너가 해부학까지 공부했다 / 디자이너 + 코딩 / 고급인력
✅ 작업순서를 잘 고려해라 / 코드 품질에 영향
✅ 클래스를 어떻게 작명하면 행복할 것이냐