투어리스트 만들기 프로젝트 모르는 속성 정리 링크

 

강사님 구글 드라이브 링크 : https://mail.google.com/mail/u/0/?tab=rm&ogbl#starred/FMfcgxwLtQTbqFhwSglLVBxdKHHnHzMW 

내 홈페이지 링크 : http://ugy612t.dothome.co.kr/

 

웹 접근성을 위한 skipnavi :  https://nuli.navercorp.com/community/article/1132804 

::after https://developer.mozilla.org/ko/docs/Web/CSS/::after

 

https://developer.mozilla.org/ko/docs/Web/CSS/Reference

CSS 참고서 - CSS: Cascading Style Sheets | MDN

 

https://fonts.google.com/icons

Google Fonts

---

텍스트  -  text-align : 

---

/* 키워드 값 */

• text-align: left; 왼쪽 정렬
• text-align: right; 오른쪽 정렬
• text-align: center; 가운데 정렬
• text-align: justify;  양쪽 정렬
• text-align: justify-all; 전체 양쪽 정렬
• text-align: start; 왼쪽 정렬
• text-align: end;  오른쪽 정렬
• text-align: match-parent;  

/* 표 열의 문자 기반 정렬 */

• text-align: ".";
• text-align: "." center;

/* 블록 정렬 값 (비표준 구문) */

• text-align: -moz-center;
• text-align: -webkit-center;

/* 전역 값 */

• text-align: inherit; / 상속
• text-align: initial; / 초기값(기본값)
• text-align: unset; / 부모로부터 상속할 값이 존재하면 상속값을, 그렇지 않다면 초깃값을 사용 전자일 땐 inherit 키워드처럼, 후자일 땐 initial 키워드처럼 동작

 

자동 줄바꿈 - word-wrap: break-word; 

 

/* 키워드 값 */

• word-break: normal;  / 기본 줄 바꿈
• word-break: break-all;  / 오버플로를 방지 (한중일 텍스트 제외)
• word-break: keep-all;  / break 기능 없음
• word-break: break-word;  / word-break: normal과 overflow-wrap: anywhere를 설정한 것과 같은 효과

/* 사용 안함 */

/* 전역 값 */

• word-break: inherit; / 상속
• word-break: initial; / 초기값(기본값)
• word-break: unset; / 부모로부터 상속할 값이 존재하면 상속값을, 그렇지 않다면 초깃값을 사용 전자일 땐 inherit 키워드처럼, 후자일 땐 initial 키워드처럼 동작

 

텍스트 생략 :  text-overflow: ellipsis; 

 

 

white-space: nowrap; 

white-space: normal; https://developer.mozilla.org/ko/docs/Web/CSS/white-space

letter-spacing: -1px; https://developer.mozilla.org/ko/docs/Web/CSS/letter-spacing

text-decoration: none; https://developer.mozilla.org/ko/docs/Web/CSS/text-decoration

border: none; https://developer.mozilla.org/ko/docs/Web/CSS/border

overflow: hidden;  https://developer.mozilla.org/ko/docs/Web/CSS/overflow

visibility: hidden; https://developer.mozilla.org/ko/docs/Web/CSS/visibility

text-indent: -9999px;

text-indent 속성

text-indent 속성은 단락의 첫 줄에 들여쓰기할지 안 할지를 설정합니다.

웹 페이지에서 단락은 기본적으로 들여쓰기가 설정되어 있지 않습니다.

---

리스트

border-collapse: collapse; https://developer.mozilla.org/ko/docs/Web/CSS/border-collapse

border-spacing: 0; https://developer.mozilla.org/ko/docs/Web/CSS/border-spacing

list-style: none; https://developer.mozilla.org/en-US/docs/Web/CSS/list-style

---

문단

float: right; https://developer.mozilla.org/ko/docs/Web/CSS/float

display: block; https://ofcourse.kr/css-course/display-%EC%86%8D%EC%84%B1

line-height: 20px; https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

white-space: nowrap; https://developer.mozilla.org/ko/docs/Web/CSS/white-space

---

영역

margin: 0;  https://developer.mozilla.org/ko/docs/Web/CSS/margin

padding: 0; https://developer.mozilla.org/ko/docs/Web/CSS/padding

• padding-bottom: 40px; https://developer.mozilla.org/ko/docs/Web/CSS/padding-bottom
• padding-top: 25px; https://developer.mozilla.org/ko/docs/Web/CSS/padding-top

---

박스

border: none; https://developer.mozilla.org/ko/docs/Web/CSS/border

• border-top: 1px solid #ddd; https://developer.mozilla.org/ko/docs/Web/CSS/border-top

z-index: 999; https://developer.mozilla.org/ko/docs/Web/CSS/z-index

box-sizing: border-box; https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing

---

이미지

vertical-align: middle;  https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align

background:url(../images/bg_checkbox.png) no-repeat 0 0; 

• https://developer.mozilla.org/ko/docs/Web/CSS/background-repeat

background-size: 20px; https://developer.mozilla.org/ko/docs/Web/CSS/background-size

background-position: 0 -20px;

• https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

url(../images/ico_bullet.png) no-repeat 0 50%;  ( 0_가로정렬 50_세로정렬 ) 

 

---

배치

position: absolute; https://developer.mozilla.org/ko/docs/Web/CSS/position

---

반응형

cursor: pointer; https://developer.mozilla.org/ko/docs/Web/CSS/cursor