Overview
CSS는 Cascading Style Sheets를 의미한다
. Cascading : 계단식
. Style : 멋을 내다
. Sheets : 종이 한 장
=> 계단식으로 스타일을 정의하는 문서
웹 문서의 콘텐츠에 스타일을 추가하는 언어(색상, 크기, 위치 등)
CSS 기본 문법
선택자 {
속성명: 속성값;
}선택자: 어떤 요소에 스타일 을 적용할지에 대한 정보
{중괄호}: 선택한 요 소에 적 용할 스 타 일 을 정의하는 영역
속성명: 어떤 스타일을 정의하고 싶은지에 대한 정보 (색상, 크기 등)
속성값 : 어떻게 정의하고 싶은지에 대한 정보
p {
color: red;
}선택자 : p 태 그에 스타일을 적용하겠다.
{중괄호} : 이 안에, p 태그에 대한 스타일을 정의하겠다.
속성명 color를 정의하겠다. 이건 글자색을 의미한다.
속성값 : red로 정의하겠다. 빨간색 글자를 원한다.
선택자
선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다. 먼저 CSS에서 스타일이 어떤 방식으로 정의 되는지 알아봅시다.
선택자의 종류는 아래와 같습니다.
전체 선택자
* {
color:red;
}
태그 선택자
body {
/*body css code*/
background-color:green;
}
header {
/*header css code*/
background-color:black;
color:white;
}
클래스 선택자
<p class="name">
dev2820
</p>.name {
/*name class css*/
color:green;
}
아이디 선택자
<h1 id="title">
제목
</h1>#title {
/*title id css*/
color:red;
}
속성 선택자
<a href="http://www.google.com">google</a>
<input type="password">a[href="https://www.google.com"] {
/*href 속성값이 http://www.google.com 인 a 태그*/
text-decoration:none;
color: green;
}
input[type="password"] {
/*input*/
border-radius:4px;
}
a[href] {
/*href 속성을 지닌 모든 a 태그*/
}
a[href*="https://"] {
/*href 속성값이 https://로 시작하는 a 태그*/
}
img[src$=".png"] {
/*src 속성값이 .png로 끝나는 img 태그*/
}
[class *= "it"]{
/* 클래스 값에 'it'가 포함되는 요소를 선택하기 */
}
[class ^= "it"]{
/* 클래스 값에 'it'로 시작하는 요소를 선택하기 */
}
[class $= "it"]{
/* 클래스 값에 'it'로 끝나는 요소를 선택하기 */
}
의사 클래스(Pseudo class) 선택자
<a href="google.com">google</a>
<a href="https://google.com">google</a>
<div>hover me</div>
<input value="focus"></input>
<button>active</button>a:link {
/*방문하지 않은 a 태그*/
color:red;
}
a:visited {
/*방문한 a 태그*/
color:blue;
}
div:hover {
/*커서가 올라가 있는 div 요소*/
color:gold;
}
input:focus {
/*포커싱 되어있는 input 태그*/
/*tab 또는 click으로 input에 focus를 주면 확인할 수 있습니다.*/
background-color:green;
}
button:active {
/*활성화한 button 태그*/
background-color:red;
}
구조 선택자
<html>
위는 안채워진 p태그, 아래는 채워진 p태그
<p></p>
<p>abcde</p>
</html>:root {
background-color:green;
}
p {
border:2px solid black;
}
p:empty {
border:2px solid blue;
}
부정 선택자
<h1 class="title">a</h1>
<h1>b</h1>h1:not(.title) {
color:red;
}
그룹 선택자
hl, p, div{ color: blue; }
자식 결합자
<ul class="list">
<li class="a">a</li>
<li class="b">b</li>
<li class="c">c</li>
<ul>
<li class="d">d</li>
</ul>
</ul>ul.list > li {
/*ul 태그 자식 요소인 모든 li를 선택*/
color:green;
}
형제 결합자
hl ~ p{ /* h1 요소의 뒤에 오는 형제 중 모든 p요소를 선택하기 */ }
hl + p{ /* h1 요소의 벓 뒤에 오는 형제 p요소를 선택하기 */ }
복합 선택자
div#title.box.big {
}위 css는 <div id="title" class="box big">를 가리킵니다. 이렇게 tag, id, class선택자는 여러개를 함께 사용할 수 있습니다.
선택자 우선 순위(*암기)
!important 선언 > 인라인 CSS > ID 선택자 > class 선택자 = 의사 클래스 > tag 선택자 = 가상 요소 > 브라우저 기본 CSS(default css)
참고 : https://velog.io/@dev2820/CSS-CSS-%EC%84%A0%ED%83%9D%EC%9E%90-%EC%A0%95%EB%A6%AC
React에서 CSS 적용
Inline style 사용
/* App.js */
import "./App.css";
function App() {
return (
<div>
<p style={{ backgroundColor: "red", marginTop: "10px" }}>
글자를 파랗게 만들어줘
</p>
</div>
);
}
export default App;※ 주의: 속성 키명은 react가 js 라이브러리여서 - 를 쓰면 -(빼기) 연산자로 받아들이므로 camelCase를 이용한다.
CSS 파일을 통한 stylesheet 사용
/* App.css */
p {
background-color: red !important;
margin-top: 10px;
}/* App.js */
import "./App.css";
function App() {
return (
<div>
<p> 글자를 파랗게 만들어줘 </p>
</div>
);
}
export default App;
style 변수 사용
/* App.js */
function App() {
const style = {
marginTop: "10px",
backgroundColor: "red",
};
return (
<div>
<p style={style}>글자를 파랗게 만들어줘</p>
</div>
);
}
export default App;
텍스트 꾸미기 속성
font-family: 요소를 구성하는 텍스트의 글꼴을 정의한다. 글꼴명을 속성값으로 지정한다. 여러 개의 글꼴을 연달아 기입하여 우선 순 위 를 지정할 수 있다.
* {
font-family: Times, monospace, serif;
}
font-size: 글자 크기, 아래는 단위
px: 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기
rem: <html> 태그의 font-size에 대응하는 상대적인 크기
em: 부모태그(상위태그)의 font-size에 대응하는 상태적인 크기
span{ font-size: 16px; }
span{ font-size: 2rem; }
span{ font-size: 1.5em; }
text-align : 글자의 정렬을 정의한다.
left / right : 왼쪽 또는 오른쪽 정렬한다.
center : 가운데 정렬한다.
justify : 양끝 정렬한다.
p { text-align: right; }
color: 색 정의
span{ color: red; }
span{ color: #FF0000; }
span{ color: rgb(100%, 0%, 0%); }
block, inline
블록 레벨 요소: 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.(*암기)
ex) div, p, h1
인라인 요소: 자기에게 필요한 만큼의 공간만 차지한다.
ex) span, a
display 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다.
div{ display: inline; }
a{ display: block; }
display 속성 값
inline : 인라인으로 처리한다.
block: 블록 레벨로 처리한다.
inline-block 인라인으로 배치라되, 블록 레벨 요소의 속성을 추가할 수 있도록 처리한다. width, height를 설정할 수 있음
none : 디스플레이하지 않는다.
border
span{ border: 2px solid green; }border-color: color 정의 방식과 동일
border-width: thin, medium, thick 등의 키워드 또는 px, em, rem 등의 단위
border-style: none, solid, dotted, dashed 등
Box Model
브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다. 이 영역을 '박스'라 표현하며, CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리, 모양 등)을 결정할 수있다.
하나의 박스는 네 개의 영역으로 구성된다.
contents, padding, border, margin 영역을 살펴보면 아래와 같다.
상하좌우 여백을 개별 정의 할 수 있다.
div{
width: 100px; height: 100px;
padding: 10px;
border: 5px solid red;
margin: 20px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
margin-top: 40px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 10px;
}span{
display: inline-block;
width: 100px; height: 100px;
margin: 10px 20px 30px 40px;
}
box-sizing: 박스의 크기 기준 정의
content-box: 기본값, 너비와 높이가 콘텐츠 영역만 포함한다.
border-box: 너비와 높이가 안쪽 여백과 테두리까지 포함한다.
backgroud
background-color: 배경 색을 정의한다.
background-image: 배경 이미지를 정의한다.
background-position: 벼경 이미지의 초기 위치를 정의한다.
background-size: 배경 이미지의 크기 정의한다. cover: 찌그러지지 않고 잘려서 최대 사이즈, contain : 찌그러지지 않으며 잘리지 않는 최대 사이즈
background-repeat: 배경 이미지의 반복을 정의한다.
div{
box-sizing: border-box;
width: 500px; height:500px;
border: 1px solid red;
background-image: url(./my-cat.jpeg)
background-repeat: no-repeat;
background-position: left top;
background-size: 300px 300px
}
float
none: 기본값, 원래 상태
left: 자신을 포함하고 있는 박스의 왼편에 떠 있어야 함
right: 자신을 포함하고 있는 박스의 오른편에 떠 있어야 함
clear
clear 속성은 float 요소 이후에 표시되는 요소가 float을 해제(clear)하여 float 요소의 아래로 내려가게 할 수 있다.
none: 기본값, 아래로 이동되지 않음을 나타내는 키워드
left: float이 left인 요소의 아래로 내려가겠다.
right: float이 right인 요소의 아래로 내려가겠다.
both: float이 left 및 right인 요소의 아래로 내려가겠다.
position
position은 문서 상에 요소를 배치하는 방법을 정의한다.
position이 요소의 배치 방법을 결정하면, top, bottom, right, left가 최종 위치를 결정하는 방식
position 속성 5가지
static : 기본값, 요소를 일반적인 문서 흐름에 다라 배치한다.
relative: 일반적인 문서 흐름에 따라 배치하되, 상하좌우 위치 값에 따라 오프셋을 적용한다.
absolute: 일반적인 문서 흐름에서 제거하고, 가장 가까운 postion 지정 요소에 대해 상대적으로 오프셋을 적용한다.
fixed: 일반적인 문서 흐름에서 제거하고 지정한 위치에 고정된다.
sticky: 일반적인 문서 흐름에서 제거하고, 스크롤 동작이 존재하는 가장 가까운 요소에 대해 오프셋을 적용한다.
position:relative
position:absolute
flexbox
floexbox란 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다.
floxbox를 1차원 모델이라 부르는 이유는, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만 다룬다는 특성 때문이다.
행방향(세로)가 주축이다.
flex-direction
flex-direction 속성은 flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정한다.
row: 기본값, 주축은 행이고 방향은 콘텐츠의 방향과 동일
row-reverse: 주축은 행이고 방향은 콘텐츠의 방향과 반대
column: 주축은 열이고 방향은 콘텐츠의 방향과 동일
column-reverse: 주축은 열이고 방향은 콘텐츠의 방향과 반대
flexbox 연계
justify-content : 주죽 배치 방법
align-items: 교차축 배치 방법
align-self: 교차축 개별요소 배치 방법
flex-wrap: 줄 바꿈 여부
inherit, initial, unset
상속이란 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미한다.
상속 된다 : color, font-family, font-size, font-weight, text-align, cursor 등 (*암기)
상속 안 된다 : background-color, background-image, background-repeat, border, display 등 (*암기)
참고 : https://www.w3.org/TR/CSS21/propidx.html
inherit: 상위 요소로부터 해당 속성의 값을 받아 사용한다.
initial: 해당 속성의 브라우저 기본값을 요소에 적용한다.
unset: 상속 속성에 대해서는 inherit처럼, 상속되지 않는 속성에 대해서는 initial처럼 적용된다.
inherit 사용 예제
initial, unset 사용 예제
z-index
요소의 쌓임 순서를 정의할 수있다. 정수 값을 지정하여 쌓임 맥락에서의 레벨을 정의하는 방식으로 적용되며, 위치 지정 요소에 대해 적용할 수 있는 속성이다. => 위치 지정 요소란, postion 속성이 정의되어 있는 요소를 말한다.
word-break
CSS 속성 은 텍스트가 콘텐츠 상자를 넘어갈 때마다 줄 바꿈을 표시할지 여부를 설정합니다.
단어를 기준으로 개행되지 않고 단어가 잘리도록 개행되면 문제가 됩니다.
word-break로 이를 해결할 수 있습니다.
참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
HTMLCSSResult
| div { width : 400px; border : 1px solid black; } |
|
|
| div { width : 400px; border : 1px solid black; word-break: keep-all; } |
|