1) background 요소의 배경을 설정 속성 값 값 의미 기본값 background-color 배경 색상 transparent background-image 하나 이상의 배경 이미지 none background-repeat 배경 이미지의 반복 repeat background-position 배경 이미지의 위치 0 0 background-attachment 배경 이미지의 스크롤 여부(특성) scroll 사용법 background: 색상 이미지경로 반복 위치 스크롤특성; .box { background: red url("../img/image.jpg") no-repeat left top scroll; /* 색상 이미지 반복 위치 스크롤특성 */ } .box2 { background: url("../im..
CSS) display 수정
1) display 수정 abosulte, fixed 속성 값이 적용된 요소는 display속성의 값이 대부분 block으로 수정됨 - position: absolute, fixed 주의사항 지정값 변화값 inline block inline-block block inline-table block table-row block table-row-group block table-column block table-column-group block table-cell block table-caption block table-header-group block table-footer-group block flex flex / float 속성 효과없음 inline-flex inline-flex / float 속성 효과..
CSS) position 특징 - 요소 쌓임 순서
1) 요소 쌓임 순서(Stack order) 요소가 쌓여 있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지(더 위에 쌓이는지)를 결정(z축) 1. static을 제외한 position속성의 값이 있을 경우 가장 위에 샇임(값은 무관) 2. position이 모두 존재한다면 z-index속성의 숫자 값이 높을 수록 위에 쌓임 3. position속성의 값이 있고, z-index속성의 숫자 값이 같다면, 'HTML'의 마지막 코드일 수록 위에 쌓임(나중에 작성한 코드(요소)) position > z-index > HTML마지막코드 1. 기본적으로 마지막에 생성된 요소가 가장 위에 보인다. html 1 2 3 4 5 css .box-group { display: flex; } .box-group .box ..
CSS) position: sticky;
1) position: sticky; 스크롤 영역 기준으로 배치 사용법 .box { position: sticky; top: 0; } ※ 한개 이상 top, bottom, left, right의 값이 존재해야 한다. ☆ EMIT 문법 .section*8>h1{Title $} + Tab html코드에서 사용할 수 있는 문법 -> .section이라는 태그안에 h1태그 안에 Title 이라는 단어를 입력하고 $숫자를 반복해서 출력한다. *8을 통해 8번 반복. 처음봐서 잘 모르겠다. 한번 알아봐야겠다 좋네. 1. 전체 뷰 상단 스크롤바에 붙어서 출력 html Title 1 Title 2 Title 3 Title 4 Title 5 Title 6 Title 7 Title 8 css .section { heigh..
CSS) position:fixed;
1) position:fixed; 브라우저(뷰포트)를 기준으로 배치 1. absolute로 고정 html 1 2 3 css body{ height: 4000px; } .grand-parent { width: 400px; height: 300px; padding: 30px 100px 100px 30px; border: 4px dashed lightgray; } .parent { width: 400px; height: 300px; border: 4px dashed gray; } .child { width: 120px; height: 80px; background: tomato; border: 4px dashed red; border-radius: 10px; font-size: 30px; display: fl..
CSS) position: absolute;
1) position: absolute; 위치 상 부모 요소를 기준으로 배치 ※ position이 지정되어 있는 부모를 기준으로 배치한다. 예제를 봐야 알 수 있다. 1. position: absolute;만 2번 div에 적용한 경우 html 1 2 3 css .grand-parent { width: 400px; height: 300px; padding: 30px 100px 100px 30px; border: 4px dashed lightgray; } .parent { width: 400px; height: 300px; border: 4px dashed gray; } .child { width: 120px; height: 80px; background: tomato; border: 4px dashed ..
CSS) position: relative;
1) position: relatvie; 요소 자신의 기준으로 배치 html 1 2 3 css .box { width: 100px; height: 100px; background: tomato; border: 4px dashed red; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 30px; } .relative { position: relative; bottom: 40px; left: 30px; } 출력결과 ※ 파란색 점선의 네모박스가 자신의 기준 위치이고 이 위치는 1번 div로 부터 영향을 받는다. 그리고 3번 div로 영향을 준다. ▷ 느낌으로 보자면, 현재 보여지는 2번 di..