jh.nrtv

생활코딩 WEB2-css 본문

web - HTML, CSS

생활코딩 WEB2-css

wlgus3 2022. 9. 29. 23:21

생활코딩 WEB2 -css

공부 필기

 

a 항목 전체 색상 변경 

<style>
a{color:red;}

</style>
 
 
a {} = 선택자 selector
color:red;  = 선언 declaration
 
html 의 속성으로 style태그는 css의 효과를 불러온다 

 

style="color:red"

웹페이지에 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

 

 

 

진짜 갓-벽한 강의라는것을 실감하면서 듣는중...

생활코딩님.. 감사합니다 ㅜㅜ

'web - HTML, CSS' 카테고리의 다른 글

사용자 친화 앱 - 웹 표준 , 크로스 브라우징 , SEO  (1) 2022.12.30
HTML, CSS- 계산기 목업 만들기  (0) 2022.10.31
HTML, CSS 활용 - [Codestates] Section1  (0) 2022.10.30
CSS 기초 - [Codestates] Section1  (2) 2022.10.28
HTML 기초 - [Codestates] Section1  (1) 2022.10.27
'web - HTML, CSS' Related Articles more