[CSS] 기초(1)

배경 이미지

background-image: url('이미지 경로');

background-size: 100%;

background-repeat:no-repeat; 👈 default는 repeat

background-attachment:fixed; 👈 div 값을 무시하고 브라우저 처음부터 이미지 시작

 

display 속성

display: block; 👈 일반적으로 설정하지 않아도 div를 갖게되는 기본값

display: inline; 👈 개행 불가. 임의로 크기 조절 불가능(최소값만 가진다). margin을 줘도 상하는 고정

display: inline-block; 👈 inline의 성질을 가지고 있지만, 임의로 크기 조절 가능

✔ display: none; 👈 화면에서 사라진다. 속성 값도 날아간다

 

visibilty

✔ visibilty: hidden; 👈 화면에서 사라진다. 속성 값은 그대로

 

opacity

opacity: 0.7;

 

margin: 바깥쪽 여백

padding: 안쪽 여백

margin: 10px 10px 10px 10px; 👈 상하좌우 모두 10px. 시계 방향으로 값을 준다
= margin: 10px;

margin: 10px 5px; 👈 상하 10px, 좌우 5px
margin: 10px 5px 7px: 👈 상 10px, 좌우 5px, 하 7px

 

border

border-width: 5px;
border-style: solid;
border-color: #ff6a00;
= border: 5px solid #ff6a00;

 

border는 바깥 쪽으로 확장되는 것이 기본이지만, box-sizing을 조절하면 안쪽으로 들어오게 할 수 있다

box-sizing: border-box;

 

font

font-family: 글꼴 속성;

font-style: 글꼴 모양;

font-weight: 글꼴 두께;

line-height: 행간
    가로 정렬: text-align:center;
    세로 정렬: line-height:높이값;

text-decoration:none; 👈 하이퍼링크시 밑줄없는 보통 글자를 만들기 위해 사용

 

position-static: 기본값

position-absolute: 절대값

div {
    position: absolute; 👈 브라우저 좌상단 기준. 브라우저가 움직일 때 같이 움직인다
    top: 100px;
    left: 1000px;
}

#wrap .content {
    position: absolute; 👈 감싸고 있는 태그 기준
    top: 100px;
    left: 100px;
}

 

position-fiaxed: 고정값

div {
    position: fixed; 👈 브라우저에 영향을 받지 않고, 항상 그 위치
    top: 100px;
    left: 1000px;
}

 

position-relative: 상대값

div {
    position: relative; 👈 원래 위치부터 계산
    top: 100px;
    left: 1000px;
}

 

position-relative, absolute

#wrap {
    height:200px;
  position:relative; 👈 안쪽 요소에 absolute가 있다면, 바깥 요소에 무조건 relative를 줘야 한다
}

#wrap div {
    position:absolute;
    top:10px; left:10px;
}

 

✅ 깊이값 조절 >> z-index: n;

*보통 10, 100 단위로 조절 한다

 

 

float

float: left;
float: right;
overflow: hidden; 👈 float을 쓸 때 감싼 태그에 무조건 overflow를 줘야 한다