# CSS

 

CSS 관련 내용 올립니다.(계속 추가할 예정)

---

CSS

: 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어

1. Html style tag – selector and declaration

<style>
	tag1, tag2 {
    	color:red;
    	text-decoration: none;
    }
</style>

 

 

2. Style attribute

style="color:black; text-decoration: underline;"

 

 

property

HTML class 접근 – 순서대로 적용	.CLASSNAME{}
HTML id 접근 – 중복 불가	#IDNAME{}
HTML 모든 components	*
Comments	/* */
scroll behaviour	scroll-behavior: smooth
size – width	width: LENGTH
size – height	Height: LENGTH
background – 색상	background-color: COLOR
text – 색상	color: COLOR
text – 밑줄	text-decoration: none/underline
text – 정렬	text-align: center/right/left/justify …
font – 크기	font-size: SIZE
font – 두께	font-weight: normal/bold/lighter …
line – 줄 높이	line-height: VALUE
border – 테두리	border: WIDTH STYLE COLOR
border-top	border-top: WIDTH STYLE COLOR
border-bottom	border-bottom: WIDTH STYLE COLOR
border-left	border-left: WIDTH STYLE COLOR
border-right	border-right: WIDTH STYLE COLOR
border – 크기	border-width: medium/thin/thick …
border – 색상	border-color: COLOR
border – 스타일	border-style: none/dotted/solid …
outline	outline:
box-sizing – box 크기 기준	box-sizing: content-box/border-box …
display – 구역 설정	display: inline/block/flex …
flex-direction – 아이템 주축 방향	flex-direction: row/column …
align-items – 아이템 위치, 수직	align-items: stretch/center …
justify-items – 아이템 위치, 수평	justify-items: stretch/center …
place-items – align/justify 단축	place-items: center stretch …
justify-content – container 내 space	justify-content: start/center …
padding	padding: LENGTH
padding-left	padding-left: LENGTH
padding-right	padding-right: LENGTH
padding-bottom	padding-bottom: LENGTH
padding-top	padding-top: LENGTH
margin	margin: LENGTH
grid – grid 내 column	grid-template-columns: LENGTH1 LENGTH2(fr)
list-style	list-style:
list-style-type	list-style-type:TYPE
list-style-position	list-style-position: outside/inside
list-style-image	list-style-image: none/url
transition – 요소 변하는 효과
transition – 대상	transition-property: all/none …
transition – 시간	transition-duration: VALUE
transition - 수치함수	transition-timing-function: ease/linear …
object 크기(img/video…)	object-fit: fill/cover …
object 정렬 방식	object-position: center top …
overflow – 서식 초과	overflow: hidden/visible …
gap – 행과 열 사이 간격	gap: VALUE
cursor – 모양	cursor: help/wait …
media	@media(CONDITION){}

 

---

Reference

 

https://www.w3schools.com/cssref/default.asp

https://opentutorials.org/course/3086