https://github.com/1997MJ/ResponsiveWebPra_01
배운 점
- border-spacing : ?px; -테두리 사이의 간격 지정
- border-collapse : collapse; - table의 테두리를 하나로 합쳐 표시
- box-sizing: content-box; - 박스의 사이즈를 콘텐드 박스로 지정
- vertical-align : ?; - 수직정렬 위치 지정
- text-align : ?; - 수평정렬 위치 지정
- <figure> - 이미지, 차트 등을 담는 컨테이너 태그
- <img>
- <figcaption> - 이미지에 문구를 기재하는 태그
- display: block; - 블록으로 변환하면 너비와 높이를 지정 할 수 있다. (inline은 지정 x)
- text-transform : ?; - 영어 대/소문자를 서로 전환 시키는 태그
- text-indent : ?px;- 들여쓰기/내여쓰기 지정 태그 (글자 감추기)
- cursor: pointer; - 마우스 커서의 상태를 포인터(손가락 버튼)로 설정
- counter-increment: element number; - 요소를 기준으로 number 간격으로 일련번호를 설정
- content: counter(element) "String"; - String+일련번호를 붙임
가상요소
- ::before - 요소 앞에 새로운 컨텐츠 추가
- ::after - 요소 끝에 새로운 컨텐츠 추가
- <form> - 영역의 범위를 지정하며 요소들을 포함한다. ex)회원가입, 로그인
- action - url 지정
- method - 입력 내용을 노출 get(표시 O), post(표시 X)
- <input> placeholder = ? - 기본값을 지정
- <article> - 내용을 독립적으로 뉴스,블로그와 같이 표현할 때 사용하는 태그
- <table> - 표를 만드는 태그
- <table> - 표를 만드는 태그
- <thead> - 테이블 제목 를 적는 큰 틀
- <tbody> - 테이블 내용 를 적는 큰 틀
- <tr> - 표 가로줄
- <th> - 열 제목
- <td> - 데이터
- 선택자 > - 자식 선택자로 하위 태그를 지정
- transition : all ?s - 모든 변화를 ?s에 거쳐서 진행, 상위 태그에 설정
- :hover - 마우스 커서가 요소 위에 올라가 있을 때
- 응용 - A:hover B -> A요소 위을 올렸을 때 B가 보이게 설정
- nth-child(n) - 부모 요소의 모든 자식의 n번째 요소
- nth-of-type(n) - 부모 요소의 특정 자식의 n번째 요소
'HTML > HTML' 카테고리의 다른 글
반응형 웹 만들기_02 (0) | 2022.08.03 |
---|---|
구글 맵 만들기 (0) | 2022.07.27 |