정렬 - flex, text

우리 팀의 미니 프로젝트 주제는 팀과 팀원을 소개하는 간단한 페이지를 만드는 것이었다.

 

우리 팀에선 무려 미리,,,! 와이어 프레임을 짜오신 팀원 분이 계셔서 수월하게 진행할 수 있었다.

 

문제는 나였다...

 

...

 

서버는 불안하지, 와이파이는 끊기지, 메모리 용량 부족(ㅋㅋ ㅜ)

 

그래서 깃도 제대로 안 되지...

 

덕분에 그 전에 작성한 코드는 없다.

 

하여튼 어제 기억이 잘 나진 않기는 한데 

 

나는 정렬 때문에 꽤 오래 씨름했었었다.

 

하지만 파일이 날라간 덕분에 ^,.^

 

다시했읍니다

 

제일 애먹었던 것

정렬...

---

생소했던 개념

 

기억이 잘 안 나고 생소했던 태그 정리

 

1. user select:none : 드래그를 막음

 

2. webkit-text-stroke : 글씨 테두리 설정

 

3. animation - 추후 정리

 

4. trangition - 추후 정리

 

*

가상 클래스 선택

---

 

정렬

 

display : flex 정리

 

* 부모 요소인 flex container, 자식 요소인 flex item이 있다

* flex-direction : 배치 방향 설정

* flex-wrap : 줄넘김 설정 

* justify-content : 메인축 방향으로 정렬

* align-items : 수직축 방향으로 정렬

 

 

​

---

1) 이미지 정렬

 

중앙 정렬

1-1) 이미지 자체 정렬 

display: block

margin-left, margin-rignt를 auto로 준다.

 

1-2) text-align: center을 준다.

자손 요소의 텍스트, 이미지 등 인라인 레벨 content를 중앙으로 정렬한다.

 

1-3) display: flex; justify-content: center을 준다.

자식 요소를 가로(수평) 기준으로 중앙으로 정렬한다.

 

세로 중앙 정렬

1-4)  부모 요소에 display: flex; align-items: center울 준다.

 

1-5) 부모 요소와 자식 요소에 position, transform 속성 사용한다.

 

세로, 가로 중앙 정렬

1-6) 좌우 공간이 있는 부모 요소에 display: flex; jusify-content: center; align-items: center을 준다.

---

2) div 요소 등 정렬

(블록 레벨 요소인지, 인라인 레벨 요소인지 따라 달라짐)

 

2-1) 요소 자체로 정렬 (블록 레벨)

div 요소는 기본 값이 display: block 이므로

margin 양 옆을 auto로 주면 된다.

 

2-2)  (인라인 레벨)

display: block으로 바꿔주고,

margin을 위와 같이 auto로 주면 된다.

 

2-3) 좌우 공간이 있는 요소 중앙 정렬 (인라인 - 자손 요소)

text-align: center; 로 준다.

 

2-4) display: flex; justify-content: center; align-items: center; 로 준다. (인라인 - 자식 요소)

 

2-4) (블록)

display: flex; justify-content: center; align-itmes: center로 준다.

 

세로, 가로 중앙 정렬

 

2-5) display: flex; jusify-content: center; align-items: center; 로 준다

(블럭, 인라인 레벨 요소 모두 적용 가능)

---

3) 텍스트 정렬

 

3-1) 좌우 공간이 있는 요소

text-align: center 를 준다.

 

3-1) 좌우 공간이 없는 요소1

좌우 공간이 있는 조상 요소에 text-align: center를 준다.

 

3-2) 좌우 공간이 없는 요소2

좌우 공간이 있는 부모 요소에 display: flex, jusify-content: center를 준다.

 

가로, 세로 중앙 정렬

 

3-3) 자기 자신 텍스트 콘텐츠 가운데 정렬

line-height와 text-align: center를 준다.

 

3-4) 좌우 공간이 있는 부모 요소에

display: flex; justify-content: center; align-items: center를 준다.

 

그 외 등등 방법은 아주 많다.

---

=

나 같은 경우는 일단 html, css 강의를 들어본 상태였고 직접 만들어 본 건 처음이라

익숙하지 않아 정렬에 애를 먹었다.

 

내가 맡은 시작 페이지에서 타이틀과 시작 버튼 태그를 정렬했어야 했는데

타이틀은 어찌저찌 정렬했다 쳐도, div태그로 감싼 버튼 태그가 정렬이 잘 되지 않았다.

 

어찌저찌 정렬을 했다 쳐도, width를 주면 다시 정렬이 안 됐다.

그래서 서치를 통해 여기 작성된 방법으로 display를 block으로 바꿔주고,  margin을 auto로 주니 간단하게 해결되었다.

다만 오직 이 방법으로만 해결이 되어 답답했는데

 

모 블로그에서 justify-content: center는 바깥 쪽 div 태그에 설정해야 한다고 해서 확인해봤더니

내가 그냥 버튼 태그에 모든 걸 때려 넣어놨었다.

그래서 밖에 div태그를 또 만들어

  margin: auto;

  display: flex;

  justify-content: center;

  align-items: center;

 

이렇게 작성했더니 가운데, 중앙 정렬이 잘 된다.

 

사실 그냥 display: block으로 바꾼 뒤 margin: auto만 주었던 원래 버전이랑 비교하면 어떤 방법이 더 나은지 모르겠지만

 

뭐 또 이것저것 하다 보면 알게 되리라 굳게 믿는다.... 나는 오늘 뭔가 파일다운 html & css 파일을 처음 만들어보므로,,,

 

---

참고

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

https://codingeverybody.kr/css%EB%A1%9C-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EA%B0%80%EC%9A%B4%EB%8D%B0-%EC%A0%95%EB%A0%AC%ED%95%98%EA%B8%B0/

CSS로 가운데 정렬하기 – 텍스트 가로 세로 가운데 정렬 팁! - 코딩에브리바디