CSS
는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일 시트 언어. HTML로 웹페이지의 구조를 잘 만든뒤 CSS를 이용해 UI및 레이아웃 등 스타일을 설정 구성하여 웹페이지를 만들 수 있다
CSS를 사용하여 화면의 구성이나 배치(레이아웃)을 직관적이고 쉬운 UI로 만들어서 더 나은 사용자 경험(UX)을 제공하는 것이 프론트엔드 개발자의 기본소양이다
UI(User Interface)
UX(User Experience)
CSS RULE
selector {
property속성: value값;
}
h1 {
color: purple;
}
img {
width: 100px;
height: 200px;
}
셀렉터는 요소의 이름이나, id 또는 클래스로 특정 요소를 선택 후에 중괄호 안에서 이 요소에 적용할 스타일 속성 내용을 적는다.
<link rel="stylesheet" href="index.css" />
외부에 있는 CSS파일을 HEAD태그 안에 LINK태그로 CSS파일을 로드하는 방식
가장 많이 사용된다
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: black; }
p { background: magenta; }
</style>
</head>
<body>
<h1>Hello World</h1>
<p>Give me some chicken.</p>
</body>
</html>
HTML 내부에 style태그를 이용해서 CSS를 포함시키는 방식이다.
<!DOCTYPE html>
<html>
<body>
<h1 style="color: black">Hello World</h1>
<p style="background: magenta">Give me some chicken.</p>
</body>
</html>
HTML 요소의 style 속성에 CSS를 기술하는 방식이다.
color
h1 {
color: blue;
}
p {
color: #F08080;
}
색상값은 색상이름, HEX값으로 사용할 수 있다.
font-family
.emphasize {
font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}
글꼴의 이름은 따옴표를 붙여서 적용하고, 사용하려는 글꼴이 존재하지 않거나 지원하지 않을 수 있을때를 대비하여 fallback 글꼴을 추가할 수 있다. ,쉼표로 구분하여 fallback글꼴을 입력한다. 마지막 자리에는 OS의 기본적으로 설치되어 있는 generic-family폰트를 추가해 대비한다.
GoogleFonts에서 원하는 글꼴을 link
태그를 사용해서 embed할 수 있다.
font-size
.title {
font-size: 24px;
}
font-weight
.title {
font-weight: bold;
}
.thicker {
font-weight: 900;
}
숫자는 100 - 900으로 설정하고 400크기가 normal
700크기가 bold
normal
bold
를 적어서 사용 가능하다.
bolder
는 부모요소보다 더 두껍게 lighter
는 부모요소보다 더 얇게 설정할 수 있다.
text-decoration
밑줄
a {
text-decoration: none;
}
letter-spacing
자간
line-height
행간
unitless numbers
를 사용하는 것을 권장한다. text-align
px
, pt
등%
, em
, rem
, ch
, vw
, vh
등기기나 브라우저 사이즈 등의 환경에 영향을 받지않는 절대적인 크기로 정하는 경우에는 px
(픽셀)을 사용한다. px
은 크기가 고정된 절대단위이다. 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하다.
일반적인 경우에는 상대 단위인 rem
을 권장한다. root의 글자크기, 브라우저의 기본 글자 크기가 1rem이며 두배로 크게하려면 2rem, 작게하려면 소수점숫자로 ex) 0.7 로 조절해서 사용가능하다.
px
을 이용한다.vw
,vh
를 사용하여 구현한다. ex) 100vw, 100vhp {
border: 1px solid red;
}
border 속성에는 테두리 두께border-width
, 테두리 스타일border-style
, 테두리 색상border-color
로 각각 개별로 값을 지정할 수도 있고 border속성을 통해 모두 지정할 수 있다.
border-radius
테두리 모서리를 둥글게 표현하도록 지정할 수 있다. px,em 등 과 %를 사용해야 한다.
50% 지정할경우 원 모양
p {
margin: 10px 20px 30px 40px;
}
각각의 값은 top, right, bottom, left로 시계방향으로 지정 가능하다!
p {
margin: 10px 20px;
}
값을 두개만 지정할 경우에는 상하 10px, 좌우 20px로 (상하, 좌우) 로 지정 가능하다!
p {
padding: 10px 20px 30px 40px;
}
각각의 값은 top, right, bottom, left로 시계방향으로 지정 가능하다!
p {
padding: 10px 20px;
}
값을 두개만 지정할 경우에는 상하 10px, 좌우 20px로 (상하, 좌우) 로 지정 가능하다!
p {
height: 40px;
overflow: auto;
}
overflow
속성 auto를 지정해 박스보다 큰 콘텐츠에는 스크롤을 표시한다.box-sizing
은 width, height 프로퍼티의 대상 영역을 변경할 수 있다.
기본값은 content-box
로 width와 height의 영역의 값이 content영역을 의미한다.
border-box
로 지정할 경우 width와 height의 영역의 값이 padding과 border를 포함한 영역으로 지정되어 레이아웃 디자인을 쉽게 할 수 있다.
*
*{ }
h1 { }
div { }
section, h1 { }
#only { }
#id
로 입력하여 선택한다..widget { }
.center { }
.class
로 입력하여 선택한다.셀렉터[attribute="값"]
셀렉터[attribute~="값"] // 지정된 어트리뷰트의 값이 지정된 값을(공백으로 분리된) 단어로 포함되는 요소를 선택
셀렉터[attribute|="값"] //지정된 어트리뷰트의 값과 일치하거나 지정 어트리뷰트 값 뒤 연이은 하이픈(“값-“)으로 시작하는 요소를 선택한다.
셀렉터[attribute^="값"] // 지정된 어트리뷰트 값으로 시작하는 요소를 선택한다.
셀렉터[attribute$="값"] // 지정된 어트리뷰트 값으로 끝나는 요소를 선택한다.
셀렉터[attribute*="값"] // 지정된 어트리뷰트 값을 포함하는 요소를 선택한다.
header > p { }
>
자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다.header p { }
section ~ p { }
~
형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택합니다.section + p { }
:link //셀렉터가 방문하지 않은 링크일 때
:visited //셀렉터가 방문한 링크일 때
:hover //셀렉터에 마우스가 올라와 있을 때
:active //셀렉터가 클릭된 상태일 때
:focus //셀렉터에 포커스가 들어와 있을 때
:checked //셀렉터가 체크 상태일 때
:enabled //셀렉터가 사용 가능한 상태일 때
:disabled //셀렉터가 사용 불가능한 상태일 때
:first-child // 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택한다.
:last-child // 셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택한다.
:nth-child(n) //셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택한다.
:nth-last-child(n) //셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택한다.
:first-of-type // 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 첫번째 등장하는 요소를 선택한다.
:last-of-type 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 마지막에 등장하는 요소를 선택한다.
:nth-of-type(n) 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 앞에서 n번째에 등장하는 요소를 선택한다.
:nth-last-of-type(n) 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중 뒤에서 n번째에 등장하는 요소를 선택한다.
:not(셀렉터) // 셀렉터에 해당하지 않는 모든 요소를 선택한다.
:valid(셀렉터) // 정합성 검증이 성공한 input 요소 또는 form 요소를 선택한다.
:invalid(셀렉터) // 정합성 검증이 실패한 input 요소 또는 form 요소를 선택한다.
::first-letter // 콘텐츠의 첫글자를 선택한다.
::first-line // 콘텐츠의 첫줄을 선택한다. 블록 요소에만 적용할 수 있다.
::after // 콘텐츠의 뒤에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::before // 콘텐츠의 앞에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::selection // 드래그한 콘텐츠를 선택한다. iOS Safari 등 일부 브라우저에서 동작 않는다.