조반짝의 도전일지

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

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: 인라인 구조라서 옆으로 이어지게 됨, 한 줄에 들어..

01 테이블 만들기 wrap을 정중앙에 보내기: margin: 0 auto; ** 반응형할때는 height 값 빼줘야함> 반응형에 탄력있게 크기조절이 되어야하는데 높이값을 들어가면 반응형 크기 조절이 안됨. wrap색 텍스트 여백주기_1 텍스트 여백주기_2 태그: 단락 [이름 부여해주기] 1. class: 똑같은 이름을 여러개를 부여해서 사용할 수 있음 2. id: 중복된 이름을 사용하지 않음, 큰덩어리에만 부여 p태그 생략가능 #wrap p.text = #wrap .text padding 값은 크기를 늘린다. w300 에 padiding 30px 을 주면 w360이 된다. float 을 띄우면 텍스트, 이미지가 한층 더 올라감 clear로 텍스트, 이미지가 못올라가게 함 , clear가 비어있는 1층공..

크롬설정하기 manage > settings > extensions > live server config > custom browser > chrome 변경 화면 셋팅하기 _ 글자 한문단에 계속 이어지는 것 방지하기 manage > settings > search settings에서 word 검색 > word wrap 찾아서 wordwrapColumn 설정 하기 배너 이미지 적용 이미지 넣을 부분에 주석처리 해주어 이미지를 대체한다. 주석처리: ctrl+/ [배너 이미지 넣기] #banner 안에 background: url( . /폴더/파일이름) . 은 자기자신: index.html 안에 있는 폴더 .. 은 상위폴더(부모폴더) margin: 바깥여백, 컬러값을 넣으면 박스의 여백이 늘어남 padding..

포토샵 새로만들기 > 문서설정 w1200 * h700 rgb컬러 설정 [레이어추가] -header -banner -contents -footer style > fixed size 변경 후 height 100 / 300 / 200 눈금자 표시 style > normal 변경 포토샵 보다 피그마가 더 유용하게 사용함 영역 지정후 레이어 별 alt+delet 연한색으로 칠하기 비주얼스튜디오에서 넘어와서 포토샵에서 디자인한 정보를 토대로 스타일을 변경해줌 div 기본적으로 마진값이 적용되어있다. div 마진값 설정 마진값 0을 주고싶다면 margin: 0px; * : 모든영역에 적용 > 모든 영역에 디폴트로 적용 padding: 글자에 여백이 들어감 여백 치수는 시계방향으로 적용된다. 모든 모니터에 적용하기 위..