Programmers

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..

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 속성 효과..

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 ..

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..

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..

https://techblog.woowahan.com/2531/ 이직초보 어느 개발자의 이력서 만들기 | 우아한형제들 기술블로그 {{item.name}} 안녕하세요 저는 올해 2월부터 우아한형제들의 배라개발팀에서 일하고 있는 구인본입니다. 작년 연말에 잠시 휴식을 가진 후 1월부터 이직을 준비하면서 경험했던 것 중에 이력서를 techblog.woowahan.com

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 ..

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..