HTML / CSS

배경 이미지 넣기

background-image: url("주소")
background-repeat: 옵션
사진을 넣고 남은 여백에 대해서 사진으로 반복시킬 것인지, 아닌지 반복한다면 어떤 방식으로 반복시킬 것인지 정해주는 속성입니다.

• background-repeat: no-repeat : 반복하지 않음
• background-repeat: repeat-x: 가로방향으로만 반복
• background-repeat: repeat-y: 세로방향으로만 반복
• background-repeat: repeat: 가로와 세로 반복
• background-repeat: round: 반복할 수 있을 만큼 반복 한 뒤, 남는 공간은 이미지 확대를 통해 배분

background-size : 배경 이미지의 사이즈를 정해주는것

• background-size: auto: 원래 사이즈 대로 출력
• background-size: cover: 화면을 꽉 채우면서 화면 비율 유지
• background-size: contain: 가로세로중 먼저 채워지는 쪽에 맞추어서 출력
• background-size: 가로px 세로px: 픽셀값 지정
• background-size: 가로% 세로%: 퍼센트값 지정

선택자 정리

1. 태그
2. class/id
3. 자식(children)
   ex) div1 I{}: - div1 태그의 I태그에 적용
4. 직속자식(direct children) - div1 > I{}; div1 클래스의 태그 중 직속 자식에게만 효과적용
5. 복수적용
   ex).two, .four{}; two클래스와 four 클래스를 가진 모두 선택
6. 여러조건
   ex) .one ,four{}; one클래스를 가지고 있으면서도 four클래스를 가지고 있는 태그
7. 가상클래스(psueudo-class) - ':'를 사용하면 몇가지 가상 클래스를 선택할 수 있다.

• .div1 p:nth-child(3){}; div1 클래스의 p태그 중 3번째
• .div1 p:first-child{}; p태그 자식들 중 첫번째
• .div1 p:last-child{}; p태그 자식들 중 마지막
• .div1 p:not(:last-child){} p태그 자식들 중 마지막이 아닌 p태그
• .div1 p:not(:first-child){} p태그 자식들 중 첫번째가 아닌 태그
• h1:hover{ color: green;} - 마우스를 가져다 댈 때만 초록색으로 글자색 변경

color, font-family, font-size, font-weight, line-height, line-style, text-align, visibility는 어미 속성에만 입력했지만 효과는 자식 태그에게도 자동으로 '상속'되서 효과가 적용 됩니다. 자식 태그에 적용 시키지 않기 위해선 자식태그에 normal을 입력 해줘야 합니다.

display 속성

종류:inline, block,inline-block, flex, list-item, none

display(b i a img button 등)

다른 요소들과 같은 줄에 머무르려고 하는 성향
가로 길이는 딱 필요한 만큼만 차지하는 성향

block(div h시리즈 p ul il)

새로운 줄에 가려고 하는 성향
가로 길이는 최대한 많이 차지하려는 성향이 있다.

inline-block

inline은 wdith, height를 설정해 주어도 변경이 되지 않는다. 하지만 이 태그를 쓰면 성향은 inline이지만 block 처럼 길이를 가질 수가 있다.

정렬

가로 정렬

inline - text-align: center;
block - margin-left: auto; margin-right: auto;

세로정렬

세로정렬은 따로 태그가 없기 때문에 여러개를 조합해서 써야 한다.