이미지를 가운데 정렬 해주고싶은경우
display : block;
display : block => 가로행 전부를 차지해 주세요..
margin-left : auto;
margin-right : auto;
div 박스를 가운데 정렬 하고 싶은 경우
기본적으로 display : block 지정 되어 있기 때문에
margin-left , right => 만 auto로 맞추어주면 된다.
윈도우창 크기에 맞춰서 가운데로 정렬 해줌
글씨를 가운데 정렬하고 싶은 경우
text-align : 'center';
글자 간격 조절
letter-spacing : ~~ px ;
단어 간격 조절
word-spacing : ~~ px;
글자 굵기 조절
font-weight :
<strong>margin / padding
margin => 상하좌우 여백
padding => 상하좌우 안쪽 여백
div박스 그림자 넣기
https://www.tabmode.com/homepage/box-shadow.html
container / wrapper 구조 생성
원래라면 display : block이 고정값으로 되어있어 주황색이 밑으로 가야하지만 파란색을 왼쪽으로 붕 띄워주세요 해서
2중으로 곂쳐있는 모양이다
하지만 float: left를 사용해서 붕 띄워 놓고 다음 div 를 작성하면
띄워진상태 밑에 생성이된다.
그러때는 곂치는 마지막 div 스타일에 clear: both를 작성해주면 해결 가능
그 밑에 margin같은 스타일 속성을 주고 싶은경우 붕 떠있는 상태이기 때문에
바로 위에 가상의 div 박스를 생성하고 clear : both를 만들어주고 작성하면 해결된다
하지만 다른 방법도 있다.
display : inline block;
div => 고정값으로 display : block 이라서 한줄로 처리 되어있지만 display : inline block을 주게되면 span태그처럼 연달아서 사용이 가능해진다.
<div>박스 1</div><div>박스 2</div>
// 이렇게 inline block을 사용하고 붙혀서 사용하면
박스1 박스2 이렇게 표현된다
하지만 레이아웃이 틀어지는 현상이 발생한다
vertical-align : top 을 설정해주면 그 부분은 해결 가능하다
display : block vs inline block 한 줄 정리
=> block은 p태그처럼 한 줄을 전부 차지하는 것
=> inline block은 span태그처럼 해당 부분만 차지하는 것
background-image : url()
margin collapse 현상
<div>
<div //background-image : url()>
블라블라븗라
</div>
</div>이미지 div 박스 안에 글씨를 가운데로 정렬하고 싶을 때
margin-top을 주는 방법이 있는데 그러면 image박스 자체가 내려가는 경우가 있다.
그게 margin collapse 현상인데
부모 요소의 div박스에 padding:1px을 주게 되면 방지가 가능하다.
조금 더 편리하게 위치를 바꾸고 싶을 때
position : relative
=> 현재 좌표를 기준으로 이동할게요 라는 뜻
left : 100px 기존의 위치에서 왼쪽으로 100px 이동
공중에 띄워서 여기저기 움직이게 만드는 원리
position : static
설정 해놓으면 좌표를 작성하더라도 움직이지 않는다.
position : fixed
=> 현재 위치의 기준이 아닌 내가 보고있는 화면 자체의 기준이 된다.
스크롤 해도 움직이지 않고 계속 고정되어있음
ex => 상단 메뉴바 or 상단으로 바로가기 메뉴 바
position : absolute
=> fixed와 다르게 화면 자체의 기준이 아닌, 부모요소의 relative 기준으로 움직이게 된다. 즉 background-image 사진 내부에서의 절대위치 라는 뜻
( position : absoulte 기준 )버튼, div 박스 가운데 정렬 =>
left : 0;
right : 0;
margin-left: auto;
margin-right : auto
한방 정리
가운데 정렬 비교
margin : auto VS text-align : center
<div> 아르이ㅏㄴ릐나으라ㅣㅇ느리ㅏㄴ으리ㅏ능ㄹ </div>라는 내용이 있다고 가정 해보자
그렇다면 div 박스 스타일에 text-align : center을 주게되면
인라인 요소가 가운데 정렬이 되어 글씨만 div박스 기준으로 가운데 정렬이 된다.
하지만 margin:auto라는 스타일을 주게 되면 div 박스 자체가 가운데로 정렬이된다. 즉 두가지 요소를 가운데 정렬 하고 싶다면
margin : auto / text-align : center 두개다 사용 하는것이 좋다
z-index 엄청 신기함..
밑에 있는 div 박스가 버튼이랑 곂치게 되는경우도 있고
float 또는 relative를 사용 할 경우
붕 띄서 곂치게 되어 우선순위를 정해서 보여주고 싶을 때
z-index를 사용하면 된다
z-index ? => 우선순위를 정해주는 것이다.
div 박스를 조금 더 올려보겠다
이렇게 사라진것을 보게 되는데
z-index 를 지정해서 버튼을 나타내보자
버튼 요소에 z-index : 1 을 지정 해준 결과이다..
box-sizing : border-box
같은 스타일의 박스를 두개 만들고
width : 80 %
max-width : 600px
밑에 박스에 padding : 50px 을 주게되면
max-width가 있음에도 커지는걸 보게 되는데
widht는 box안에 content에 해당하기 때문에 다른 건 적용되지 않는다
그렇다면 이때 사용해보자 box-sizing : border-box !!!!!!!!
고수가 되기 위함이니 항상 위에 설정하자..
normalize.css => 브라우저같의 호환성
