JE의 끄적끄적

[CSS]CSS 기초

2020. 1. 23. 16:00

HTML은 웹 문서의 내용을 맡고, CSS는 웹 문서의 디자인을 담당한다.

: <head>태그과 </head> 태그 안에서 정의해야 하고 <style>태그와 </style> 태그 사이에 작성한다.

: 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용하는 것

<link href="외부 스타일 파일 경로" rel="stylesheet" type="text/css">

: 간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시한다.

ex)
<p style="color:blue;"> 인라인 스타일 </p>

* { 속성 : 속성 값; 속성 : 속성 값; ... }

ex) 
* {
	margin: 0;
    padding : 0;
}

태그 { 스타일 }

ex)

p {
	font-size:small; // 글자 크기
    font-weight:blod; // 글자 모양
}

.클래스명 { 스타일 }

ex)
.bluetext{
	color : blue;
}

...

<p class="bluetext"> 클래스 선택자 </p>

※ 클래스 선택자와 비슷하지만 id 선택자는 딱 한번만 쓸 수 있다.

#아이디명 { 스타일 }

ex)
#container {
	width : 400px;
    height : 200px;
    margin : 0 auto;
}

...

<div id="container"> id 선택자 </div>

이름, 이름 .. { 스타일 }

 ex)
 h1, h2 {
 	text-align:center;
 }

: 캐스캐이딩이란 '위에서 아래로 흐르는 스타일 시트'라는 뜻으로, 선택자에 적용된 많은 스타일 중에 어떤 스타일을 나타낼지를 결정함을 뜻한다.

1. 스타일 우선 순위

- (명시도) 인라인 스타일 > id스타일 > 클래스 스타일 > 태그 스타일

- (Source Order) 같은 스타일의 경우, 소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어쓴다.

2. 스타일 상속

스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.

※ 스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아니다.

width, height : 박스 모델의 너비와 높이
- 속성을 auto 로 설정 시 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동의로 결정됨
display : 화면에서 요소가 어떻게 보일지를 결정하는 속성
- display : flex : 가로 정렬
border : 박스 모델의 테두리 - style, width, color, radius, shadow
margin : 박스 모델의 마진(요소와 요소 사이의 여백)
padding : 박스 모델의 패딩(테두리와 내용 사이의 여백)
border-radius : 박스 모델의 모서리를 둥글게 처리

float : 왼쪽이나 오른쪽에 배치
- 문서 구조 만들기 - header, sidebar, contents, footer ...
clear : float 속성 해제
positon : 배치 방법 지정
- fixed 속성 값 : 브라우저 창 기준으로 배치하기 ex) top 버튼 : 스크롤하더라도 정해진 위치에 계속 고정
visibility : 요소를 화면에 표시하거나 감추기
- ex) 팝업창 삭제 시 visible에서 hidden으로 변경하기
z-index : 요소의 쌓는 순서 결정
column : 다단 편집
- 속성 : width(단의 너비), count(단의 개수), gap(단과 단 사이 여백), rule(구분선의 색상, 스타일, 너비), break-after(다단 위치 지정), column-span(여러 단을 하나로 합치기)
border-collapse : 테두리 합치기
table-layout : 콘텐츠에 맞게 셀 너비 지정
vertical-align : 셀 안에서 수직 정렬