CSS
Cascading Style Sheets :
Style을 사용하는 이유 : 웹 문서의 내용과 상관없이 디자인만 변경 가능
HTML : 웹 사이트의 내용 나열 + CSS : 웹 문서의 디자인 구성 → 웹 표준
서로 독립적인 영향을 줄 수 있다.
- 다양한 기기에 맞게 탄력적으로 바뀌는 문서 제작 가능 : 반응형 (사이즈에맞게)
- 모바일용 홈페이지가 필요한 경우 → 스마트폰 브라우저에 적합하게 문서를 따로 작성
- CSS를 이용하면 HTML로 작성한 내용은 그대로 두고 대상 기긱에 맞게 CSS만 바꿔 주면 같은 내용을 여러 기기에서 볼 수 있다.
CSS 형식
/* 기본형 */
선택자 { 속성1: 속성값1; 속성2: 속성값2 }세미콜론( ; )으로 구분하여 스타일 규칙을 여러 개 지정 가능
선택자에 대해 어떤 속성 적용시킬건지 정한다.
- 선택자 : 스타일을 어느 태그에 적용할 것인지 지정
- 중괄호 { } 사이에 스타일 정보 입력
p {
text-align: center;
color: blue;
} // p단락태그에 글자는 중앙정렬하고 파란색으로 컬러주석처리
/*
CSS 주석은 이렇게 표시
한 줄 또는 여러 줄을 입력할 수 있습니다.
*/
/*한줄 주석도 이렇게 해야한다*/CSS Style Sheets
스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한군데 묶어 놓은 것
브라우저 기본 스타일
웹 브라우저에 기본을 만들어져 있는 스타일
사용자 스타일
인라인 스타일
적용태그에 직접 태그내에 스타일 작성해주는것
/* style="속성: 속성값;" */
<h1>2023 프로야구 우승팀</h1>
<p style="color: blue;">롯데 자이언츠</p>내부 스타일 시트
head 태그 부분에 사용할 스타일을 정의해주는것
style과 /style 태그 사이에 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>I Like Baseball</title>
⭐<style>
h1 {
width: 350px;
padding: 10px;
background-color: black;
color: tomato;
}
p {
color: tomato;
font-size: 20px;
}
</style>
</head>
<body>
<h1>2023 프로야구 우승팀</h1>
<p>롯데 자이언츠</p>
</body>
</html>단점 : 한 사이트 내에서만 적용된다는 단점이 있다.
웹 사이트에서 같은 스타일을 여러 웹 문서에 사용하는 경우
→ 각각 내부 스타일 시트를 적용할 경우 서버 공간과 내려받는 시간 낭비
외부 스타일 시트
여러 웹 문서에서 사용할 스타일을 별도 파일로 저장
→ 따로 저장된 스타일 정보 : 외부 스타일 (확장자 .css)
- 외부 스타일 시트 파일에 스타일 작성 시 style태그 사용❌
- 외부 스타일 시트와 웹 문서를 연결 : link 태그 사용❗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>I Like Baseball</title>
⭐<link rel="stylesheet" href="./styleSheet.css">
</head>
<body>
<h1>2023 프로야구 우승팀</h1>
<p>롯데 자이언츠</p>
</body>
</html>CSS 선택자
전체 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS - Selector</title>
<style>
/* CSS 선택자 */
/* 스타일 속성을 적용할 대상을 선택하는 것 */
/* 전체 선택자 */
/* 모든 HTML요소에 대해서 해당 스타일 시트를 적용하기 위한 선택자 '*' */
* {
margin: 0;
font-size: 14px;
font-weight: 300;
}웹 브라우저의 기본 스타일을 초기화 할 때 사용
→ 웹 문서 내용을 브라우저 창에 바짝 붙지 않도록 문서 내용과 브라우저 테두리 사이 여백 ⭕ 마진(margin) / 패딩(padding)
타입 선택자
특정 태그를 사용한 모든 요소에 스타일 적용
(= 태그 선택자(tag selector) = 요소 선택자(element selector))
타입 선택자를 사용해 스타일을 지정하면 해당 태그를 사용한 모든 요소에 적용
/*기본형*/
태그명 { 스타일 규칙 } /* 타입 선택자 */
/* 특정한 요소에 대해 스타일을 적용하기 위한 선택자(요소명) */
h1 {
color: #ff0000;
}
h2 {
color: #00FF00;
}
p {
color: #0000ff;
}클래스 선택자
특정 부분에 스타일 적용
클래스 이름을 사용하여 다른 선택자와 구별 → 클래스 이름 앞에 마침표( . )를 반드시 붙여야 한다❗
클래스 스타일 적용
→ 태그 안에 class=”클래스명” : class 속성을 사용하여 지정
/*기본형*/
.클래스명 { 스타일 규칙 } /* 클래스 선택자 */
/*특정 클래스에 대한 스타일을 적용하기 위한 선택자(.클래스명) */
.title {
font-size: 20px !important; /*최우선 순위로 스타일 적용*/
font-weight: 700;
}
.sub-title {
font-size: 16px;
font-weight: 500;
}아이디 선택자
아이디 이름을 사용하여 다른 선택자와 구별 → id 이름 앞에 # 기호를 반드시 붙여야 한다
클래스 선택자는 문서에 여러 번 적용 → id 선택자는 문서에서 한 번만 적용할 수 있다.
주로 문서의 레이아웃과 관련된 스타일을 지정 OR 웹 요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할 때 사용
/* 아이디 선택자 */
/* 특정 아이디에 대한 스타일을 적용하기 위한 선택자 (#아이디명) */
#h1-sub-title {
color: black;
}그룹 선택자
(전체 선택자처럼 기본설정을 변경하려고 할때 많이 쓰인다)
하나의 스타일에대해서 여러 선택자에 적용시킬수 있다. 같은 스타일 규칙을 사용하는 요소를 묶어서 적용. 여러 선택자에서 같은 스타일 규칙을 사용하는 경우
→ 쉼표( , )로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한 번만 정의
/* 그룹 선택자 */
/* 같은 스타일을 사용하는 선택자들을 나열하는 방법 (,) */
.class-1, .class-2, .class-3, .class-4 {
background-color: rgba(0,0,0,0.4);
}
/* 자손 선택자 */
/* 특정 자손들에 대해서 스타일을 적용하기 위한 선택자 ( ) */
/* html에 종속되기 때문에 사용을 지양해야한다. */
div h1 { /*자손에 대해 스타일을 적용?*/
color: black;
}
.div-h1 {
color: #ff00ff;
font-size: 10px;
text-align: center;
}
</style>
</head>
전체 스타일 화면
<body>
<div>
<div class="div-h1">
<!--부모에 지정한 요소를 자식에 상속되게한다.
색상은 안되고 text에 대한 것들만 상속된다-->
<h1 class="title">H1 제목 태그입니다</h1>
<!--기본적으로 margin이 설정되어있다-->
<h1 class="sub-title">H1 부제목 태그입니다</h1>
<!--개발자가 지정한 분류가 class-->
<!-- .title 또는 .h1-sub-title을 이용해서 지정한
class에 대해서 스타일을 지정할 수 있게 된다-->
<!--title div-h1처럼 중첩되는 스타일 지정이 있는 경우
제일 오른쪽에 지정한 값이 적용되게 된다-->
<!--id를 사용하면 정확한 구분자로 쓸수 있다.-->
</div>
</div>
<h1 class="title">H1 제목 태그입니다</h1>
<h1 id="h1-sub-title" class="sub-title">H1 부제목 태그입니다</h1>
<h2 class="title">H2 제목 태그입니다</h2>
<h2 class="sub-title">H2 부제목 태그입니다</h2>
<h2 class="title">H2 제목 태그입니다</h2>
<h2 class="sub-title">H2 부제목 태그입니다</h2>
<p class="class-1">P 태그입니다</p>
<p class="class-2">P 태그입니다</p>
<p class="class-3">P 태그입니다</p>
<p class="class-4">P 태그입니다</p>
</body>
</html>
Cascading Style Sheet
캐스케이딩(Cascading) + 스타일 시트(Style Sheets)
스타일 시트에서는 우선순위가 위에서 아래 → 계단식으로 적용❗
CSS : 우선순위가 있는 스타일 시트
- CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정
- 스타일이 충돌하지 않게 하는 방법 2가지 : ‘스타일 우선순위’ & ‘스타일 상속’
컴퓨터가 제일 마지막으로 읽는게 적용이 된다
중요도 적응범위
1. !important 를 붙이면 어떤 스타일보다 우선 적용❗
2. 인라인 스타일 : 태그 안에 style 속성을 사용해 해당 태그만 스타일 적용
3. id 스타일
4. 클래스 스타일
5. 타입 스타일
CSS Text
글꼴 ≠ 텍스트 스타일
글꼴 : 폰트와 관련
텍스트 : 글자와 단어, 그리고 글자로 이루어진 문단에 사용하는 스타일
글꼴관련 스타일
font가 붙으면 글꼴과 관련되었다.
font-family 속성
/*기본형*/
font-family:<글꼴 이름> | <글꼴 이름>, <글꼴 이름>첫번째 글꼴이 없다면 그 다음 글꼴로 넘어가서 적용된다
두 단어 이상으로 된 글꼴 이름은 큰 따옴표로 표시
font-size속성
글자 크기를 지정. 글자 크기의 단위는 px(픽셀)이나 pt(포인트) 등으로 지정 OR 백분율 사용. 보통px를 쓰는데 반응형의 경우 em이나 rem을 사용하기도 한다.(비율에 대한 값)
px로 지정하면 딱 그 값으로 고정되어서 웹사이즈의 크기를 줄이면 범위를 침범해서 사용되기도한다.
‘백분율’을 사용하여 글자 크기 지정
→ 부모 요소의 글자 크기를 기준으로 계산하여 지정하는 방법
→ 부모 요소의 글꼴 크기가 font-size: 16px처럼 단위로 표현되어 있어야 한다❗
font-style속성
이탤릭체로 글자를 표시
italiic & oblique → 웹에서는 주로 italic 사용
font-weight속성
글자 굵기를 지정
100 ~ 900 사이에서 400은 normal, 700은 bold에 해당
텍스트 관련 스타일
color 속성
RGB (빨강 초록 파랑) 16진수로 표현 #ff0000
10진수로 표현시 rgb(255,0,0)
grba(0,0,0,투명도)
text-align 속성
텍스트의 정렬 문단의 정렬방법 지정
text-align 속성값 중 justify는 여백을 동일하게 줘서 정렬하는것
line-height 속성
한 문단이 두 줄을 넘으면 줄 간격이 생긴다.
줄 간격이 너무 좁거나 넓을 경우 가독성 떨어짐.
text-decoration 속성
텍스트에 밑줄을 긋거나 취소선을 표시
하이퍼링크를 적용할 때 기본적으로 생기는 밑줄을 제거
CSS Box
div를 지정했을때 이 구역이 얼만큼의 자리를 차지하는지에 대한 게 box
눈으로 볼수 있는 제일 마지막 공간이 테두리 boder, 내용물이 width height를 차지한다
block는 한줄을 다 차지하고 Inline은 요소만큼 차지한다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box</title>
<style>
* {
margin: 0;
}
.span-1 {
display: block;
background-color: aquamarine;
width: 100px;
height: 100px;
/*width, height는 '실제' 내용물의 크기만을 나타낸다*/
border: 5px black solid; /*가로 세로 총 110 * 110을 가지게 된다*/
padding: 10px; /* padding까지하면 총 공간 130 * 130을 가지게 된다*/
margin: 10px; /*요소와 요소 사이의 거리,
margin까지 하면 전체 사이즈가 150 * 150을 차지하게 된다 */
/* 디자인 시안 보고 작업할때 작업물의 높이만
생각하면 안되고 margin, padding, bolder을 고려해서 적용해줘야한다 */
}
.span-2{
display: block;
background-color: beige;
width: 100px;
height: 100px;
/*bolder이 없기때문에 전체 공간이 100 * 100을 가진다*/
}
.div-1{
display: inline; /*가로 세로의 크기를 지정할수없다?*/
}
.div-2{
display: block;
}
.div-3{
background-color: grey;
display: flex;
height: 300px;
⭐flex-direction: column;
/*flex의 '방향'이 바뀌는것, 중심축이 가로에서 세로로 바뀌게 되는것이다*/
align-items: center;
/*align-items, justify-content 모두 쌓이는 방향! 에 따라서 바뀌게 된다. /
justify-content: space-between;
/*left, right, flex-start, flex-end, center,
space-between, space-around*/
}
</style>
</head>
<body>
<span class="span-1">Content</span> <!--span은 InLine요소-->
<span class="span-2">Content</span>
<div class="div-1">Content</div> <!--display와 관련되서 보기-->
<div class="div-2">Content</div>
<div class="div-3">
<div class="span-1" style="flex: 1">1</div> <!--div는 block 요소-->
<div class="span-1" style="flex: 1">2</div>
<div class="span-1" style="flex: 1">3</div>
<div class="span-1" style="flex: 1">4</div>
</div>
</body>
</html>
flex-direction: column 설정을 하지 않은 경우
Block, InLine, Inline-block, Flex의 차이점
Block 요소
한 줄을 전부 사용하여 가로폭이 늘어나는 요소입니다. (자동 줄바꿈)
높이(height)와 너비(width)를 모두 지정할 수 있습니다.
기본적으로 새로운 줄에서 시작합니다.
예시: div, p, h1~h6, ul, ol, li, table, form 등
Inline 요소
글자와 같이 한 줄을 차지하는 요소입니다.
높이(height)와 너비(width)를 지정할 수 없습니다.
새로운 줄에서 시작하지 않으며, 문장 내에서 자연스럽게 이어집니다.
예시: span, a, strong, em, img, input, button 등
Inline-block 요소
Inline과 Block의 중간형태로, inline처럼 한 줄을 차지하지만 block처럼 높이와 너비를 지정할 수 있습니다.
새로운 줄에서 시작하지 않습니다.
예시: input, button 등
Flex 요소
Flexbox 레이아웃을 사용하기 위한 요소입니다.
Flexbox는 요소들을 행(row)이나 열(column)의 형태로 배치할 수 있습니다.
요소들 사이의 간격과 정렬, 순서 등을 설정할 수 있습니다.
예시: div 등
