css 정렬>
====================================================
- 텍스트 얼라인
text-align: center;
text-align: left;
text-align: right;
이렇게 있다.
텍스트 얼라인은 기본 자리를 지키면서 이동이 가능함.
- 포지션
position: relative;
top: 5px;
right:5px;
position: absolute;
top: 5px;
right:5px;
앱솔루트는 위치변경할 태그의 부모에게 position: relative; 먹여야되는데,
위치변경할 태그를 div로 감싼후 그러면 그div가 부모가되고 , 개한테 position: relative; 를 주면,
즉 div 가 부모고 position: relative; 이걸 줫으니까, 자식인 그 태그한테
position: absolute;
top: 5px; // 애네는 줘도되고 안줘도 기본적용됨.
right:5px;
요런식으로 하면 적용이됨.
포지션도 자기자리를 지키면서 이동이 가능함
- 플롯
플롯은 자기 자리를 탈퇴하고 둥떠있음, 집 나간자식임.
그래서 붕떠있기때매 , 그옆에 태그가 치고 올라와서 집나간애 자리를 차지함.
근데, 그렇다고 해서
겹치지는 않고
그 자리에 쏙 들어가긴하는데, 좀 걸쳐진느낌 임.
즉, 그 플롯된 애를 옆에 애가 감싸는 느낌이다.
아무튼,
플롯 쓰는방법은
그냥 위치변경할 태그에
float: right;
해주면 되는데
문제는 옆 태그가 쏙들어가서 감싸는 문제가 있기 떄문에,
그 옆태그에게
overflow: hidden;
이나
overflow: auto;
주면된다.
근데 오토주면 컨트롤 바가 생긴다. 히든이 깔끔함.
그리고
clear 를 사용하는 방법이 있다.
클리어는 오로지 float로인해 망가진 속성을 고치지위해 태어난 애다.
사용방법은,
일단 개념은,
플로트 된 애를 알아차리게 하는 것이다.
예를들어
float:left; 하면
clear:left 하게 되면
붕뜬 플롯을 클리어가 알아차려서 형제 요소가 자기자리를 다시 찾아가게 만드는것임.
clear: left , right, both 가있는데,
말그대로 영향받지않는 설정의 방향을 정의하는거임.
그래서
만약
div부모id="부모"
div자식1
div 자식2
하나의 div안에 두개의div 가 들어 있는데,
그 두개의 div 를 다 float 줘서 플롯 시키면
부모 div의 영역이(따로 위스 나 하이트를 주지않았다면) 바짝 줄어들어 납작하게된다.
그러면 레이아웃이 망가지는데,
그럴때
div자식3를 하나더 만들어서 clear:left 나 both해서 밑에 추가시키면
붕뜬 자식1,자식2 는 자리를 잡고
자식3도 자기자리에 있을것이다.
근데, 만약에
프론트엔드 개발자로서 자원을 낭비하기 싫다면,
html 을 건드리지않고,
쓸모없는 엘리먼트 div자식3 를 만드는게 꺼려진다면,
음,
css가상요소를 만들어서 처리하면된다.
::before 이나 ::after
쓰면되는데,
어떻게 쓰냐면,
부모div에게 가상요소를 달면된다.
첫째 자식요소로 앞에 만들고싶으면 비포
마지막 자식요소로 만들고싶으면 에프터
해서
#부모::after{
}
이게 기본 이고
가상요소안에,
무조건
content: "";
이 컨텐트가 무조건 들어가야된다,
컨텐트안에 문자 넣고싶으면 작성해도되고 아무것도 안너으려면 비워두면된다.
참고로 클리어는 디스플레이가 블록인 요소한테만 사용할 수 있다.
그래서
#부모::after{
content: "";
display: block;
clear: left;
}
이렇게 해주면 된다.
flex
플렉스
.flex {
display: flex;
}
디스플레이(박스의 타입을 알려주는애)에
flex
혹은
inline-flex
하면되는데
일단
flex 는 박스의 타입이다.
flex 는 block 이랑 되게 비슷함. + 정렬 함수있음.
inline-flex 는 인라인블럭 처럼 노는데 + 정렬이 가능한 그런애다.
플렉스 사용 방법은
플렉스 값은
1.정렬하고자 하는 부모한테 플렉스 요소를 주면된다.
- 그리고 방향을 주면된다.
flex-direction: row;
flex-direction: colum;
이런식으로
row / row-reverse / colum / column-reverse
참고로
두개의 축을 알아야하는데,
축을 Axis 라고함.
두축은 각각
가로 Main axis
세로 Cross axis
- 그리고
flex-wrap: nowrap; 혹은 wrap;
이란게 있는데 이거는
어떻게든 한줄로 정렬한 것인지?
아니면
여러 줄을 만들어서 정렬할 것인지?
를 설정할때 쓰는거임.
nowrap 은
부모 가 가로넓이가 800px 인데,
자식이 3명 있고 각각 300px 이면 총 900px 인데
가로에서 세로 정렬로 할경우 노랩 하면 이게 다 안들어가니까 강제로 자식 사이즈가 200 으로 바꿔서 한줄로 배치를 해서 세로정렬을 시키는게 노랩이다.
근데
wrap 일경우는 한줄로 만들지않아도 즉, 삐져나오고 원래 사이즈는 유지하면서 정렬을하는 걸 설정하는게 랩이다.
- 가로는 justify-content
세로는 align-items , align-content
설정인데,
가로는 justify-content 이라고 했는데,
일단
justify-content: flex-start;
메인 엑시스!!!! 즉, 가로 정렬!!할때!!!
즉,
가로 기준으로 뭔가를 정렬하고싶을떄 하는거다.
가로 Main axis
flex-start
정렬 ,
시작점으로부터 시작부분에 정렬
flex-end
정렬
시작점으로부터 끝부분에 정렬
center
중앙 정렬
space-between;
간격별로
space-around
해보면 암
그러면
세로는 align-items , align-content
인데
이 둘중 뭘 쓸까 고민이면,
일단은
align-items 를 먼저 쓰고,
그다음
적용이 안되면,
align-content을 쓰면 된다.
이것도 : 하고 flex-start / center / flex-end / space-between / space-around
이렇게 쓰면 된다.
