방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com CSS13 [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. 타입스크립트 데코레이터(Typescript Decorator) 타입스크립트를 활용하여 만나보는 데코레이터(Decorator) 입니다. 앵귤러(Angular)를 활용하여 개발을 하다 보면 자주 만나는 기능이라 사실 앵귤러 환경에서만 지원되는 기능이라 생각 했었는데 타입스크립트에서 지원하는 기능인 줄 몰랐었습니다. 이래서 사람은 역시 공부를 깊게 해야되는가 봅니다.. * 기본적인 타입스크립트 개발환경을 알아야 합니다. 데코레이터는 자바의 에노테이션과 비슷한 느낌이 드는 기능으로, 데코레이터가 붙은 클래스, 메소드(함수) 및 변수 등에 데코레이터에서 정의된 기능이 동작하는 것을 의미 합니다. 아래 클래스 형태의 데코레이터가 적용 된 타입스크립트 코드를 살펴 보겠습니다. * 클래스에 적용하기, 파일 이름 : index.ts function whoAmI(target : Fu.. 2021. 7. 5. 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. 이전 1 2 3 다음
