간단한 요약

반응형 웹사이트를 제작하는 실습을 했다. 순서는 모바일 웹사이트부터 제작 후 PC 웹사이트 순이다.

---

배운 내용

1. 3등분 할 때

• 어떤 한 가로 영역을 3등분 할 때, float: left; width: 33.333%;로만 나누어 줘도 정확히 3등분 가능
  이들의 parents 영역에 대해 width: 100%;로 따로 지정해주지 않아도 가능했음

2. overflow: hidden

상황: children영역이 float을 이용하여 3차원적 영역이 됨, 따라서 parents영역이 현재 children영역의 높이에 영향을 받고 있지 않아 높이 값이 없는 상태.

• 이 상황처럼, parents영역이 children영역의 높이 값을 인식하지 않고 있을 때 overflow: hidden;을 사용하여 인식시킬 수 있다.

3. y축 중앙정렬

하나의 공식으로 기억하기

대상 {
  position: relative;
  height: xx;
  top: 50%;
  transform: translateY(-50%);
}

top을 사용하기 위해 position: relative; 설정

4. position: absolute

position: absolute;를 사용할 때, width값을 우리가 정확하게 잡아줄 필요가 있다.

5. id 사용법

id는 크게 세가지 사용법이 있다
1. url 추가
2. 연결된 file 추가
3. 특정 요소로 이동: <a href="#id">click</a>

6. 말줄임 표시

• 어떤 텍스트 정보의 말줄임 표시가 필요하다면 아래처럼 사용 가능. 하나의 공식같은 속성.
• 보통 class="ellipsis"로 통일하여 사용한다.

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

7. 기타 기억할 것들

1. a태그는 inline 성격
2. text-align은 inline/inline-block요소에 적용 가능
3. 축약적으로 만들어둔 css class들이 있다. 예를 들면...

p-b-10: padding-bottom: 10px;
m-t-50: margin-top: 50px;

---

어려웠던 내용

새로운 부분이 조금 있었지만 어려운 부분은 없었다.

---

소감

구조가 복잡해질수록 만드는 class의 이름의 명료함, 통일성이 중요한 것 같다. 아직 팀단위의 프로젝트를 한 적이 없지만, 협업에서는 이런 사소한 부분에서 업무 효율성이 좌우될 듯 하다.

---

나의 코드

진행한 코드는 github에 업로드했다.