728x90 반응형 비주얼스튜디오코드22 비주얼 스튜디오 코드⑨ 필터효과, 박스사이징 01 filter img: 자기 영역이 있음 인라인 구조 사진과 사진사이에 여백이 있음 여백을 없애고 싶다면? 인라인 구조를 블럭구조로 바꾸면 된다. display: block; filter: blur(치수) _ 흐림효과 filter: brightness(치수) _ 밝기효과 : 0:검정색 / 1: 원본컬러 filter: contrast(치수) _대비 filter: grayscale(치수) _흑백변환 02 box-sizing box-sizing: border-box 패딩값을 포함해서 박스사이즈를 출력해줌, 즉 패딩값을 줘도 박스사이즈가 변하지않는다. 초기화할 때 사용 2023. 5. 24. 비주얼 스튜디오 코드⑧ 영역의 레이어를 바꿔주는 명령어 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:.. 2023. 5. 24. 비주얼 스튜디오 코드⑦ border 사용법 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: 인라인 구조라서 옆으로 이어지게 됨, 한 줄에 들어.. 2023. 5. 23. 비주얼스튜디오코드⑥ 주문서 작성하기 thead tfoot tbody tbody가 추가 될 수 도 있기 때문에 나중에 넣는 편임 class> style 적용할 때는 . 으로 시작 .table2 명령어를 중복되어 쓸때는 ,(쉼표)를 써주고 같이 적용할 부분을 써주면 된다. *주문서 작성하기 랩 wrap: 웹페이지를 감싸는 역할을 함 큰덩어리이이기 때문에 id를 부여해준다. *{} : 전체적용 margin: 0; : 상단 여백 없애줌 여백없이 랩 적용 h태그: h1- 로고 적용 시 사용 h1은 로고에 사용하지만 로고가 없으니 h1 사용 p태그: 단락 태그 줄 칸 띄우기 padding: 안쪽 여백/ 칸 포함해서 적용됨, 박스 넓이 높이가 같이 늘어남 margin: 칸 제외됨, 칸이 안늘어남 **wrap: height 높이값 적용 안 하는게 좋음,.. 2023. 5. 22. 비주얼 스튜디오 코드⑤ 폼태그 01 폼태그 label: 아이디, 비밀번호 란을 만들 때 사용 input: text 넣는 란 br: enter input type="password" > 텍스트가 가려서 나옴 폼태그 인포박스 chekbox: 여러개 선택하는 체크박스 radio: 선택란 중 하나만 선택할 수 있는 체크박스일 때 사용 name="a" 이름을 부여해서 하나만 선택할 수 있게 할 수 있다. value: 원하는 데이터 수집할 때 용이 color h구조는 블록구조 h4태그로 br 대신에 줄바꿈을 사용할 수 있다. date: 날짜박스 file: 첨부파일을 넣을 수 있음 input type="file" button : 버튼 박스 input type"button" value="클릭" submit: 전송단추 셀렉트문: 패밀리로 탭구성 예제.. 2023. 5. 19. 비쥬얼 스튜디오 코드④_테이블 만들기2 , 목록태그 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층공.. 2023. 5. 18. 이전 1 2 3 4 다음 728x90
