스타일(style): HTML문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가리킴.
반응형 웹 디자인 : PC, 모바일과 상관없이 웹 브라우저의 크기에 따라 화면 레이아웃을 자동으로 바꿔주는 방법. 하나의 웹문서에서 작동하도록하는 것이 스타일의 역할. 배치가 달라짐.
CSS스타일의 형식
[선택자 {속성1: 속성값1; 속성2: 속성값2; }] //속성1: 속성값1 = 스타일 규칙.
p(타입 선택자: 스타일을 어느 태그에 적용할지 알려줌){(괄호 안에 스타일 정보)
text-align(텍스트 정렬 속성): center(값);
color(글자색 속성): blue(값);
}
스타일 규칙
;으로 구분하고 {} 안에 나열함.
스타일 주석: /**/으로 여러줄 주석이 들어감.
- 스타일 시트: 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한군데 묶어놓은 것
- 브라우저 기본 스타일: HTML만 줬을 때, 웹 브라우저에 표시할 때는 기본 스타일 사용.
- 인라인 스타일: 스타일 시트를 사용하지 않고 태그에 직접 표시함. style="속성: 속성값;"을 줌.
- 내부 스타일 시트: 문서 전체에 동일하게 적용할 스타일. <head> 태그 안에 정의 <style>,</style>태그 사이에 작성.
- padding: 내부 여백, 시계방향.
- 외부 스타일 시트: 다른 페이지에도 동일하게 필요할 때 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용. *.css 파일 확장자 사용.
- [<link rel = "stylesheet" href= "외부 스타일 시트 파일 경로">]
내부 스타일 시트
<head>
<meta charset="UTF-8">
<title>레드향 샐러드 레시피</title>
<style>
p{
padding: 10px;
background-color: #222;
color: #fff
}
</style>
</head>
외부 스타일 시트
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<link rel="stylesheet" href="../css/h1.css">
</head>
CSS기본 선택자//잘 기억 요소를 찾을 때 사용
전체 선택자: 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용. 웹브라우저의 기본 스타일을 초기화할 때 자주 사용.
margin: 외부 여백. 브라우저에 맞게 margin:0은 여백없이 출력.
태그: 태그자체
요소: 태그를 포함해 <p>태그를 적용한 '텍스트 단락 지정하기' 부분을 p 요소.
타입 선택자: 문서에 특정 태그를 사용한 모든 요소에 스타일이 적용됨.
[태그명{ 스타일 규칙 }]
class 선택자: 요소의 특정 부분에만 스타일 적용. 문서안에서 여러번 반복할 스타일이라면 클래스 선택자로 정의.
span은 오로지 스타일을 적용하기 위한 태그.
[.클래스명{ 스타일 규칙 } ]
p{
font-style: italic;/*이탈릭체*/
}
.accent{
border: 1px solid #000; /*테두리*/
padding: 5px;/*테두리와 내용 사이의 여백*/
}
.bg{
background-color: #ddd;/*배경색*/
}
<p class="accent bg">재료: 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<li><span class="accent">레드향과 아보카도, 토마토</span>도 먹기 좋은 크기로 썰어둡니다.</li>
헷갈린 부분: 내부 스타일 시트와 타입 선택자의 차이-> 내부 스타일 안에 타입 선택자가 존재.
id 선택자: 요소의 특정 부분에만 스타일 적용, #다음에 id 이름 지정,문서 안에서 한번만 사용(유일 값) (클래스 선택자와의 차이)
[#아이디명 { 스타일 규칙 }]
auto : 균등하게 줌(가운데 정렬)//전체: 1000px 사진: 500px 좌우: 250px
<head>
<meta charset="UTF-8">
<title>레드향</title>
<style>
#container{
width: 500px;/*너비*/
margin: 10px auto;/*중앙 배치*/
padding: 10px;/*테두리와 내용 사이 여백*/
border: 1px solid #000;/*테두리 굵기와 색깔*/
}
#fontcolor{
color: red;
}
</style>
</head>
<body>
<div id="container">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p><span id="fontcolor">레드향</span>을 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</div>
</body>
그룹 선택자: 같은 스타일을 사용하는 선택자를 한꺼번에 정의, 쉼표(,)로 구분해 여러 선택자를 나열
[선택자1, 선택자2 { 스타일 규칙 }]
캐스케이딩 스타일 시트: 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정.
스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타이을 적용.
스타일 상속: 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달합니다.
//위에서 아래로(인터프리터 방식 중첩 적용되면 아래있는 것이 최종적)
원칙1: 스타일 우선 순위
1.얼마나 중요한가.
사용자가 지정한 스타일(), 제작자 스타일(웹 사이트를 만들 때 제작자가 만든 스타일), 웹 브라우저가 기본으로 정해 놓은 스타일(기본 스타일)
2.얼마나 한정지을 수 있는가.
!important(어떤 스타일보다 우선 순위), 인라인 스타일(해당 태그에만 적용되는 스타일. 문서 안에서 한번만 사용됨), id 스타일(특정 부분에만 적용되는 스타일. 문서 안에서 한번만 사용됨), 클래스 스타일(특정 부분에만 적용되는 스타일. 문서 안에서 여러번 사용됨), 타입 스타일
3.소스 순서에 따라
나중에 온 스타일이 먼저 온 스타일을 덮어씀.
원칙2: 스타일 상속
자식요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식요소로 전달되는 것.
<style>
p{
color: black;
}
h1{
color:brown !important;
}
p{
color: blue;
}
</style>
<link rel="stylesheet" href="../css/p.css">
</head>
<body>
<div id="container">
<h1 style="color: green;">레드향</h1>
<p style="color: red">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p><span id="fontcolor">레드향</span>을 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</div>
</body>
</html>
클래스와 id는 중첩되어 자주 사용.
font-family: 웹 문서에서 사용할 글꼴,글꼴이 없을 경우를 대비해서 하나 이상 지정.
[font-family:<글꼴 이름>|[<글꼴 이름>,<글꼴 이름>]]
공백 자체를 가지고 있는 글꼴은 큰 따옴표로 묶음 //"맑은 고딕"
속성값을 나열할 때 값이 아니라 유형이라면 < >로 묶습니다. 이때 속성을 유형처럼 사용 가능합니다.
[font-size:<절대 크기>|<상대 크기>|<크기>|<백분율> ] //반드시 단위가 필요.px,pt,%,em(1em=16px=12pt)등 -는 사용 불가능, 부모 요소의 클자 크기를 시준으로 상대적인 글자 크기 지정
[font: <font-style><font-variant><font-weight> ]
font-style: 이탤릭체로 글자 표시
[font-style : normal |italic|oblique]
font-weight: 글자 굵기
[font-weight: normal|bold|bolder|lighter|100|200|..|800|900]
h2{
font-size: 30px;
font-weight: 300;
}
.italic{
font-style: italic;
font-family: "맑은 고딕", 돋움, 고딕;
}
웹 폰트: 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드 시켜 사용하는 글꼴.
[@font-face{
font-family: <글꼴 이름>; //파일명
src: <글꼴 파일>[<글꼴파일>,<글꼴파일>,...]; ]
<head>
<meta charset="UTF-8">
<title>목록 나열하기</title>
<style>
h1{
font-family: 'Nanum Pen Script', cursive;
}
</style>
</head>
color 속성: 글자 색 지정. 색상값 뒤에 a는 투명도.
속성값: 16진수(#000000:검정, #ffffff: 흰색), rgb, hsl, 색상이름
[color: <색상>]
rgb, rgba: 0~255, a는 불투명도 0~1
[h1{ color: rgb(0,0,255)}]
[h1{ color: rgba(0,0,255,0.5)}]
hsl, hsla: 채도(0% 회색톤, 100% 원래색), 명도(0% 가장 어두움, 50% 원래색,100% 흰색)
[hsl(0,100%,50%)는 빨간색]
h2{
color: rgba(0, 0,255, 0.5)
}
text-align: 텍스트 정렬
[text-align: start | end | left | right | center | justify | match-parcent ]
line-height: 줄 간격 조절
[lint-height:2.5; ] 글자 크기의 2.5배
텍스트를 세로로 가운데 정렬: line-height를 height값과 값이 사용.
text-decoration: a태그에 주로 사용(하이퍼링크 제거에 사용)
text-shadow: 텍스트에 그림자 효과를 추가.
[text-shadow: none | < 가로거리 > < 세로거리 > < 번짐 정도 > < 색상 > ]
가로거리: +오른쪽, -왼쪽
세로거리: + 아래, - 위
번짐정도: 양수값 크게, 음수값 작게(기본값 0)
색상: 현재 글자색이 기본값.
text-transform: 텍스트의 대소문자 변환(capitalize: 첫번째 글자, uppercase: 모든 글자 대문자, lowercase: 모든 글자 소문자)
letter-spacing: 글자와 글자 사이의 간격 조절
word-spacing: 단어와 단어 사이 간격 조절
list-style-type : 불릿의 모양이나 번호 스타일을 지정가능.(none은 제거)
list-style-image: 불릿 대신 이미지를 사용
[list-style-image:<url(이미지 파일 경로)>|none]
list-style-position: 목록 들여쓰기, 내려쓰기.(outside: 기본값, inside: 기본 위치보다 안으로 들여씁니다.)
[list-style-position: inside | outside ; ]
위에 3가지가 합쳐서 list-style
ol태그: 주로 메뉴 만들 때
<head>
<meta charset="UTF-8">
<title>회사 소개</title>
<style>
ul{list-style:none;}
li{
width: 300px;
padding: 20px 40px;
margin: 5px;
border: 1px solid #000;
}
</style>
</head>
caption-side: 표 제목의 위치를 정해 줌.
[caption-side: top | bottom]
border: 표에 테두리를 그려 줌.
border-spacing: 셀 사이의 여백 조절 0이면 여백이 없어짐
[ border-spacing : 수평거리 수직거리 ]
border-collapse: 표와 셀 테두리를 합쳐준다.(자주 사용 중요)
[border-collapse: collapse|separate(따로 표시가 기본값)]
