CSS란?
웹페이지를 보기좋게 만들기 위해 만들어진 언어
웹페이지에 CSS를 적용하는 2가지 방법
- 아래와 같이 style태그를 작성하고 내부에 css를 작성한다.
<style>
a{
color:black;
}
</style>- 스타일속성을 사용한다.
<a href=“index.html” style=“color:red”>
Selector (선택자)
Declaration(선언, 효과)
Property(속성)
value(값)
Property(속성)
<li><a href=“index.html” class=“saw”>web</a></li>
<li><a href=“index.html” class=“saw active”>css</a></li>-> class 속성의 값은 여러개의 값이 들어갈수 있고 띄어쓰기로 구분한다.
-> 1개의 태그에는 여러개의 속성이 들어갈수 있고, 여러개의 선택자를 통해서 하나의 태그를 공동으로 제어할수 있다.
영향력 순서
- TAG < class선택자 < id선택자
- 제일 최근의 명령이 더 큰 영향력
- id의 값은 한번만 사용
- 포괄적인 것보다 구체적인것이 우선순위가 높음
속성의 종류
text-decoration: none; 웹페이지 a 태그 밑줄 없애줌
;(세미콜론) 하나의 description이 끝나고 시작하는것을 구분
font- size: 45px; 폰트사이즈 45픽셀로
text-align:center; 텍스트정렬 가운데로
color:black; 텍스트색상 블랙으로
박스모델
block element : 화면 전체를 쓰는 태그
ex) h1
inline element : 자신의 크기만큼 갖는 태그
ex) a
h1태그를 자신의 크기만큼 갖게 하려면?
h1{
display:inline;
}a태그를 화면전체를 쓰게 하려면?
a{
display:block;
}border : 테두리
border - width : 테두리 두께
border - color : 테두리 컬러
border - style : 테두리의 스타일 ex) 단선인지 실선인지
padding : 콘텐츠와 테두리 사이의 여백
margin : 테두리와 테두리사이의 간격
grid
<div id=“grid”>
<div>navigation</div>
<div>article</div>
</div>#grid {
display: grid;
grid-template-columns: 1fr 2fr;
}-> fr은 화면전체가 3이라고 했을때 1:2 로 화면전체를 사용하게 자동으로 조절되는 단위
반응형 웹
수많은 형태의 화면에서 동작하는 웹
미디어쿼리
화면의 크기 확인하는 법
개발자도구 - 검사 - 오른쪽상단에 화면의 크기 표시
@media(min-width:800px) {
div{
display:none;
}
}-> 최소화면의 크기 800px
800px 보다 화면이 크면 div태그를 없앤다.
.html 파일과 .css 파일의 연결
.css의 별도의 파일을 만든다
style 태그가 있던 자리에 다음과 같이 작성하면<link rel="stylesheet" href="style.css"/>.html파일과 style.css 파일이 연결된다.
