티스토리 뷰
[WEBn] WEB2 - CSS
생활코딩 강의를 들었던 것을 정리를 하겠습니다.
<style>
</style>
html 문법이면서 style태그 안쪽 내용은 css이니까 css언어의 문법에 맞게 처리해주라는 의미입니다.
위 사진에 있는 a, #active, .saw, h1는 선택자라고 부르고, 셀렉터입니다.
아래 자세히 설명하겠습니다.
가독성 및 유지보수에 효과적으로 증가합니다.
사진과 같이 이렇게 볼 수 있습니다.
Webpage에 CSS삽입방법은
첫 번째 style tag
두 번째 style property
있습니다.
<li><a href="2.html" title="CSS이란" style="color:red">CSS</a></li>
style이라는 속성을 쓰면 그 속성의 값을 CSS문법에 따라 해석해서 style속성에 적용을 합니다.
선택자는 필요가 없습니다.
설명을 위해 1.html과 2.html을 서로 다르게
class 하나로 묶어 보겠습니다. Grouping하는 것 입니다.
<li><a href="1.html" title="HTML이란" class="saw">HTML</a></li>
<li><a href="2.html" title="CSS이란" class="saw active">CSS</a></li>
class property에는 여러개의 value가 들어올 수 있어 띄어쓰기로 구분합니다.
이후
사진과 같이
6번 라인에서 21라인과 같이 선택자를 지정을 해줍니다.
.saw {
color: gray;
}
.active {
color: red;
}
클래스 선택자 순서에 따라 적용이 되기 때문에
.active {
color: red;
}
.saw {
color: gray;
}
위 두개의 순서를 바꾸면 색상이 변경 되지 않습니다.
똑같은 선택자일 경우 가장 마지막에 등장하는 선택자가 우선순위가 가장 높습니다.
그리하여
<style>
a {
color: black;
text-decoration: none;
}
#active {
color: red;
}
.saw {
color: gray;
}
h1 {
font-size: 45px;
text-align: center;
}
</style>
'id 선택자 > 클래스 선택자 > 태그 선택자'라고 생각 할 수 있으며
id value가 단 하나만 등장해야 하고 중복되어서는 안됩니다.
위 사진을 보게 되면 선택자들에 대해 알 수 있으며
https://www.w3schools.com/cssref/css_selectors.asp
더 많은 선택자들을 볼 수 있습니다.
박스모델
web1에서 기획서를 다시 보게 되면 이러합니다.
box.html을 하나 만들어 봅니다.
html의 기본적인 코드인
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
첫번째로 테두리에 대하여 알아보겠습니다.
26번 라인을 보게 되면 'CSS이란' h1 태그이며
27번 라인에는 <a href="주소">CSS</a> 링크가 걸려 있습니다.
이 부분을 가지고
<style>
h1{
border-width: 5px;
border-color: red;
border-style: solid;
}
a{
border-width: 5px;
border-color: red;
border-style: solid;
}
</style>
border 테두리를 설정합니다.
다음으로는
두께와 색상과 선의 종류를 설정합니다.
위 사진과 h1 태그를 보게되면
웹브라우저에서 h1은 전체를 쓰는걸 알 수 있고
a태그는 자기자신의 크기만 쓰는 걸 알 수있다.
전체를 쓰는 것들을
block level element
자기 자신의 크키만 쓰는 것들은
inline element
입니다.
반대로 위 사진과 같이 하려고 하면
<style>
h1{
border-width: 5px;
border-color: red;
border-style: solid;
display:inline;
}
a{
border-width: 5px;
border-color: red;
border-style: solid;
display:block;
}
</style>
이러한 식으로 해줄 수 있습니다.
블록을 자신의 크키만큼 쓰고 싶으면
display:inline;
써주면 되고
display:none;
안보이게 만들수도 있습니다.
중복을 최소화 하는 법은
<style>
h1, a{
border:5px solid red;
}
</style>
이런식으로 할 수 있습니다.
또한,
h1 태그는 display: block;를 생략되어 있다는 것을 알 수 있습니다.
정리
<font color="red">WEB</font>
색상 변경한다.
padding: 20px;
테두리와 내용의 간격을 준다.
margin: 0;
테두리 사이의 간격을 준다.
width:130px;
태그의 폭 크기가 변경된다.
https://www.w3schools.com/cssref/pr_border.asp
CSS box model 강의
https://opentutorials.org/course/3086/18319
'WEBn > WEB2 - CSS' 카테고리의 다른 글
| [WEBn] WEB2 - CSS - 코드의 재사용 (0) | 2018.05.02 |
|---|---|
| [WEBn] WEB2 - CSS - 반응형 디자인과 미디어 쿼리 소개 (0) | 2018.05.01 |
| [WEBn] WEB2 - CSS - 그리드 (0) | 2018.05.01 |
- Total
- Today