Opacity
-투명도
P {
height: px
width: px;
}
Border: 색상 글꼴 크기;
Border-radius: 15px;
- 테두리 글꼴 변경
Padding-top
Padding-bottom
Padding-left
Padding-right
- CSS를 이용해 글과 네모 박스 안 여백을 수정 할 수 있다
margin: px;
- 상하좌우 여백
margin: 0 auto
- 상하좌우 여백이 자동으로 동일하게 만들어 줌
min-width
max-width
- 박스 넓이의 최소, 최대값을 정해줌
Min-height
Max-height
- 박스 높이의 최소, 최대값을 정해줌
Overflow: scroll
- 페이지에 스크롤을 추가해준다
visibility: hidden;
- 보이지 않게 숨겨준다
CSS는 HTML 태그들에게 디자인을 입혀주는 것
link href=“style.css” rel=“stylesheet” type=“text/css” /
- link — link태그로 사용할 css파일을 링크해줍니다.
- href — href 속성에 css 파일 경로를 작성합니다.
- rel — rel은 HTML file과 CSS file과의 관계를 설명하는 속성입니다. css파일을 링크할 때는 항상 "stylesheet"값을 대입해줍니다
- type — link태그로 연결되는 파일이 어떤 것인지 알려줍니다. 여기서 css file을 연결하므로 type값은 항상 "text/css"입니다.
id는 #, class는 .을 이용한다
Text-decoration: underline;
Text-decoration: overline;
Text-decoration: line-through;
Text-decoration: underline overline;
밑 줄, 윗 줄, 가운데 줄, 위 아래 줄
폰트 이름에 띄어쓰기가 있을 경우 “”(쌍따옴표)를 꼭 붙여야한다
Font-weight:
폰트 두께 조절
Font-style:
color hex to rgb
헥스를 rgb로 변경할 때 구글에서 찾을 수 있음
Text-align: left ,Text-align: center, Text-align: right
텍스트 정렬(왼쪽, 가운데, 오른쪽)
blockquote class=“”
들여쓰기
자바스크립트에서 를 넣으면 스페이스바로 작용
Text-indent:
CSS로 들여쓰는 코드
Margin, border, padding
Border: 크기 라인굵기 색깔
선 스타일
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
이 중 solid를 가장 많이 사용
border에서 text-decoration으로 변경하지 않고 underline만 추가했는데 코드가 적용되지 않았다
Border:
선을 상하좌우 모두 만들 수 있음
Box-sizing: border-box;
박스의 모양을 잡아준다, 개인적 또는 실무적인 프로젝트에서는 사용
태그(셀렉터)를 묶어서 사용할 때는(,)를 사용해야한다. 그렇지 않으면 작용하지 않음
