CSS에 대해 알아보자
CSS는 HTML이란 뼈대 위에 덮는 살이라고 생각하면 된다
CSS는 HTML과 연동되어 HTML디자인, 이미지 삽입 등으로 꾸며줄 수 있다
HTML 문서 안 <head>에서 <style> 태그로 내부 스타일시트를 통한 디자인도 가능하지만
일정 단계로 올라가면 CSS파일을 따로 만들어 외부 스타일시트로 HTML과 연결시킨다
그 형태는
<head>
<meta charset="utf-8">
<title>나의 CSS 실험</title>
<link rel="stylesheet" href="styles.css">
</head>
이렇게 <head>안에 <link>안 href에 css를 연결 시킨다
가장 안좋은 방법은 인라인 스타일시트로 절대 써서는 안된다
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">헬로우 월드!</h1>
<p style="color:red;">이것은 나의 첫 번째 CSS 예제입니다</p>
</body>(인라인 스타일시트의 예시)
CSS의 구조
CSS를 생성하면 HTML과 다르게 기본적인 내용이 들어가 있지 않다
CSS의 구조는 다음과 같다
h1 {
color: red;
font-size: 5em;
}
h1이라는 태그 뒤에 { 중괄호 열기가 이어지고
{ }안에 color라는 속성과 : 콜론이 이어지고
red라는 속성 값과 ; 세미콜론이 이어지고 } 중괄호 닫기로 끝이난다
CSS의 특징과 선택자
주석
CSS 의 주석은 ' /* ' 로 시작하고 ' */ ' 끝난다
클래스 선택자
<head>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<h2 class="blue">blue, .클래스 선택자</h2>
</body>위와 같이 예시로 <h2 라는 태그 안에 class = " " 의 형태로 클래스를 지정한다
그리고 <style>태그 안에 .클래스이름 형태로 . 을 찍고 클래스의 이름을 적으면 클래스 선택자 할당이 끝난다
아이디 선택자
<head>
<style>
#green {
color: green;
}
</style>
</head>
<body>
<h3 id="green">green, #아이디 선택자</h3>
</body>
위와 같이 예시로 <h3 라는 태그 안에 id = " " 의 형태로 아이디를 지정한다
그리고 <style>태그 안에 #아이디이름 형태로 #을 찍고 아이디의 이름을 적으면 아이디 선택자 할당이 끝난다
클래스와 아이디의 차이
하나의 문서에 여러번 쓸수 있다. 고유값이 아니다
복합 선택자
자손 선택자
모든 자손들이 선택됨.
아래의 경우, section 태그 안에 있는 모든 ul 태그에 속성이 적용됨.
section ul {
margin: 10px 0;}
자식 선택자
지정된 자식에게만 속성이 적용됨
section > ul > li {
font-size: 20px;
font-weight: bold;
}
형제 선택자
a + ul : 같은 부모 내, a의 형제 요소 중 바로 뒤 (다음)의 ul에 적용
a ~ ul : a의 형제 요소 중, a 뒤에 오는 모든 ul에 적용
a + ul {
background-color: gold;}
a ~ ul {
border: 1px solid darkgray;}
속성 선택자
class 속성을 가진 ul 태그 중, li 라는 자손 모두에 적용
target 속성을 가지며, 그 값이 _self인 a태그에 적용
ul[class] li {
width: 24%;
height: 50px;
display: inline-block;
}
a[target="_self"] {
border: 1px solid darkgray;
border-radius: 5px;
background-color: white;
padding: 5px;
}
CSS 디자인 종류
크기
콘텐츠 영역
| width, height | 콘텐츠 영역의 크기를 다루는 속성 |
| 단위 : px, em, %(가변), auto(기본값) |
박스 전체
| box-sizing |
box-sizing: border-box를 추가하면 된다. | ||
| border-box | 테두리까지 포함 | ||
| content-box | 기본값 | ||
여백
가장 많이 쓰는 요소가 아닐까 싶다
margin은 요소 간
padding은 테두리와 콘첸츠 사이
테두리의 지정 순서도 있는데 top - right - bottom - left 순서이다
기타 많이 있는데 내 능력상 여기가 한계인듯 싶고
그래서 다른 우수한 코딩 고수님들의 사이트를 참조해야 한다고 본다
CSS 알기 쉽게 설명 해주시는 고수님 추천
https://studiomeal.com/archives/197 <- 영상이 아닌 글로 쓰기에 이정도로 잘 정리할 수 있나 싶다
그럼 코린이는 이만 ..
