CSS: 캐스캐이딩 스타일시트
cascading: 폭포같은, 계속되는, 연속적인
style: 멋을 내다
Sheet: (종이나 문서)한 장
-> 연속적으로 스타일을 정의하는 문서
css코드는 다수의 '스타일 선언문'으로 구성된다
선택자{
속성명: 속성값;
}
css 주석: /*주석의 내용*/
html 주석: <!-- -->
*css3: 최신 웹 표준 버전*
css는 독립적으로 존재하면 하나의 텍스트 문서에 불과할 뿐
html문서에 css 적용하는 방식
- 인라인 스타일: 태그에 직접 기술하기-되도록 사용 자제 <p>안에 직접 작성
- 스타일 태그: 스타일시트를 위한 태그를 추가하여 기술하기 <style></style>
- 문서 간의 연결: 스타일시트 문서를 따로 작성하여 html 문서와 연결하기 .css인 스타일시트 생성 후 <link>
*인라인 스타일이 우선적으로 적용되고 스타일 태그의 경우 나중에 쓰여진 것이 먼저 적용
<body>
<!--첫 번째-->
<p style="color: red; opacity: 1;">스타일 적용 실험</p>
<!--두 번째-->
<p>스타일 적용 실험</p>
<!--인라인 스타일 우선적으로 적용한다-->
<style>
p{
color: orange;
}
</style>
<!--세 번째-->
<link href="css문서 사용하기.css" rel="stylesheet">
</body>
.세 번째 방법 : css파일을 VScode 같은 파일에 넣고 호출하는 rel 사용하면 됨
선택자 유형별 의미와 사용 기호
나중에 선택되는 것이 먼저이기는 하지만 아이디,클래스, 태그 간에는 우선순위가 존재한다
<title>Document</title>
<style>
*{/**은 전체선택*/
color:red;
}
/* 선택자 우선순위
1. 아이디 선택자
2. 클래스 선택자
3. 태그 선택자
*/
li{
color: blue;
}
li.hiphop{
color: orange;
}
#belly{
color: green;
}
h2,p,li{
color: yellow;
}
/*그룹 선택자: 한 번에 선택한다는 의미*/
</style>
</head>
<body>
<h2>춤의 장르</h2>
<p>무척 다양한 장르가 존재합니다</p>
<ul>
<li class="hiphop"> 비보잉</li>
<li class="hiphop"> 팝핀</li>
<li id="belly"> 벨리</li>
</ul>
</body>
</html>
그룹 선택자와 전체 선택자 *의 차이는?
박스 모델
너비와 높이를 가지는 개별 요소를 박스라고 하고 박스를 네가지 세부 영역으로 나누어 구분한 디자인 모델
콘텐츠 영역 width, height
안쪽 여백 padding
경계선(테두리) border
바깥쪽 여백 margin
*개발자 도구를 이용하면 박스 모델도 확인할 수 있다
.area{
/*%: 내가 속한 영역을 기준으로 백분율 계산
-> 내가 속한 영역에 관련 값이 있어야 함
width는 %지정 가능하지만 height는 불가능*/
width: 200px;
height: 300px;
}
</style>
area는 앞서 정해놓은 class의 이름
border-radius 속성 사용하면 모서리를 둥글게 만들 수 있음(반경에 해당하는 길이 정해줘야 함)
.red{
border-width: 2px;
border-style: solid;
border-color: red;
}
.green{
border: 3px solid green;
border-radius: 5px 20px 10px 2px;
/*각각 지정 가능함*/
}
padding 속성을 사용하면 기존에 설정한 width,height보다 요소가 기존보다 더 커지게 됨
-> box-sizing 속성 사용 가능
div{
width: 200px;
height: 200px;
border: 1px solid black;
margin: 10px;
/*
top bottom left right
*/
padding-top: 20px;
padding-right: 50px;
box-sizing: content-box;
/*width와 height가 boder의 크기를 양보하는 것*/
}
margin 4개 따로 설정 가능함
박스에 배경 추가하기
div{
width: 200px;
height: 200px;
padding:20px;
border: 20px double green;
background-color: yellowgreen;
background-clip: padding-box;
background-image: url(dog.jpg);
background-size: 100px 100px;
background-repeat: no-repeat;
background-origin: content-box;
background-position: right top;
}
color을 지정하는 다양한 방법
rgb(값1, 값2, 값3)
raba(값1, 값2, 값3, 값4)-네번째 값은 투명도
hsl-색조(hue),채도(saturation),조도(lightness) 지정해 색상 결정하는 함수
16진수 값 사용: #RRGGBB #RRGGBBAA
<style>
p#one{
color: rgb(100%,0%,50%)
}
p#two{
color: rgba(100%,0%,100%,0.5)
}
p#three{
color: hsl(300, 100%, 80%,0.3)
}
p#four{
color: #FF00FF99;
}
</style>
opacity: 투명도 나타낼 수 있음
글꼴
여러개 글꼴을 써놓고 지원되는 글꼴 사용할 수 있게 도와줌
웹 폰트: 웹 서버로부터 제공받아 사용할 수 있는 웹 전용 글꼴
rem: 루트 요소(html 태그)의 글자 크기를 배수로 계산해 적용하는 상대 단위
em : 부모 요소의 글자 크기를 배수로 계산해 적용하는 상대 단위
구글 폰트 사이트 들어가서 자유롭게 선택 후 사용 가능함
*{
font-family: 'Nanum Gothic', monospace;
}
html{
font-size: 32px;
}
body{
font-size:20px;
}
#one{
font-size: 32px;
font-weight: 100;
/*100~900*/
line-height: 50px;
/*줄 간격*/
text-align: center;
}
