CSS / Flex / justify-content
- justify-content로 flex-direction으로 정한 방향으로의 정렬을 정합니다. 예를 들어 flex-direction의 값이 row라면 가로 방향의 정렬을 정합니다.
- 기본값은 flex-start로 시작점부터 아이템을 배치합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
* {
box-sizing: border-box;
}
.jb-container {
height: 400px;
background-color: #01579b;
display: flex;
justify-content: flex-start;
}
.jb-item:nth-child(1) {
background-color: #ffebee;
}
.jb-item:nth-child(2) {
background-color: #ffcdd2;
}
.jb-item:nth-child(3) {
background-color: #ef9a9a;
}
.jb-item:nth-child(4) {
background-color: #e57373;
}
</style>
</head>
<body>
<div class="jb-container">
<div class="jb-item">Item 1</div>
<div class="jb-item">Item 2 Item 2</div>
<div class="jb-item">Item 3 Item 3 Item 3</div>
</div>
</body>
</html>
- justify-content의 값을 flex-end로 정하면 플렉스가 끝나는 지점에 배치합니다.
.jb-container {
height: 400px;
background-color: #01579b;
display: flex;
justify-content: flex-end;
}
- justify-content의 값을 center로 정하면 가운데에 배치합니다.
.jb-container {
height: 400px;
background-color: #01579b;
display: flex;
justify-content: center;
}
- justify-content의 값을 space-between으로 정하면 빈 공간을 균등하게 나누어 아이템 사이에 간격을 만듭니다.
.jb-container {
height: 400px;
background-color: #01579b;
display: flex;
justify-content: space-between;
}
- justify-content의 값을 space-around로 정하면 양 옆의 간격을 균등하게 만듭니다.
- 아이템 사이의 간격은 양끝 간격의 두 배가 됩니다.
.jb-container {
height: 400px;
background-color: #01579b;
display: flex;
justify-content: space-around;
}
- justify-content의 값을 space-evenly로 정하면 양끝과 아이템 사이의 간격을 동일하게 만듭니다.
.jb-container {
height: 400px;
background-color: #01579b;
display: flex;
justify-content: space-evenly;
}
- flex-direction의 값을 row-reverse로 정하면 플렉스 시작점이 오른쪽이 됩니다.
.jb-container {
height: 400px;
background-color: #01579b;
display: flex;
flex-direction: row-reverse;
justify-content: flex-start;
}
- flex-direction의 값을 column으로 정하면 플렉스 시작점이 위쪽이 됩니다.
.jb-container {
height: 400px;
background-color: #01579b;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
- flex-direction의 값을 column-reverse로 정하면 플렉스 시작점이 아래쪽이 됩니다.
.jb-container {
height: 400px;
background-color: #01579b;
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
}
CSS 변수 CSS에 변수를 만들고 사용할 수 있습니다. 변수를 이용하면 여러 값을 한 번에 변경할 수 있습니다. 변수 선언 --variable-name: value; 변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있습니다. 만약 어느 곳에서나 사용할 수 있게 하려면 :root에 정의합니다. 변수 사용 property: var( --variable-name ) 예제 기본 변수 --my-color-1을 red로 설정하고 사용합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> :root ...
CSS / 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기
웹브라우저에서 텍스트를 마우스로 드래그하면 선택된 글자는 파란색 배경에 흰색을 바뀝니다. 이 색은 CSS로 바꿀 수 있습니다. 사용하는 선택자는 가상 요소 ::selection입니다. 다음은 텍스트를 선택했을 때 배경은 검은색으로, 글자는 노란색으로 만드는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ::selection { background-color: black; color: yellow; } </style> </head> <body> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. ...
CSS / CSS로 드롭다운(Dropdown) 메뉴 만들기
CSS만으로 만든 드롭다운 메뉴입니다. Ipsum, Dolor에 마우스를 올리면 하위 메뉴가 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Tips | Dropdown Menu</title> <style> .dropdown > ul > li { ...
HTML에 CSS를 적용시키는 방법은 세가지가 있다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 선태한다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣는다. Internal Style Sheet HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결한다. 보통 여러 문서에 적용되는 스타일은 Linking Style Sheet으로 만들고, 특정 ...
CSS / white-space / 공백 처리 방법 정하는 속성
개요 white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 white-space: normal | nowrap | pre | pre-wrap | pre-line | initial | inherit normal, nowrap, pre, pre-wrap, pre-line : 아래 표 참고 initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 스페이스와 탭1 줄바꿈2 자동 줄바꿈3 normal 병합 병합 O nowrap 병합 병합 X pre 보존 보존 X pre-wrap 보존 보존 O pre-line 병합 보존 O 연속된 스페이스와 탭의 처리 방법입니다. 병합은 1개의 ...
CSS / border-spacing / 표(table)의 테두리와 셀(td)의 테두리 사이의 간격 정하는 속성
개요 border-spacing으로 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 정한다. 기본값 : 2px 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 border-spacing은 border-collapse의 값이 separate일 때만 적용된다. 문법 border-spacing: length | initial | inherit length : 길이를 입력한다. 값이 한개면 모든 간격에 같은 값을 사용하고, 값이 두개면 첫번째 값은 좌우, 두번째 값은 상하의 간격으로 사용힌다. initial : 기본값으로 ...
CSS / opacity / 요소를 투명하게 만드는 속성
개요 opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 opacity: number | initial | inherit number : 0.0부터 1.0까지의 수를 넣습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 숫자가 작을수록 투명해집니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Reference ...
CSS / list-style-image / 목록의 마커로 이미지 사용하기
개요 list-style-image로 이미지를 ul, ol 등의 목록의 마커(marker)로 사용할 수 있습니다. 기본값 : none 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-image: none | url | initial | inherit none : 이미지가 없습니다. url : 사용할 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 이미지는 원본 크기 그대로 나옵니다. 따라서 글자 크기에 ...
테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다. 기본 모양 아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다. th 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...
flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려갑니다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-content입니다. 기본값은 stretch로, 높이를 꽉 채웁니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...