3강. CSS의 등장
<!-->
<!--
주석과 동일한 역할
-->
<style/>
style 태그 안의 내용이 css임을 알린다.
다음 코드는 모든 a 태그의 style을 빨간색으로 바꾸어라는 의미이다.
<style>
a{
color:red;
}
</style>
상단과 하단 코드를 비교해 보아도 훨씬 간결해짐을 알 수 있다. 중복된 코드를 제거할 수 있다. 이때 디자인과 관련된 코드는 <style>에 갇혀 있다.
우리는 html이 정보에 전념하는 동안 css를 통해 웹페이지를 '효율적으로' 디자인 할 수 있다.
4. css의 기본 문법
<style>태그
선택자(selector) : 효과 선택
<style>
a{
color:red;
}
</style>
style 속성
효과(declaration) : 선택자에게 줄 효과
...
<li><a
href="1.html"
style=
"color:red;
text-decoration:underline"
>CSS</a>
</li>
...=> 모두 ;(세미콜론)을 통해 구분해준다.
6. CSS 속성을 스스로 알아내기
-> 구글링 통해 "~ css" 식으로 검색. 모두 외우려 하지 않기!!!! 구글링 적극 활용할 것
7. CSS 선택자의 기본
class 속성 값은 여러개 값이 들어올 수 있고 띄어쓰기로 구분한다. 하지만 이때 saw 클래스와 active 클래스의 순서가 바뀌면 보다 가까이에 있는 명령어가 영향을 받아 saw 클래스로인해 Html롸 CSS글자 모두 회색이 된다. 따라서 이는 id로 해결 가능하다.
tag
해당 html 파일 안의 모든 <a>태그에 해당 속성을 부여한다. 하지만 모든 a 태그에 속성을 부여하므로 디자인이 전체적으로 망가질 수 있다.
a{
color:red
}
class
html의 속성으로 그룹으로 묶일 때 사용한다. 여러 태그에 동일한 효과를 넣기 위해 사용하며 style요소에서는 선언할 때 앞에 .(dot)을 붙이고 그 뒤에 클래스 명을 입력한다.
.class_1{
color:red
}
id
id는 html 파일 내에서 특정 태그를 찾기 위한 것이므로 한번밖에 쓰지 않는다.
#id_1{
color:red
}
id > class > tag 순으로 style이 적용된다! 명심해 둘 것!
8. 박스 모델
block level element
화면 전체를 사용하는 태그 (ex. <h1>) display의 기본 값일 뿐 바꿀 수 있다
display: inline 속성을 통해 수정 가능하다.
inline element
자기 자신만큼의 부피를 가지는 태그
display: block을 통해 수정 가능하다.
- 중복은 다음과 같이 수정할 수 있다.
개발자 도구를 적극적으로 활용할 것!
10. 그리드
...
<style>
...
#grid{
display:grid;
grid-template-colmns:150px 1fr
}
//grid 아이디 값의 태그 밑에 있는 ol
#grid ol{
padding-left:33px;
}
#article{
padding-left:25px
}
</style>
...
<body>
<h1><a herf="index.hyml">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html">HTML</a></li>
12. 미디어 쿼리
반응형 : 화면의 크기에 따라 디자인이 달라지게 되는 것
//screen width <800px
@media(min-width:800px){
div{
display:none;
}
}'GDSC > 웹기초' 카테고리의 다른 글
| [생활코딩] MySQL+Node.js (0) | 2021.11.30 |
|---|---|
| [생활코딩] MySQL (0) | 2021.11.23 |
| [생활코딩] JAVASCRIPT (0) | 2021.11.08 |
| [생활코딩]git (0) | 2021.11.02 |
| [생활코딩] HTML (0) | 2021.10.12 |