비주얼 스튜디오 코드⑦ border 사용법

<div>

div:nth-child(1) - div 의 첫번째 div를 뜻함 = div:first-child - first도 사용가능

div:nth-child(2) - div 의 두번째 div를 뜻함

div:nth-child(3) - div 의 세번째 div를 뜻함 = div:last-child - 마지막 div를 뜻함

01 border 

border style : 한번에 지정 가능함

border: 10px dashed #000 / 보더크기 스타일 색

02 블럭구조와 인라인 구조

블럭요소 태그는 자동줄바꿈됨

p태그: 블럭구조 다음줄로 내려가게됨 , 한 단락씩 표시됨

span태그 : 

strong태그: 글자 굵게

em태그: 비스듬한 글자

span, strong, em: 인라인 구조라서 옆으로 이어지게 됨, 한 줄에 들어가게됨 , 나중에 영역이 부족할 때 떨어지게됨

 

블럭구조는 높이값 적용이 되지만 인라인구조는 높이값이 적용이 안된다.

인라인구조에 높이값이 적용되지않기 때문에 블록구조로 바꿔줄 수 있다.

display: block; 명령어로 인라인구조 > 블럭구조로 변경가능

display: inline-block은 블럭구조, 인라인구조 모두 적용 가능

인라인구조, 블럭구조의 큰 차이점은 인라인구조는 블럭구조는 줄바꿈이 가능하고 인라인구조는 옆으로 계속 이어지는 구조

 

03 배경색

 

ul: 목록이 없는 리스트 작성 

ul 밑에 반드시 li가 들어가야함

 

컬러코드는 숫자가 작을수록 진하다.  

동그란 표시 없애기: list-style: none;

float: float은 1층은 비어있다고 생각하면됨

공간이 부족하면 줄바꿈으로 다음줄로 넘어감

04 백그라운드 이미지 넣기

 

section : 영역을 구분해주는 역할 ( =div ) , banner, body 영역으로 사용

 

<style> 안에 section 스타일 지정

background-image : 배경에 이미지를 가져오는 명령어로 이미지를 공간에 계속 반복해서 출력해주는 명령어

background-repeat: no-repeat; - 이미지를 반복하지 않고 하나만 출력해줌

background-position: 그림의 위치를 지정

ex) background-position: center center; - 이미지 가운데

left,right,center,bottom 으로 이동가능

px로도 이동 가능하다.

 

 

05 배경이미지 크기 비율에 맞게 조절하기

section: 큰 박스

article: 작은 박스, section 과 같은 개념이지만 섹션보다 더 작다고 생각하면 된다.

 

장미사진을 넣었지만 장미사진이 너무 커서 화면에 보이지 않는다

이럴 경우 이미지 배율에 맞춰서 화면에 출력되게 해야한다.

background-size: cover;

background-size: cover;

박스안에 사진 배율에 맞춰서 사진크기를 조절할 수 있음, 빈공간 없이 꽉 채워서 이미지를 채워줌 

background-size: contain;

background-size: contain; 

박스안에 배율에 맞춰서 이미지가 다 들어가게 함, 하지만 사진 배율이 맞지 않을 경우 옆공간이 남게 됨

 

> background-size: cover; 를 많이 사용함

 

07 float

하늘색 칸이 밑으로 떨어짐

이럴땐 #wrap의 높이값을 지워줌

#wrap .left 와 #wrap .right 에 float 를 넣어줌

#wrap은 1층 / #wrap .left 와 #wrap .righ 2층으로 #wrap 위로 위치하게됨

가상공간을 넣어서 테두리가  나오게 해야함

가상요소는 플롯을 띄운 부모한테 넣어줘야함

#wrap::after - 가상공간

08 position

position: 객체 위치를 지정해줌

absolute: 절대주소, 기준점이 없을 때 사용

 

 

position: abso

기준점을 잡아서 그 안에서 객체가 위치하도록 한다.

relative: 임의주소, 객체를 움직여주기는 하지만 지금은 기준점으로 사용하도록한다

div class="box"의 기준점이 #wrap이 된다. 

반드시 기준점이 무엇인지 알아야한다. 보통 부모가 기준점이다. 

 

핑크색 박스 하늘색 박스 중간에 넣어주기 

position: fixed;

스크롤을 위아래로 움직여도 fixed 된 객체는 그대로 창에 보여지게됨

 

90vw : 세로 폭을 100개를 나눠서 그 중 90개를 쓰겠다.

90vh: 가로 폭을 100개를 나눠서 그 중 90개를 쓰겠다.

한페이지 안에서 폭을 사용하겠다.

09 두배경 이미지를 웹브라우저에 고정하기

두이미지가 합쳐저서 하나의 이미지로 보이게 할 수 있다.