css 자주 쓰는 명령어

명령어

• 기본적인 명령어

 

• color: 컬러명
  색을 바꿔줄때 사용한다.
• width:??px
  가로 길이를 조정할때 사용된다.
• height:??px
  세로 길이를 조정할때 사용된다.
• background-color : 컬러명
  지정한 구역의 백그라운드색을 변경할때 사용된다.
• text-align
  텍스트 정렬 방식을 설정할때 사용된다.
  left:왼쪽으로 정렬
  right:오른쪽으로 정렬
  center:중앙으로 정렬
  justify:양쪽끝에 맞추어 정렬 
  각 줄의 텍스트가 양쪽 가장자리에 맞춰지도록 조정된다.

---

• 여백을 주는 명령어

• padding:??px
  안쪽으로의 여백을 줄때 사용된다.
• margin:??px
  바깥쪽으로의 여백을 줄때 사용된다
• 예시
  
  

• 동일사항

• 기본값
  모든 방향에 대한 설정
• top:위 , right:오른쪽 , bottom:아래 , left:왼쪽

• 사용예시
  
  
  margin: 위 오른쪽 아래 왼쪽

.test{
margin:20px auto 0px auto
}

여기서 auto 는 끝까지 여백을 줄때 사용된다.

---

• 테두리를 설정하는 명령어

• border
  요소의 테두리를 설정하는 속성
  기본구조
  border:width style color
               2px    solid   red
• border-style 종류
  none:테두리없음
  solid:실선
  dashed:대시선
  dotted:점선
  double:이중선
  groove:파인 테두리
  ridge:볼록한 테두리
  inset:눌린 듯한 테두리
  outset:튀어나온 듯한 테두리
  
  
• border-radius: ??px , ??%
  요소의 모서리를 둥글게 만드는데 사용된다.
  
  

• 이미지를 넣어주는 기본명령어

• background-image:url('이미지링크')
  이미지를 가져온다
• background-position:center
  가져온 이미지를 가운데로 가져온다.
• background-size:cover
  가져온 이미지를 사이즈에 딱 맞게 만든다