비주얼 스튜디오 코드⑧ 영역의 레이어를 바꿔주는 명령어

margin: 50px auto;

위쪽에서 50픽셀 띄워주고 auto는 좌우 자동으로 맞춰줌

 

01 float 

float: 띄워서 오른쪽이나 왼쪽으로 위치시킴

float을 하게 되면 2층으로 보내지기 때문에 가상요소로 넣어줌으로써 테두리선이 위로오게됨

 

가상요소 명령어

  #wrap::after{

            content:"";

            display: block;

            clear:both;

        }

반응형으로 인해 부모에 기준점을 잡아서 위치를 시켜줘야함

기준점은 부모자리에 position: realative; 으로 잡아준다.

임의지점은 자식자리에 position: absolute;

0,0의 자리를 먼저 알아두면 객체 위치시킬 때 편리하다.

02 영역의 레이어 층을 바꿔주는 명령어

z-index : 레이어 층을 바꿔준다.

position: absolute와 함께 사용해 주어야한다.

03 네비게이션

nav태그: 네비게이션에만 쓰는 태그

블럭구조: 박스, ul / li 태그 , div태그,p태그

인라인구조: 텍스트, span태그 / 인라인구조는 높이 너비값이 먹히지 않는다 > 블럭구조로 변경해준다(display: inline-block;)

블럭구조인지  인라인구조인지 궁금할 때 배경색을 칠해보면 알 수 있다.

 

넓이값을 안주면 한줄 다 들어가지만 길이값 넣어주면 박스로 색이 들어가게된다.

float: left 왼쪽에서부터 가로로 정렬해준다.

> 표시는 하위자식에만 영향을 미침

서브메뉴는 포지션으로 띄워주어야한다. 안그러면 배너를 밀게 되어 공간이 비게된다.

04 그림자효과

box-shadow: 박스에 그림자 적용, x축 / y축 / 번짐 / 그림자색

inset: 내부그림자, 안으로 그림자가 생김

inset: 내부그림자 적용

text-shadow: 글자에 그림자 적용 

05 모서리를 둥글게 만들기

원을 그려보자

시계방향으로 모서리를 둥글게 만들어준다.

border-radius: 보더를 둥글게 하는 명령어

radius: 레디우스는 제목쓸때 많이 사용됨

06 그라디언트 적용

bacckground: liner-gradient(방향, 시작컬러, 끝컬러)

deg: 각도로 색을 넣을수있다.