CSS 레이아웃
CSS 를 이용해서 단순한 문서 형태인 HTML 을 보기 좋게 배치하고 재배열 하는 것이며, 관련 기능, 완성된 배열 등을 포괄적으로 지칭한다.
선택자
전체 선택자*{
property : property value
}
CSS
복사
그룹 선택자 : 여러 선택자를 그룹으로 묶는 기능이다./* 동일한 속성을 반복적으로 사용 */
h2 {
color : blue;
}
p {
color : blue;
}
div {
color : blue;
}
///////////////////////////////////////////////////////////////////////////////
/* 그룹 선택자를 이용해서 한번에 처리 */
h2, p, div {
color : blue
}
CSS
복사
가상 클래스 선택자선택자 뒤에 :가상 이벤트 를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 클래스라고 한다.
•
선택자
선택자 | 설명 | 선택자 | 설명 |
:first-child | 첫번째 자식을 선택 | :last-child | 마지막 자식을 선택 |
:nth-child(n) | 홀수번째 자식을 선택 | :hover | 마우스를 요소에 올렸을 때 |
:active | 활성화된 요소를 선택 (버튼등을 클릭해서 요소의 동작이 활성화 되어있는 상태) | :focus | focus 를 받고있는 입력창들의 요소를 선택 (입력창의 커서가 활성화 되어 있는 요소) |
:visited | 사용자가 방문한 적 있는 링크를 선택 |
•
:before, :after
◦
before 과 after 를 사용하면 html 요소를 수정하지 않고, css 만으로 가상 요소를 추가해 선택할 수 있다.
◦
content 속성을 사용해서 인위적으로 요소에 들어갈 내용을 작성해야 한다.
(content 속성 없으면 화면에 안그려진다,,)
•
사용법
.some-box:hover{ background-color: red; }
.container-boxs:first-child{ margin-left: 0; }
.container-boxs:last-child{ margin-right: 0; }
.contentsBox:nth-child(n){ color: red; }
CSS
복사
형제 요소 선택자/* A 와 같은 부모를 가지고 있는 형제 요소들 중 B 를 선택할 수 있다. */
A ~ B {
property : value
}
CSS
복사
flex 레이아웃
부모요소를 flex container, 자식 요소를 flex item 이라고 부른다. flex 의 속성•
flex 가 적용된 요소에는 중심축과 교차축이 생긴다.
•
중심축 교차축은 flexible box 의 정렬 기준이 된다.
•
컨테이너에 적용하는 속성
◦
display : flex
◦
flex-direction (배치 방향 설정)
▪
row : 가로방향 배치
▪
column : 세로방향 배치
◦
justify-content (메인축 방향 정렬)
▪
메인축은 flex-direction 방향과 동일하다.
▪
메인축 방향으로 어떻게 정렬할지 결정한다.
▪
flex-start
▪
flex-end
▪
center
▪
space-between
▪
space-around
▪
space-evenly
◦
align-items (교차축 방향 정렬)
▪
교차축 방향, 즉 메인축의 수직 방향으로 어떻게 정렬할지 결정합니다.
▪
stretch
▪
flex-start
▪
flex-end
▪
center
•
flex-wrap
◦
flex-item 이 여러개일 때, item 들의 줄바꿈을 허용할 것인지 말 지 결정한다. 만일 줄바꿈을 허용하지 않을 경우, item 이 아무리 많아져도 무조건 한줄에 들어가도록 한다.
◦
flex-wrap : nowrap (기본값)
item 의 줄바꿈을 허용하지 않는다. 따라서 item 이 아무리 많아져도 무조건 한줄에 들어가게 된다.
◦
flex-wrap : wrap
item 의 가로 사이즈가 container 의 가로 사이즈를 넘겼을 때, 자연스럽게 다음 줄로 넘어간다.
item 이 두 줄 이상인 상태에서 정렬을 원하면 align-content 라는 속성을 이용해야 한다.•
아이템에 적용하는 속성
◦
flex-item 이란?
◦
rder : item의 순서를 지정한다.
◦
flex-basis : item의 기본사이즈를 지정한다.
◦
flex-shrink : 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item요소의 크기가 축소된다.
◦
flex-grow : flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언한다.