css등장!! 아름다움에 대한 우리의 욕망 시작해보자!!
css 역할
-디자인에 최적화
-중복 제거
-html이 정보전달에만 전념할 수 있도록 도와줌
css 문법
-selector : 누구에게 효과를 줄 것인지 선택 (선택자)
(우선순위 id 선택자 > class선택자 > 태그선택자)
-delaration : 선택자에 지정될 효과 (선언,효과)
-property : 속성
-value : 값
-세미콜론 : 각 줄 구분 (효과를 지정한 다음에는 끝에 항상 세미콜론 적어주기!)
a태그의 폰트 태그를 붉은 색으로 바꾸기
<style>
a {
color: red;
}
</style>
이때
selector -> a
delaration -> color: red;
property -> color
value -> red
property(속성) 검색하는 법
(외울필요없어 무조건 기계의 도움을 받아 검색!!!!)
“css text size property”
태그 종류
1 block level element
: 화면 전체를 쓰는 태그
2 inline element
: 자기 자신의 콘텐츠 크기만큼만 쓰는 태그
(다만, display라는 속성의 기본값일 뿐 그 기본값은 css를 통해서 언제든지 바꿀 수 있다!)
태그 예시
html 문법 + css 문법
<style>
a{
color:blue;
}
.saw{
color:gray;
}
</style>속성을 이용한 css
<li><a href="2.html" style="color">
<li><a href="1.html" class="saw">A</a><li>
<li><a href="2.html" class="saw">B</a><li>폰트
h1{
font-size: 40px;
font-align: center;
color:black;
}박스모델
:html 태그 하나하나를 일종의 박스로 취급해서 그것의 부피감을 결정!!
구글 이미지 “css box model”검색
-중복내용
<style>
h1{
border-width: 5px;
border-color: blue;
border-style: solid;
}
a{
border-width: 5px;
border-color: blue;
border-style: solid;
}
</style><style>
h1, a{
border: 5px blue solid;
}
</style>-여백, 테두리 조절
<style>
h1{
border: 5px blue solid;
padding: 20px;
margin:10;
display:block;
width: 100px;
}
</style>-그리드 (grid)
:코드를 통해 정보들을 잘 배치하는, 레이아웃을 잘 짜는 방법
<style>
#grid{
border: 5px solid blue;
display: grid;
grid-template-columns: 150px 1fr;
}
div{
border: 5px solid gray;
}
</style>
<div id="grid">
<div>ABC</div>
<div>DEF</div>
</div>반응형 웹 (responsive web)
화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것!!
-미디어쿼리
:반응형 디자인을 순수한 웹을 통해서 css를 통해서 구현하는 핵심적인 개념
<style>
div{
border: 15px solid blue;
font-siz: 50px;
}
</style>
<div>
Responsive
</div>-개발자 도구를 통해 화면 크기 확인
-화면 너비 기준에 맞춰서 display 설정
<style>
@media(min-width: 600px) {
div{
display: none;
}
}
</style>-필요에 따라 min, max 설정
-테두리 삭제하고 싶으면 코드 추가
<style>
@media (max-width: 800px) {
h1{
border-bottom: none;
}
</style>css파일 생성
:똑같은 css 코드가 모든 웹페이지에서 중복되어 나타날때
<head>
<link rel=""stylesheet" href="style.css"/>
</head>->이제 누군가가 웹페이지의 모든 링크에 밑줄 넣으라고 시킬지라도 style.css파일안의 태그만 수정하면 끝임. 초.간.단.!!!
-개발자 도구의 network탭 확인
: 내부적으로 어떤 파일을 웹서버에서 다운로드 하고 있는지 확인
tip
Can I Use (https://caniuse.com)
CSS, HTML, JavaScript 기술 가운데 현재 웹 브라우저들이 얼마나 그 기술을 지원하는지에 대한 통계 서비스 제공
