CSS 7 - CSS 선택자의 기본
<style>
a {
color:black;
text-decoration: none;
}
.saw {
color:gray;
}
.active {
color:red;
}
h1 {
font-size:45px;
text-align: center;
}
</style>class="saw" 태그를 만듦, 이것은 html에 속한다.
class에는 여러가지 속성이 들어올 수 있고 이는 띄어쓰기로 구분한다.
여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.
보다 가까이에 있는 명령이 더 큰 영향력을 갖는다. (권력이 같다면)
<a class="saw">HELLO</a>
<a class="saw" id="active">HI</a>#active{
color : red;
}ID가 class보다 훨씬 우선순위가 높은 태그이므로, 위 style 내의 태그 순서가 바뀌든 안바뀌든
항상 1순위로 빨강색을 유지한다.
권력은 태그 <클래스< 아이디 순이다. (구체적인것을 포괄적인 것보다 우선순위를 높였다. 그것이 더 효율적이기 때문이다.)
ID의 핵심은 중복되서는 안된다는, 유일무이한 값이라는 것이다.
이제 선택자의 기본을 알았으니, Selector로 검색할 수 있다.
CSS 8. 박스 모델
솔직히 조금 여기서부터 어려워졌다고 생각했다. 하지만 지금이 벌써 세번째 복습이기 때문에
이해될 것이라 생각한다!
1) box.html이라는 새로운 파일을 하나 만들었다.
<body>
<h1>CSS</h1>CSS is amazing tool(<a href="www.naver.com">click</a>) don't hate me!
</body>2) 근데 여기서 보면, h1태그와 a태그는 둘다 똑같은 태그임에도 불구하고 부피면에서 차이가 난다. 얼마나 크기 차이가 나는건지, 왜 나는 건지 알아보기 위해, 우리는 투명인간에게 페인트를 뿌려버리듯 border 태그를 이용해볼 수 있다.
<style>
/*
block level element
*/
h1{
border-width:5px;
border-color:red;
border-style:solid;
}
/*
inline element
*/
a{
border-width:5px;
border-color:red;
border-style:solid;
}
</style>편의성에 따라 달라진다. 하지만 display를 이용하면 block을 inline으로, 그 반대도 마찬가지로 쉽게 가능하다.
위의 코드를 중복을 없애고 깔끔하게 정리하면 아래와 같다.
<style>
h1,a{
border: 5px solid red;
}
</style>이제 실제 박스 모델에 대해 이야기해보겠다.
<style>
h1,a{
border: 5px solid red;
padding: 20px;
margin:20px;
display:block;
width:100px;
}
</style>개념이 헷갈리는거, 그냥 검색하면 잘 나온다. 개발자도구를 통해 확인이 가능하다.
CSS 9. 박스 모델 써먹기
웹페이지를 잘 꾸며보자. 제목 밑에 얇은 검은색 구분선 하나를 넣고싶다.
<style>
h1{
border-bottom : 1px solid gray;
}
</style> 근데 너무 가까운 것 같다? 하면은 개발자 도구 키고 이용. 무슨 값 때문에 이렇게 가까운지 확인하며
수정해나가기. 마진 값을 없애든, 페들링 값을 키우든. 그렇게!
세로줄을 하나 긋고싶다. 줄을 누가 가지고있는지 판단부터 한다.
<ol>
<li><a href="1.html" class="saw">HTML</a><li>
<li><a href="1.html" class="saw">HTML</a><li>
<li><a href="1.html" class="saw">HTML</a><li>
</ol>이런식으로 가지고 있다면, 바로 줄긋기를 실천한다
<style>
ol{
border-right: 1px solid gray;
}
</style>
근데 이렇게 하면 ol이 화면 전체를 차지하는 태그이기 때문에, 이걸 줄여줘야 한다!!!!
<style>
ol{
border-right: 1px solid gray;
width :100px;
}
</style>
이렇게 width를 줄여줌으로써 세로줄 긋기를 실현할 수 있다!
