💡 CSS란?
CSS는 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소이다.
CSS는 색상이나 크기, 이미지 크기나 위치, 배치방법 등 웹 문서의 디자인적 요소를 담당한다
CSS는 HTML로부터 디자인적 요소를 분리해 정의할 수 있음
📌 css 적용방법
✔️ 내부 스타일 시트
html 파일에 스타일을 기술하는 방법
<.head></head.>태그 사이에 style 태그로 작성한다.
한 파일에 있어서 작업이 쉽지만 css의 재활용이 안되기때문에 특별한 경우가 아니면 쓰이지 않음.
✔️ 외부 스타일 시트
css를 작성하는 가장 기본적인 방법이다.
별도의 파일에 css문서를 작성하고 해당 css를 html문서에 불러와서 사용하는 형식이다.
✔️ 인라인 스타일
html태그에 필요한 속성을 직접 작성하는 형식이다.
디자인을 바로 적용할 수 있다는 편리함이 있지만, 일관된 디자인 체계를 유지하는데 방해가 됨으로
특별한 경우가 아니면 사용하지 않도록 하자.
📌 선택자란?
CSS의 선택자는 HTML 요소를 스타일링하기위해 사용되는 방법이다.
여러가지 선택자가 있으며, 특정 HTML 요소를 선택하는데 도움을 준다.
2-1) 요소 선택자
p{
/*스타일 정의*/
}'p'선택자는 모든 <.p>요소를 선택한다
2-2) 클래스 선택자
.example {
/*스타일 정의*/
}.example 선택자는 class = example 속성의 가진 모든 요소를 선택한다
2-3) 아이디 선택자
#header {
/*스타일 정의*/
}
#header 선택자는 id=header 속성을 가진 요소를 선택한다.
하나의 문서에서 각 아이디는 고유해야한다.
2-4) 자손 선택자
.container ul {
/*스타일 정의*/
}
.container ul 선택자는 .container 클래스 내에 있는 모든 <.ul>요소를 선택한다.
2-5) 가상 클래스 선택자
a:hover {
/*스타일 정의*/
}
:hover 가상 클래스는 마우스가 요소 위에 있을때 상태를 선택한다.
2-6) 속성 선택자
input[type="text"] {
/*스타일 정의*/
}input[type="text"]선택자는 type 속성이 text인 모든 <.input> 요소를 선택한다
📌 CSS 속성이란?
3-1) color 속성
color: red;텍스트의 색상을 지정한다.
3-2) font-size 속성
font-size: 16px;글꼴의 크기를 지정한다.
3-3) font-family 속성
font-family: 'Arial', sans-serif;글꼴의 종류를 지정한다.
3-4) background-color 속성
background-color: #f0f0f0;요소의 배경색을 지정한다.
3-5) padding 속성
padding: 10px;요소의 안쪽 여백을 지정한다.
3-6) margin 속성
margin: 20px;요소의 바깥쪽 여백을 지정한다.
3-7) border 속성
border: 1px solid #ccc;요소의 테두리를 지정한다
3-8) width, height 속성
width: 300px;
height: 200px;요소의 너비(width), 높이(height)를 지정한다
3-9) text-align 속성
text-align: center;텍스트의 정렬 방식을 지정한다.
3-10) display 속성
display: block;요소의 표시 방법을 지정한다.(예: block, inline, flex 등).
3-11) float 속성
float: left;요소의 좌우 정렬 방식을 지정한다.
3-12) positon 속성
position: relative;요소의 위치를 지정한다 (예: static, relative, absolute, fixed 등)
