a태그 속성의 종류 <a href="">
| download | 사용자가 링크를 클릭할 때 파일을 다운받도록 해주는 속성 |
| href | 링크가 이동되는 페이지의 URL(주소)를 지정하는 속성 (기본속성-꼭쓰기) |
| hrefang | 링크된 문서의 언어를 지정하는 속성 |
| media | 링크된 문서가 최적화된 미디어/장치를 지정하는 속성 |
| ping | 링크를 따라갈때 본문 핑이 포함된 게시 요청이 브라우저에 의해 전송될 url의 공백으로 구분된 목록을 지정(일반적으로 추적에 사용) |
| referrerpolicy | 링크와 함께 보낼 리퍼러정보를 지정하는 속성 |
| rel | 현재 문서와 링크된 문서간의 관계를 지정 |
| target | 연결된 문서를 열 위치를 지정 (_blank, _self, _top, _parent등) title="싸이트명" |
| type | 연결된 문서의 미디어 유형을 지정 |
CSS text 속성의 종류
| text-align | 요소에 있는 텍스트의 수평 정렬을 지정 |
| text-align-last | 텍스트의 마지막 줄을 정렬하는 방법을 지정 |
| text-decoration | 텍스트에 추가되는 장식을 지정 |
| text-indent | 텍스트 블록에서 첫번째 줄의 들여쓰기를 지정 |
| text-justify | text-align이 "justify로 설정된 경우 텍스트의 양쪽 맞춤 방법을 지정 |
| text-overflow | 표시되지 않는 오버플로우 콘텐츠가 사용자에게 어떻게 표시되어야 하는지를 지정 |
| text-shadow | 텍스트에 그림자 추가 |
| text-transform | 영문 텍스트의 대소문자 제어 |
| html에 css 파일 불러오기 | <link rel="stylesheet" href=" 파일명.css"> |
| 반응형 이미지 만들기 | top { max-width: 100%; height: auto; } |
| 미디어쿼리 주요 속성 참고 동영상: https://www.youtube.com/watch?v=uBrsPwzIZR0 |
@media screen and (min-width: 768px) { 768px 이상 화면에 적용될 스타일 } |
| @media screen and (max-width: 767px) { 767px 이하 화면에 적용될 스타일 } | |
| min-height (지정된 높이 이상일 때) | |
| max-height: (지정된 높이 이하일 때) | |
| height: (지정된 높이와 정확히 일치할 때) | |
| max-resolution: 최대 해상도 이하일 때 적용 / resolution: 정확한 해상도 | |
| @media (pointer: coarse) { 터치스크린 등 덜 정밀한 포인팅 장치에 적용될 스타일 } | |
| @media screen and (orientation: landscape) {가로 모드일 때 적용될 스타일 } | |
| @media screen and (min-resolution: 2dppx) {레티나 디스플레이 등 고해상도 화면에 적용 } | |
| @media (hover: none) { 호버 기능이 없는 장치에 적용될 스타일 } pointer: fine: 마우스와 같이 정밀한 포인팅 장치 pointer: coarse: 터치 스크린처럼 덜 정밀한 포인팅 장치 pointer: none: 포인팅 장치가 없는 경우 |
flexbox(flex)
| .flex_container{ display: flex } | .flex_container { display: flex; flex-direction: column; height: 100%; } .flex_item { flex: 1; /* flex: 1 1 0 */ overflow: auto; } |
| -flex container 속성 : flex-direction, flex-wrap, justify-content, align-items, align-center -flex item 속성 : flex, flex-grow, flex-shrink, flex-basis, order |
|
| header와 nav의 높이는 고정되어 있고, 좌측의 메뉴 영역을 뺀 나머지 영역 전체를 자식 요소가 채우는 레이아웃 | .flex_container { display: flex; flex-direction: column; height: 100%; } .flex_item { flex: 1; /* flex: 1 1 0 */ overflow: auto; } |