💻UNIT5
CSS 기초
1. CSS
CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일 시트 언어. HTML로 웹페이지의 구조를 잘 만든뒤 CSS를 이용해 UI및 레이아웃 등 스타일을 설정 구성하여 웹페이지를 만들 수 있다
CSS를 사용하여 화면의 구성이나 배치(레이아웃)을 직관적이고 쉬운 UI로 만들어서 더 나은 사용자 경험(UX)을 제공하는 것이 프론트엔드 개발자의 기본소양이다
UI(User Interface)
UX(User Experience)
2. CSS의 문법
CSS RULE
selector {
property속성: value값;
}
h1 {
color: purple;
}
img {
width: 100px;
height: 200px;
}
셀렉터는 요소의 이름이나, id 또는 클래스로 특정 요소를 선택 후에 중괄호 안에서 이 요소에 적용할 스타일 속성 내용을 적는다.
3. HTML과 CSS 연동
1. Link style
<link rel="stylesheet" href="index.css" />외부에 있는 CSS파일을 HEAD태그 안에 LINK태그로 CSS파일을 로드하는 방식
가장 많이 사용된다
2. Embedding style
<!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를 포함시키는 방식이다.
3. Inline 방식
<!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를 기술하는 방식이다.
4. 텍스트 꾸미기
1.색상
color
- 글자의 색상을 변경하는 속성
h1 {
color: blue;
}
p {
color: #F08080;
}색상값은 색상이름, HEX값으로 사용할 수 있다.
2.글꼴
font-family
- 글꼴을 지정할 수 있다
.emphasize {
font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}글꼴의 이름은 따옴표를 붙여서 적용하고, 사용하려는 글꼴이 존재하지 않거나 지원하지 않을 수 있을때를 대비하여 fallback 글꼴을 추가할 수 있다. ,쉼표로 구분하여 fallback글꼴을 입력한다. 마지막 자리에는 OS의 기본적으로 설치되어 있는 generic-family폰트를 추가해 대비한다.
GoogleFonts에서 원하는 글꼴을 link태그를 사용해서 embed할 수 있다.
3. 크기
font-size
- 글자의 크기를 변경할 수 있다.
.title {
font-size: 24px;
}4. 굵기
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;
}- a태그의 underline을 제거할 수 있다.
none, underline, overline, line-through
letter-spacing 자간
- 글자 사이의 간격을 지정한다.
line-height 행간
- 텍스트의 높이를 지정한다. 텍스트의 줄 간격을 설정 텍스트 수직정렬에도 응용!
unitless numbers를 사용하는 것을 권장한다.
text-align
- 텍스트의 수평 정렬을 정의한다.
5. 절대단위와 상대단위
- 절대 단위:
px,pt등 - 상대 단위:
%,em,rem,ch,vw,vh등
1.글꼴 사이즈를 정할때
-
기기나 브라우저 사이즈 등의 환경에 영향을 받지않는 절대적인 크기로 정하는 경우에는
px(픽셀)을 사용한다.px은 크기가 고정된 절대단위이다. 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하다. -
일반적인 경우에는 상대 단위인
rem을 권장한다. root의 글자크기, 브라우저의 기본 글자 크기가 1rem이며 두배로 크게하려면 2rem, 작게하려면 소수점숫자로 ex) 0.7 로 조절해서 사용가능하다.
2. 화면사이즈를 정할때
- 반응형 웹(reponsive web)에서 기준점을 만들때
디바이스에 너비에 따라 유동적인 레이아웃이 적용되는 반응형 웹의 기준점을 만들때는px을 이용한다. - 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
vw,vh를 사용하여 구현한다. ex) 100vw, 100vh
6. 박스모델
1. border (테두리)
- 테두리는 심미적인 용도 외에도, 각 영역이 차지하는 크기를 파악하기위해, 레이아웃의 크기를 시각적으로 확인할 수 있게 한다.
p {
border: 1px solid red;
}border 속성에는 테두리 두께border-width, 테두리 스타일border-style, 테두리 색상border-color로 각각 개별로 값을 지정할 수도 있고 border속성을 통해 모두 지정할 수 있다.
border-radius
테두리 모서리를 둥글게 표현하도록 지정할 수 있다. px,em 등 과 %를 사용해야 한다.
50% 지정할경우 원 모양
2. margin (바깥 여백)
- 테두리 바깥에 위치하는 요소의 외부 여백 영역이다. margin 값은 마진 영역의 두께를 의미하고 색을 지정할 수 없다.
p {
margin: 10px 20px 30px 40px;
}
각각의 값은 top, right, bottom, left로 시계방향으로 지정 가능하다!
p {
margin: 10px 20px;
}값을 두개만 지정할 경우에는 상하 10px, 좌우 20px로 (상하, 좌우) 로 지정 가능하다!
3. padding (안쪽 여백)
- 테두리 안에 위치하는 요소의 내부 여백 영역이다. padding 값은 마진 영역의 두께를 의미하고 요소의 적용된 배경색, 이미지는 패딩영역까지 적용된다.
p {
padding: 10px 20px 30px 40px;
}
각각의 값은 top, right, bottom, left로 시계방향으로 지정 가능하다!
p {
padding: 10px 20px;
}값을 두개만 지정할 경우에는 상하 10px, 좌우 20px로 (상하, 좌우) 로 지정 가능하다!
4. 콘텐츠가 박스를 벗어난 경우
p {
height: 40px;
overflow: auto;
}overflow속성 auto를 지정해 박스보다 큰 콘텐츠에는 스크롤을 표시한다.
5. box-sizing
-
box-sizing은 width, height 프로퍼티의 대상 영역을 변경할 수 있다.
기본값은content-box로 width와 height의 영역의 값이 content영역을 의미한다.
border-box로 지정할 경우 width와 height의 영역의 값이 padding과 border를 포함한 영역으로 지정되어 레이아웃 디자인을 쉽게 할 수 있다.
7. 기본 Selector
1. 전체 셀렉터 (Universal Selector)
*
*{ }- 전체 셀렉터는 문서의 모든 요소를 선택한다.
2. 태그 셀렉터 (Type Selector)
h1 { }
div { }
section, h1 { }- 같은 태그명을 가진 모든 요소를 선택한다. ,을 이용해 복수로도 선택 가능하다.
3. ID 셀렉터 (ID Selector)
#only { }#id로 입력하여 선택한다.
4. class 셀렉터 (Class Selector)
.widget { }
.center { }.class로 입력하여 선택한다.
5. Attribute Selector
셀렉터[attribute="값"]- 지정된 어트리뷰트를 가지며 지정된 값과 어트리뷰트의 값이 일치하는 모든 요소를 선택한다.
셀렉터[attribute~="값"] // 지정된 어트리뷰트의 값이 지정된 값을(공백으로 분리된) 단어로 포함되는 요소를 선택
셀렉터[attribute|="값"] //지정된 어트리뷰트의 값과 일치하거나 지정 어트리뷰트 값 뒤 연이은 하이픈(“값-“)으로 시작하는 요소를 선택한다.
셀렉터[attribute^="값"] // 지정된 어트리뷰트 값으로 시작하는 요소를 선택한다.
셀렉터[attribute$="값"] // 지정된 어트리뷰트 값으로 끝나는 요소를 선택한다.
셀렉터[attribute*="값"] // 지정된 어트리뷰트 값을 포함하는 요소를 선택한다.8. 자식 / 후손 / 형제 셀렉터
1. 자식 셀렉터 (Child Combinator)
header > p { }>자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다.
2. 후손 셀렉터 (Descendant Combinator)
header p { }- 후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택한다.
3. 형제 셀렉터(General Sibling Combinator)
section ~ p { }~형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택합니다.
4. 인접 형제 셀렉터(Adjacent Sibling Combinator)
section + p { }- 인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택합니다.
9. 기타 셀렉터
1. 가상 클래스 셀렉터 (Pseudo-Class Selector)
- 가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다.
링크 셀렉터 / 동적 셀렉터
:link //셀렉터가 방문하지 않은 링크일 때
:visited //셀렉터가 방문한 링크일 때
:hover //셀렉터에 마우스가 올라와 있을 때
:active //셀렉터가 클릭된 상태일 때
:focus //셀렉터에 포커스가 들어와 있을 때UI 요소 상태 셀렉터
: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 요소를 선택한다.2. 가상 요소 셀렉터 (Pseudo-Element Selector)
- 가상 요소는 요소의 특정 부분에 스타일을 적용하기 위하여 사용된다
::first-letter // 콘텐츠의 첫글자를 선택한다.
::first-line // 콘텐츠의 첫줄을 선택한다. 블록 요소에만 적용할 수 있다.
::after // 콘텐츠의 뒤에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::before // 콘텐츠의 앞에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다.
::selection // 드래그한 콘텐츠를 선택한다. iOS Safari 등 일부 브라우저에서 동작 않는다.