방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Style10 [Html css Flex] style flex 내용 압축 정리 #1. 부모에 적용하는 기능 1. 자식 노드를 정렬하는 방법 입니다. { display: flex; /* 가장 기본 of 기본 */ /* row는 1줄에 전부, column은 1개가 1줄 차지 */ flex-direction: row; flex-direction: column; flex-direction: row-reverse; flex-direction: column-reverse; } 2. 자식 노드 크기가 부모보다 클 경우 어떻게 표현할지 정하는 기능 입니다. { /* wrap은 넘어가면 다음 행으로, nowarp은 넘어가든 말든, reverse가 붙으면 역으로 표현 */ flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; } 3. 위 1번과.. 2023. 3. 30. Html css Position (relative, fixed, absolute, sticky) 1. static : 지금 위치에 그대로 위치 시킨다. (기본적인 값) div { position: static; } 2. relative : 관계의 형태, 다른 테그의 posotion 속성에 영향을 받는다. div { position: relative; left: 30px; } 3, fixed : 위치를 고정시킨다. (지정한 위치에서 안움직인다) div{ position: fixed; bottom: 0; right: 0; } 4. absolute : 절대위치, 지정한 위치에 표시한다. 만약 relative한 영역이 존재하면 해당 영역 안에서만 움직인다. div{ position: absolute; top: 80px; right: 0; } 5. sticky : relative처럼 동작하면서 위치가 fix.. 2019. 7. 18. Html CSS Display 1. Inline (텍스트 효과, 내부의 내용에 따라 넓이 높이가 정해진다. 텍스트처럼 여러 테그가 나란히 정렬 된다.) div { display: inline; } 2. block (블럭효과, 지정한 크기로 넓이 높이가 정해지며 고유영역을 갖는다.) div { display: block; } 3. inline-block(1번과 2번의 효과를 지닌 스타일.) div { display: inline-block; } 4. none (가리기효과, 해당 테그를 가린다.) div { display: none; } 2019. 7. 14. Html css Table 1. 테이블 외곽선 table, th, td { border: 1px solid black; } 2. 캘럽스 테이블 외곽선(외곽선 두깨를 1줄로) table { border-collapse: collapse; } table, th, td { border: 1px solid black; } 3. 테이블 높이, 넓이 table { width: 100%; } th { height: 50px; } 4. 텍스트 정렬 th { text-align: left; text-align: center; text-align: right; } 5. 테이블 영역에서의 정렬 td { vertical-align: middle; /*영역에서 중앙*/ vertical-align: top; /*영역에서 위쪽으로 */ vertical-al.. 2019. 7. 12. Html css Font 1. 폰트 적용 대상 { font-family: "Times New Roman", Times, serif; } 2. 폰트 스타일 div { font-style: normal; } div { font-style: italic; } div { font-style: oblique; } 3. 폰트 크기(픽셀) div { font-size: 20px; } 4. 폰트 크기(픽셀 대신 em) div { font-size: 2.5em; /* 40px/16=2.5em */ } 5. 폰트 크기(퍼센트, 엘리먼트 크기에 비래) div { font-size: 100%; } 6. 폰트 굵기 div { font-weight: normal; /*일반*/ } div { font-weight: bold; /*굵게*/ } 7. 대소문자.. 2019. 7. 9. Html css Text 1. 텍스트 칼라 대상 { color: 색상; } * 색상 코드 https://htmlcolorcodes.com/ 2. 텍스트 정렬 div { text-align: center; /*중앙*/ } div { text-align: left; /*왼쪽*/ } div { text-align: right; /*오른쪽*/ } 3. 텍스트 균등 분배 div { text-align: justify; } 4. 꾸밈 없음 div { text-decoration: none; } 5. 텍스트 상단, 중앙, 하단 선 div { text-decoration: overline;/*위에 선*/ } div { text-decoration: line-through;/*중앙에 선*/ } div { text-decoration: under.. 2019. 7. 8. 이전 1 2 다음
