-
CSS 1일차 (생활코딩 WEB2)HTML/CSS 2021. 8. 30. 20:33
웹페이지를 아름답게 하는 길
1. HTML <font>
2. 어렵지만 근본적인 CSS
무시하라는 태그
<!—
—>
웹 브라우저는 HTML을 해석하여 사용하기 때문에, 코드들을 HTML로 인식함
->CSS를 쓸 거니까 이걸 CSS 문법으로 해석하라고 HTML로 알려줘야 함
-><style> </style> : 이 구간을 CSS로 해석해야 해!
<style>
a{
color:red;
}
</style>
a : 선택자(seletor)
color : property
red : value
color:red; : declaration
코딩을 잘하는 방법 : 중복을 제거하는 것
CSS를 통해 중복을 제거한다
중복 유무에 따라 여러 차이가 생긴다
돈, 가독성, 수정 보완 등 효과적
CSS 도입 이유
HTML은 너무 중요, 정보에 전념하기 위해
CSS를 통해 디자인을 하는 것이 더 효율적
<style> 외의 방법
HTML의 속성 : style=“”
밑 줄을 없애고 싶다
text-deforation : none;
‘css text size property’ 검색 : font-size
‘cee text center property’ 검색 : text-aligh:center;
모르는 건 검색하면서 하면 된다
property를 외우려고 노력하지 않아도 됨
*효과, 선택자
모든 a 태그는 검은색, 방문한 적 있는 HTML과 CSS는 회색, 현재 방문하고 있는 CSS는 빨간색
1. HTML과 CSS의 속성에서 class=“saw” 로 그룹핑을 하고
CSS에 .saw{
color:gray;
}
class=“sawactive”
.active
{
color:red;
}
가장 최근에 쓰인 코드가 적용되기 때문에
위의 방법은 좋은 방법이 아님
-> id=“active”
#active {
color:red;
}
id선택자 > class 선택자 > 링크 선택자
(#) (.) (a)
id의 값은 단 한 번만 등장해야 함. ex) 학번, 주민등록번호
좀 더 포괄적인 것의 선택자가 후 순위여야 효율적임
‘box.html’ 새로운 파일 생성, html 기본 코드 적고
<style>
선택자{
border-width:5px;
border-color:red;
border-style:solid;
}
화면 전체를 쓰는 태그
/*(주석)
block level element
*/
자기 것만 쓰는 태그
/*
inline element
*/
block 이어도 inline으로 바꿀 수 있음
display:inline;
반대의 경우
display:block;
display;none 하면 화면에서 사라짐
선택자를 콤마로 같이 쓸 수 있음
border:5px solid red;로 줄일 수 있음
'grid.html'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
border:5px solid pink;
display:grid;
grid-template-columns:150px 1fr;
}
div{
border: 5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
</html>
무색, 무취 태그 : div (block level element)
span (inline element)
기술을 얼마나 채택하고 있는가에 관한 통계
