[css]css속성

css 기본구문

선택자 {속성: 속성값;}

​

1. 태그선택자 h1

2. 아이디 선택자 #title

3. 클래스 선택자 .left

​

ex)

<h1 id="title" class="left"></h1>

​

text속성
color	글자색상	색상명 red, green, yellow, 16진수 #000000~#ffffff, 컬러함수 rgb(r, g, b) 0~255, rgba(r, g, b, a) 0~1
font-size	글자 크기	단위: px / 기본 14px
line-height	줄높이	20px, 1.6
font-weight	글자 두껍게	normal / bold 100~300 가늘게 400~600 중간 그뒤는 두껍게
letter-spacing	글자와 글자사이 간격	px
text-decoration	글자 꾸미기	underline(아래라인) none line-through(취소선)
text- indent	들여쓰기 (첫줄 칸 비워줌)	px
text-align	정렬	left / center / right inline / text 중앙배치
text-shadow	글자 그림자	x-offset, y-offset, blur, color ex) h1 {text-shadow: 2px 2px 5px red;}
background	배경색	색상명/ 16진수 / 컬러함수 rgb(r,g,b), rgba(r,g,b,a) background - color 배경색 ​ background - image 배경이미지 ex)background-image: url('이미지경로') 그라디언트 ex) background-image:    linear-gradient(to right, rgba(0, 0, 0, 0),  rgba(0, 0,0, 1)); 그라디언트 + 이미지 background-image:    linear-gradient(to right, rgba(0, 0, 0, 0),  rgba(0, 0, 0, 1)), url('./bg.png'); ​ background - repeat 배경이미지 반복 no-repeat / repeat-x / repeat-y ​ background - position 배경이미지 위치 (left right center top bottom center x y) ​ ex) background-position: left top ex) background-position: 100px 200px ex) background-size 배경이미지 크기 ex) background-size: 200px 300px; ​ cover: 지정한 요소를 다 덮도록 배경이미지를 확대/축소(가득차게) ​ contain: 지정한 요소 안에 배경이미지가 다 나타나도록 배경이미지를 확대/축소(이미지가 잘리지 않는 선에서 최대 크기) ​ 크기값: 너비값과 높이 값을 지정 ex)background-size: cover; ex)background-size: cotain; ex)background-size: 200px auto; ​ background-attachment fixed(이미지 고정)

​

box Model
width	너비	px, %
height	높이	px, %
padding	안쪽 여백	padding: 10px 20px 30px 40px (시계방향: 12, 3, 6, 9) padding-left/padding-right/padding-bottom/padding-top
margin	바깥쪽 여백	margin: 10px 20px 30px 40px margin-left/margin-right/margin-bottom/margin-top margin: 0 auto; 좌우 센터 맞춤 block요소 중앙배치
border	테두리	border-width: 1px border-style: solid border-color: red border: 1px solid red; 모든방향 border-right: 1px solid red; border-left: 2px solid blue; border-bottom: 1px #ccc; border-top: 1px solid #ccc;
border-radius	모서리 둥글게	border-radius: 15px; 사각박스 둥글게 만들고 싶을때는 width, height 정사각형일 border-radius: 50%; 알약형태  border-radius: 9999px;
flaot	단어는 원래 ‘뜨다’ 라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다.	inherit: 부모 요소에서 상속 left: 왼쪽에 부유하는 블록 박스를 생성. right: 오른쪽에 부유하는 블록 박스를 생성. none - 요소를 부유시키지 않음
display	inline, block, inline-block	none: 공간을 차지하지 않고 화면에 나타나지 않음 inline: 크기를 지정할 수 없고 가로로 배치 block: 크기 지정하며 세로배치(한 행을 차지함) inline-block: 크기를 지정할 수 있으며 가로 배치
opacity	불투명도	0 ~ 1
box-shadow	박스 그림자	x-position  y-position  blur  spread  color 10px 15px 20px 5px rgba(0, 0, 0, 0);
box-sizing	박스의 크기를 어떤것을 기준으로 계산 할지를 정하는 속	content-box : 콘텐트 영역을 기준으로 크기를 정합니다. border-box : 테두리를 기준으로 크기를 정합니다. * initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다.
*inline-block으로 배치를 할 경우 이미지로 배치로 예시 이미지와 이미지 사이에 제거되지 않는 마진(여백)이 생김!!!!!!! 해결방법 > 부모요소를 선택한 후 font-size:0설정 자식에는 font-size 줌(안줄경우 글자 사라짐) ​ 다른방법은 마진값을 음수로 주면됨(완전 없어지지는 않음)
overflow	요소의 콘텐츠(이미지 등등) 너무커서 요소의 블록 서식에 맥락에 맞출 수 없을 때 사	overflow: hidden 요소 공간에 벗어나는 것을 가려줌 visible: 기본값 벗어나도 보임 scroll: 항상 스크롤바로 내려서 볼수있음 (x, y 로 따로 지정 가능 overflow-x 속성, overflow-y 속성) auto: 넘치면 자동으로 스크롤 만들어줌
white-space	가로폭을 넘어가더라도 자동으로 줄바꿈이 일어나게 하고 싶지 않은 경우	white-space: nowrap;
position	html요소의 위치를 결정하는 방식을 설정	위치를 결정하는 방식 1. static 정적위치 - default 기준 2. relative 상대위치 (상대 box 기준) 3. absolute 절대위치 (윈도우 기준) 4.fixed 고정 위치 ​ 같이 따라 붙는 속성들 top속성 left속성 right속성 bottom속성
transform	html 요소의 모양 크기 위치 등을 변경	1. 선택요소를 움직임 translate(x,y)/ translateX(x) / translateY(y) / translateZ(z) 2. 선택요소 회전 rotate(zdeg) / rotateX(xdeg) / rotateY(ydeg) 3. 선택요소의 크기변경 scale(x,y)/scaleX(x)/scaleY(y) 4. 선택요소의 기울이기 변경 skewX(xdeg) / skewY(ydeg) (사각형이 사다리꼴,마름모처럼 45도 기울여짐)
transition	속성의 값을 변경할 경우 확 바뀌는것이 아닌 자연스럽게 변경되게끔 하는것을 도와주는 것 ​	transition-duration 스타일 전환효과 진행시간 transition-delay 스타일 전환 효과 지연 시간 transition-property 스타일 전환 효과 속성을 그 요소에 지정 transition-timing-function 스타일 전환 효과 속도
ex) div { position: absolute; left: 0; top: 0; transition-property: left; transition-duration: 0.5s; transition: left 0.5s; }
animation	애니메이션 장면을 만듬( 다시 정리 필요)	ex) @keyframes widthCh(이름){ 0%또는 from{     width: 0;   } 100%또는 to{     width: 500px;   } } ​ div { animation-name: widthCh; animation-durarion: 1s; animation-delay: 1s; animation-iteration-count: 5; infinite}

