반응형 웹 만들기_01

https://github.com/1997MJ/ResponsiveWebPra_01

GitHub - 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번째 요소