[CSS]CSS삽입방법, 주석, 배경, 테두리, 여백,내부여백,높이/너비,아웃라인

CSS

HTML문서에 스타일을 지정하는데 사용

cascading Style Sheets

여러 웹페이지의 레이아웃을 제어

외부스타일시트는 .css확장자가 이거임

ID SELECTOR

#ID명{ 속성:값;... }

ID속성은 특정요소를 선택해서 그 고유한 값만 넣어주는 것임

ID값은 숫자로 시작할 수 없음

 

CLASS SELECTOR

.클래스명{속성:값;....}

태그.클래스명{속성:값...}

클래스명은 숫자로 시작할 수 없음

 

*선택기

페이지의 모든 HTML요소를 선택

 

태그명{}

태그별로 선택 CSS지정가능

 

CSS삽입하는 방법

외부삽입

헤드와 헤드사이에

<link rel="stylesheet" href="경로">

넣기

경로에는 확장자가 .css여야함

내부삽입

헤드와 헤드사이에 <style>을 집어넣기

인라인삽입

태그에 style로 직접 넣기

 

스타일시트가 겹치는 경우!!

인라인스타일이 제일먼저 지정, 그 뒤 없으면 헤드 섹션 그뒤 기본값

 

주석

브라우저에 표시 안됨

/* */

색상

https://hyejin283.tistory.com/161

[HTML] HTML 기본 색상표

https://hyejin283.tistory.com/163

[HTML] RGB, RGBA색상,HEX값, HSL색상

배경색 background-color

글자색 color

테두리색상 border:사이즈 모양 색깔;

 

css배경

• background-color // 불투명도 지정 opacity 0~1사이
• background-image //url지정해서 할 수 있음
• background-repeat //repeat-x 하면 가로로만반복 repeat-y는 세로로만 반복 no-repeat 한번만 표시
• background-attachment // 배경이미지가 스크롤되어야하는지 고정되어야 하는지 지정 fixed고정 nofixed고정안됨 scroll도 고정안됨
• background-position //배경 이미지 위치지정

background 약식 속성을 설정할 수 있음 (값 순서 / 중간에 누락되도 괜찮다)

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

테두리

border-style - 스타일을 각각 지정가능( 위, 오른쪽, 아래, 왼쪽)

  border-top-style: 값;
  border-right-style: 값;
  border-bottom-style: 값;
  border-left-style: 값;

• dotted- 점선 테두리를 정의합니다.
• dashed- 점선 테두리를 정의합니다.
• solid- 단색 테두리를 정의합니다.
• double- 이중 테두리 정의
• groove- 3D 홈 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
• ridge- 3D 융기된 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
• inset- 3D 삽입 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
• outset- 3D 아웃셋 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
• none- 경계를 정의하지 않음
• hidden- 숨겨진 테두리를 정의합니다.

border-width - px,pt,cm,em

border-color

border약식속성

• border-width
• border-style(필수)
• border-color

border-radius 둥근테두리 - px 얼마나 둥그렇게 할것인가

 

margin

테두리 외부 요소 공간 (위, 오른쪽, 아래, 왼쪽)

• margin-top
• margin-right
• margin-bottom
• margin-left

값 지정(-값 가능)

• auto - 브라우저가 여백을 계산합니다. // 컨테이너 내 요소를 가로로 가운데 맞출 수 있음
• 길이 - 여백을 px, pt, cm 등으로 지정합니다.
• % - 포함하는 요소 너비의 %로 여백을 지정합니다.
• 상속 - 여백이 부모 요소에서 상속되어야 함을 지정합니다.

padding

테두리 내부 여백

위,오른쪽,아래,왼쪽

• padding-top
• padding-right
• padding-bottom
• padding-left

값 지정(-는 안됨)

• 길이 - px, pt, cm 등으로 패딩을 지정합니다.
• % - 포함하는 요소 너비의 %로 패딩을 지정합니다.
• 상속 - 패딩이 부모 요소에서 상속되어야 함을 지정합니다.

패딩양에 관계없이 너비를 유지하려면 box-sizing을 border-box로 유지하면 가능

높이,너비값

• auto- 기본값입니다. 브라우저는 높이와 너비를 계산합니다.
• length- px, cm 등으로 높이/너비를 정의합니다.
• %- 포함하는 블록의 높이/너비를 백분율로 정의합니다.
• initial- 높이/너비를 기본값으로 설정합니다.
• inherit- 높이/너비는 부모 값에서 상속됩니다.
•  

w3스쿨

outline

요소의 테두리 외부에 그려진 선임

속성 - 테두리 외부에 그려지고 다른 내용과 겹칠 수 있음

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

아웃라인 스타일

• dotted- 점선 윤곽을 정의합니다.
• dashed- 점선 윤곽을 정의합니다.
• solid- 실선을 정의합니다.
• double- 이중 윤곽선 정의
• groove- 3D 홈이 있는 윤곽을 정의합니다.
• ridge- 3D 융기된 윤곽을 정의합니다.
• inset- 3D 삽입 윤곽을 정의합니다.
• outset- 3D 아웃셋 아웃라인 정의
• none- 윤곽을 정의하지 않음
• hidden- 숨겨진 윤곽선 정의

outline-width

• thin (typically 1px)
• medium (typically 3px)
• thick (typically 5px)
• A specific size (in px, pt, cm, em, etc)

outline 속성

• outline-width
• outline-style(필수)
• outline-color

outline-offset 윤곽선의 가장자리/테두리 사이에 공간을 추가