​

input::placeholder

<input name="username" placeholder="Email 또는 전화번호"> 에 있는 placeholder 속성 css 변경 가능

 

가상 클래스/요소
css:hover	마우스 올린 태그나 속성등을 선택했을 때 색변화, 확대 등등 변하는 효과를
css:active	클릭한 상태일 때
css:visited	방문한적이 있는 링크일 때
css:focus	포커싱 됐을 때
css::before	요소 콘텐츠 시작부분에 생성된 콘텐츠를 추가	항상 따라붙음 content: ""; ::before와 ::after와 꼭 함께 쓰이는 ‘content’는 ‘가짜’ 속성입니다. HTML 문서에 정보로 포함되지 않은 요소를 CSS에서 새롭게 생성시켜주기 때 display: block; clear:both(float 기능 사용할경우)
css::after	요소의 콘텐츠에 끝부분에 생성된 콘텐츠 추가

​참고 ​

*웹폰트/ 웹아이콘 사용

(구글에 구글웹폰트 검색 - 눈누웹폰트 https://noonnu.cc/)

​

아이콘 레퍼런스:

(w3shcool 웹아이콘 https://www.w3schools.com/icons/google_icons_communication.asp)

구글아이콘 적용 <head>아이콘</head>

​

2)아이콘 사용하기

클래스명 material-icons

<i class="meterial-icons">설명</i>

​

3)아이콘 모양지정

설명글 지정

​

html 문서에 스타일 적용하기

1)내부 스타일 시트

<style> 태그 안에 작성

​

2) 외부 스타일 시트

css파일 따로 작성 style.css

<link>태그로 불러오기

​

ex)

<link href="style.css">

 

​

3)인라인 스타일

태그안에 style속성

<div style="속성: 속성값;"></div>

​

*css에서 외부스타일 파일 불러오기

@import url("파일경로")

​

https://lipsum.com/

​

css 초기설정(리셋) 참고 사이트

https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

 

color 참고 사이트

https://htmlcolorcodes.com/

HTML Color Codes

 

https://colorhunt.co/

Color Palettes for Designers and Artists - Color Hunt

 

그라데이션

https://webgradients.com/

Free Gradients Collection by itmeo.com

 

 

추가

케스케이드(cascade)

 

계단식 형태
여러 css 규칙이 적용될때 순서에 맞게 적용된다

 

우선순위

1. !important 라고 지정된 요소가 가장 우선순위가 높음

2. 인라인 스타일이 두 번째 우선순위 (ex. <h1 style="font-size : 50px;">태그안에 스타일</h1>)

3. ID 선택자

4. 클래스 선택자, 속성 선택자, 가상 클래스

5. 요소 즉 html 태그 선택자(ex. p , div 등등), pseudo-element(ex. :before, after 등등)

 

넘버링 시스템 

• P: 0 * 100 + 0 * 10 + 1 = 1점
• .header: 0 * 100 + 1 * 10 + 0 = 10점
• #header : 1 * 100 + 0 * 10 + 0 = 100점
• #header .header : 1 * 100 + 1 * 10 + 0 = 110점

참고 자료 

https://specificity.keegan.st/

Specificity Calculator

 

ex) 어떠한 요소 속성이 background-color: #ffffff 일때
그 요소 속성에 다시 background-color: #000000으로 적용하면 전에껀 무시되고 변경된 속성값으로 적용됨