생활코딩 WEB2 -css
공부 필기
a 항목 전체 색상 변경
<style>
a{color:red;}
</style>
a {} = 선택자 selector
color:red; = 선언 declaration
html 의 속성으로 style태그는 css의 효과를 불러온다
웹페이지에 css 삽입하는 방법
1. 스타일태그를 쓴다
2. 스타일 속성을 쓴다.
Selector 선택자 a 에 어떤 효과를 줄 것인가
property 속성 :color
value 값 : red
효과의 토대
<style>
a{color:black;
text-decoration: none;}
h1{font-size: 45px; text-align: center;}
</style>
선택자의 토대
더 가까운 선택자가 더 큰 영향력을 갖는다
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw active">CSS</a></li>
class는 띄어쓰기로 여러 선택자 설정 가능
더 우선순위가 높은 id 선택자를 사용한다.
선택자 우선 : id > class > tag 선택자
id의 값은 단 한번만 등장해야 한다. = 중복되면 안됨
검색어= css selector
박스 만들기
왜 a 태그는줄바꿈이 없는데 h1은 자동으로 줄바꿈을 할까? -> h제목태그는 화면 전체 쓰는 것이 편하기 때문에 기본 세팅임.<br>
h1태그는 border도 화면 전체를 쓴다. a 태그는 전체 x 자기 크기만큼만 쓴다.<br>
화면 전체를 쓰는 태그들 block level element라고 씀 <br>
자기 크기만큼 쓰는 태그들 inline element라고 씀 <br>
display: inline 자기영역 / block 전체 /none 안보이도록
border-width: 5px;
border-color: red;
border-style: solid; -> 동일하다 border:5px solid red
박스 실습
<style>
a{color:black;
text-decoration: none;}
h1{font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
margin:0;
padding:20px;
}
ol{border-right: 1px solid grey;
width: 100px;
margin:0;
padding:20px;
}
body{margin:0;}
#active{color:red}
.saw{color:grey}
</style>
박스 실습2 - 그리드 grid사용
나란히 배치하기 위한 방법은?
<div> 사용 <- 아무 의미 없고 그냥 디자인을 위해서 설정하는 태그 <- 블럭 레벨 element 라서 줄바꿈 자동
<span> div 와 같지만 inline element
<style>
div{
border: 5px solid grey;
}
#grid{
border: pink 5px solid;
display: grid;
grid-template-columns: 150px 1fr;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
2fr -> 2분의 1 해서 동일하게 유지한다
https://caniuse.com/?search=grid.
-> css, html, javascript 등 내가 해당 기술을 써도 되는지 궁금할때 caniuse.com에 검색!!
박스 실습3 - 그리드 grid 사용 2
<style>
a{color:black;
text-decoration: none;}
h1{font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
margin:0;
padding:20px;
}
ol{border-right: 1px solid grey;
width: 100px;
margin:0;
padding-left:20px;
}
body{margin:0;}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ol{
padding-left: 33px;
}
#grid #ARTICLE{
padding-left: 25px;
}
</style>
반응형 디자인 - 미디어 쿼리 소개
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 5px solid green;
font-size: 60px;
}
@media(max-width:800px){
div{display:none;}
}
</style>
</head>
div 안의 글자를 화면크기가 800px보다 작으면 display를 none으로 만든다 .
반응형 디자인2 - 미디어 쿼리 써먹기
#grid #ARTICLE{
padding-left: 25px;
}
@media(max-width:800px){
#grid{
display: block;
}
ol{border-right: none;}
h1{
border-bottom: none;
}
}
반복 줄이기
style.css를 저장하고
<link rel="stylesheet" href="style.css">
를 통해서 각 파일에 <style>을 대체하면 한 번에 적용, 수정 가능
마지막 실습 정리영상
https://www.youtube.com/watch?v=wcrgIwzerks&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=16
진짜 갓-벽한 강의라는것을 실감하면서 듣는중...
생활코딩님.. 감사합니다 ㅜㅜ
