css 기초 개념 정리

다시 공부하려고 정리하는 뒤죽박죽 css 기초 개념 

text-decoration-line

none : 꾸밈 없음
underline : 텍스트 아래 밑줄
overline : 텍스트 위에 줄
line-through : 텍스트 중간 선

text-decoration-color

라인의 색

text-decoration-style 
선의 모양

solid: 굵은 선

wavy : 물결모양

dotted : 점선
dashed: 짧은 막대선

double: 이중선

font 크기

font-weight: normal; 과 font-weight: 400; 과 같고

font-weight: bold; 과 font-weight: 700;은 같음

굵기는 100 ~ 900 까지 있음 ( 100 단위 )

폰트에 따라 지원되는 크기는 다름 


 div와 span의 차이 

왼쪽이  div  오른쪽이 span
div는 사용한 부분을 단독적인 새로운 줄에 놓아버림 
블록과 인라인 차이 ! 

 

 

width, height

Min-width: 500px; // 적어도 500px

Max-width: 500px ;// 최대 500px

Min-height: 500px ; //세로길이 적어도 500px

Max로 설정하면 최대 500

.p1 {
border: 1p solid blue;
max-width: 1000px;
}
.p2 {
border: 1px solid red;
max-width: 200px;
}

 

 

overflow

overflow: hidden; /* 넘치는 부분을 숨기겠다 ! */

overflow: visible; /* 삐져나옴.  기본값임 */

overflow: scroll; /* 말그대로 스크롤 생겨서 내려서 볼 수 있다. */

overflow: auto; /* 글이 넘칠 때 자동으로 스크롤 생김. 안 넘치면 스크롤 X   */

* 테두리 없애기

기본적으로 테두리가 설정되어 있는 요소들 (ex) <input>) 의 테두리 없애기
1 border : none;
2 border : 0;

opacity 불투명도 설정 

 

배경이미지 넣기

background-image: url(“”)

“”사이에 이미지 주소나 경로 넣기 !

background-repeat: repeat; /*으로 변경 시 사진이 반복해서 나옴*/
background-repeat: space;  /*반복할 수 있을만큼 반복 후 남는 공간은 여백 */
background-repeat: round;  /*반복할 수 있는 만큼 반복한 후 , 남는 공간은 이미지 확대를 통해 배분 */

/*
No- repeat은 반복 X
repeat-x는 가로 방향으로만 반복
repeat-y는 세로 방향으로만 반복
*/

background-size: 200px 50px;  /*사이즈 */
background-size: cover;   /*는 배경을 꽉 채우면서 비율유지 ~~ (사진은 잘릴 수도 있음) */
background-size: auto; /*원래 이미지 사이즈대로 출력*/
background-size: contain;  /*가로,세로 중 먼저 채워지는 쪽에 맞추어서 출력*/
background-size: 60% 70%; 
/*가로 : 부모요소 width의 60%, 세로: 부모 요소 height의 70%로 설정*/

background-position: right bottom;  /* 잘리지만 오른쪽을 치우쳐짐 (왼쪽 부분이 잘림 ) */

Pseudo-class (가상 클래스)

클론(:)을 사용하면 몇 가지 ‘가상 클래스’를 선택할 수 있다.

/* .div1의 자식인 

 태그 중 3번째 */

.div1 p:nth-child(3) {

  color: blue;

}


/* .div1의 자식인 

 태그 중 첫 번째 */

.div1 p:first-child {

  color: red;

}

 

/* .div1의 자식인 

 태그 중 마지막 */

.div1 p:last-child {

  color: green;

}

 

/* .div1의 자식 중 마지막 자식이 아닌 

 태그 */

.div1 p:not(:last-child) {

  font-size: 150%;

}


/* .div1의 자식 중 첫 번째 자식이 아닌 

 태그 */

.div1 p:not(:first-child) {

  text-decoration: line-through;

}