홍또의블로그

float 띄워서 요소에 영향없도록 함. 하지만 border가 아닌 콘텐츠는 영향을 받음. 부모 요소에게 overflow: hidden을 주면, 부모가 float된 자식을 잡는다. 가상요소 .pseudo::before{ content: "!" margin-right: 20px; font-size: 30px; } .pseudo::after{ content: "!" margin-right: 20px; font-size: 30px; }

Box Model content : 콘텐츠가 들어있는 상자, 가로는 width / 세로는 height padding : 안쪽여백이다, content와 border사이 공간 border : 테두리 , ( ex : 1px solid #000 ) 굴기 스타일 색상 을 명시해야함 / 쓰고싶지 않을경우 none (border-radius: 4px -> 둥글게 만들어 준다) margin : 요소와 요소 사이의 간격을 나타냄 Box Sizing 안의 내용과 상관없이 해당 box size를 정할 수 있다.ex) box-sizing : border-box * { box-sizing: border-box; } //모든 요소들에 대해서 box sizing이 border box에 맞춰서 사이징 한다 Box의 종류(displa..

1. audios controls -> 음량 컨트롤 하려면 작성 autoplay -> 자동 재생 loop -> 반복재생 2. videos 오디오랑 "완전" 똑같음 3 iframe -> html문서 안에 또다른 문서를 import하고 싶을때 쓴다 embed해서 사용한다 출처 - 김버그님 HTML 강의듣고 개인적으로 정리한것

table의 원리 : table의 시작을 알리는 태그 (table row) 기로 : 테이블 헤드 , 테이블을 좀더 명확하게 구분할 수 있음 : 테이블 헤더 : 테이블 데이터 : 테이블 바디 ,테이블을 좀더 명확하게 구분할 수 있음 rowspan="2" : 세로로 2칸차지 colspan="6" : 가로로 6칸차지 출처 - 김버그님 HTML 강의듣고 개인적으로 정리한것

1) type = submit : 제출 2) type =reset : 리셋

Form - 사용자로부터 input을 받기 위해 사용 attribute - action ="API 주소" , method = "GET | POST" 1. 1) "text" 뒤에 -placeholder="아이디를 입력하세요" minlength,maxlength="13" required -> 무조건 입력 disabled -> 사용못하게 , value -> 초기값 2) "email" -> @ 이 없으면 에러 3) "password" -> 패스워드 안보임 4) "url" -> url만 적을 수 있음 5) "number" -> 숫자만 적을 수 있고 min,max값으로 값을 제한 가능 6) "file" -> 파일첨부 input 만들기 accept 옵션으로 확장자 제어 ( ex .png ,.jpg) 7) radio ..

attribute 옵션 : 각 태그의 속성값을 나타내며 태그마다 꼭 필요한 attribute가 있음 : 제목(head) : 문단(paragraph) 태그 : 엔터 태그 강조 Anchor 주소 : "웹페이지 링크" , "#id"(해당 id의 페이지로 감> , "mailto:메일주소"(메일보내기) "tel:번호"(전화걸기) + href 뒤 추가 attribute 옵션 -> target="_blank" (새탭을 열고 링크로 넘어감) image alt = alternative text : 대체 텍스트 ( 이미지가 뜨지 않을 때 대체로 뜰 수 있는 텍스트) Lists : 순서가 중요한 태그(ordered list) : 순서가 중요하지 않은 태그(unordered list) -> ul과 ol의 자식요소는 li만 가..