220722 가운데 정렬, display 속성 정리

가운데 정렬을 하기 위해서 div id="area" 하위에 span 요소를 두고 

실습을 해보았다.

 

span 요소는 인라인 요소로 가운데 정렬을 상위 요소에서 적용해야 정렬이 가능해진다.

 

css 파일에서

span의 상위 요소인 div#area에 text-align: center;를 주었더니

span에서 가운데 정렬이 된 모습을 볼 수 있다.

 

span 자체로 위치를 조절하기 위해서는

css에서 span을 블록 요소로 만드는 것이 필요하다.

display: block; 으로 설정하면 인라인 요소에서 블록 라인 요소로 변경된다.

그뒤에 text-align: right;를 적용했더니

오른쪽으로 붙는 모습을 볼 수 있다.

 

정리하자면

span 자체로 위치를 정하고 싶으면 블록라인 요소로 설정하는 것, 또는

상위 요소에서 위치를 지정할 수 있는 것  이렇게 두가지가 있다.

 

 

세로 정렬의 경우에는 상위 요소에

vertical-align:middle; 을 설정해주면 가운데 정렬이 가능하다.

vertical-align 에는 top, middle, bottom,,,등 이 있다.

 

 

정중앙 정렬의 경우에는 그러면 합치면 될까?

방법은 다양한데 첫번째로는

우리가 사용했던 상위요소에서 text-align:center; 와

line-height:300px; 을 적용하는 것이다.

상위 요소에서 text-align:center;를 사용하여 먼저 가운데 정렬을 시키고

설정한 높이만큼을 line-height에 그대로 적으면 그 px의 중간 높이에 정렬하게 된다.

 

두번째 방법으로 될 수도 있었지만

실패한 방법이 있다.

position: relative; 와 position:absolute; 가 있다.

position: relative;는 부모 요소 영역을 벗어나지 못하게 만든다

반대로 position:absolute;는 부모 요소 영역을 차지 할 수 있다.

두 개가 같이 쓰인다면 relative가 우선권을 가지므로 absolute는 종속된다.

전체 가로와 세로에서 반을 나눠 위치하면 되지 않을까 하며

left: 50%;와 top:50%;를 주었다.

결과는 위와 같다. 각각의 50% 부분에서 시작되기 때문에 이는 가운데 정렬로 쓰일 수 없다.

 

 

그럴 때 사용 할 수 있는 것이 바로 

transform : translate;

자식 요소의 자체 역이동 이라고 적어놨다..?

괄호 안에 -50%,-50% 를 넣으면 중간에 위치 하게 된다

css 요소가 생각보다 외울게 많기도 하고.. 쓸게 많다

 

그리고 오늘

시험 결과. 88점.

SQL, CSS 연습 필요. 자바도 연습 필요.

다 연습 더해야돼..

일단 SQL에서는 테이블 두개 만드는 연습을 해야겠고

CSS에서는 구성에 대한 고민을 좀 해봐야 할 것같아

자바는 뭐 처음부터 다시 해야겠고..