Web/CSS8 [CSS] a 태그 (tag) 관련 a tag는 anchor(닻)의 약어 속성(attributes) target self: 현재 창 _blank: 새 창 ( 새 탭 ) href 클릭시 이동 할 URL(Uniform Resource Locator)을 입력 받는 속성입니다. a:link: 링크 방문 전 a:visited: 링크 방문 후 a:hover : 링크 마우스 오버 a:active : 링크 클릭 a 태그 밑줄 제거 a { text-decoration: none; } 2023. 10. 9. [CSS] 선택자 참조 (Selector Reference) - class 편 쉼표 ( , ) .class1, .class2, .class3 class1, class2, class3 모두 스타일이 적용됩니다. (OR 조건) class1 class2 class3 결과 띄어쓰기 (공백) .class1 .class2 .class3 class1 하위 class2 하위 class3에만 스타일이 적용됩니다. class1 class2 class3 결과 붙여쓰기 (공백없이) .class1.class2.class3 "class1 class2 class3"에만 스타일이 적용됩니다. (AND 조건) class1 class2 class3 결과 Reference https://www.w3schools.com/cssref/css_selectors.php CSS Selectors Reference W3Sch.. 2023. 9. 19. [CSS] table td tr 간격 추가하기 tr 태그에는 magin 속성이 적용이 되지 않습니다. border-spacing 단일 단일로 적용을 할 경우 가로, 세로 여백 둘 다 적용됩니다. /* */ border-spacing: 2px; border-spacing 이중 단일로 적용을 할 경우 가로, 세로 여백 따로 적용됩니다. /* 가로 horizontal | 세로 vertical */ border-spacing: 1cm 2em; border-spacing 글로벌 벨류스 /* Global values */ border-spacing: inherit; border-spacing: initial; border-spacing: revert; border-spacing: revert-layer; border-spacing: unset; 참조 [MDN .. 2023. 6. 20. [CSS] div 위아래 수직정렬 1. flex .parent { display: flex; align-items: center; } See the Pen Untitled by Park, Chungman (@pcm9881) on CodePen. 2023. 3. 30. [CSS] 리스트 스타일링 ( ul, li ) 1. 전체 스타일 지우기 See the Pen Untitled by Park, Chungman (@pcm9881) on CodePen. 2. 리스트 이미지 list-style-image 속성을 사용해서 svg icon을 넣을 수 있습니다. See the Pen Untitled by Park, Chungman (@pcm9881) on CodePen. 2023. 3. 23. [CSS] 알아두면 좋은 참조 사이트 CSS 교육 1. 오프코스 HTML, CSS, Javascript 관련 정보들은 모아놓은 사이트. https://ofcourse.kr/ ofcourse Learn Simply. 꼭 필요한 정보만 모아놓았어요 간단하게 배우세요 ofcourse.kr 색상 패턴 관련 1. 컬러헌트 https://colorhunt.co/ Color Palettes for Designers and Artists - Color Hunt Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects. colorhunt.co 2. 파레트 쉬코드스 https://palettes.shecode.. 2022. 12. 29. [CSS] 미디어 쿼리 (media query) 1. 미디어 타입 (media type) - all: 모든 미디어에 사용합니다. - print: 문서를 인쇄하거나 화면에 미리보기를 표시할 때 사용합니다. - screen: 테스크톱 모니터 화면 문서표시 할 때 사용합니다. (웹 브라우저는 모두 여기 해당) 2. 미디어 서술자 (media descriptor) - 논리 키워드 1. and: 모든 조건이 만족해야만 적용됩니다. ( 예: (color) and (max-width: 800px) ) 2. not: 모든 조건이 맞으면 적용됩니다. ( 예: not (color) and (max-width: 800px) ) 3. only: 미디어 쿼리를 이해하지 못하는 브라우저가 stylesheet를 사용하지 않게합니다. -그 외 width, min-width, ma.. 2022. 9. 26. CSS 밑줄( _, underscore) 또는 빼기(-,hyphen) 의미 1. 밑줄 ( _ , underscore) css 예제를 보다보면 가끔 기존 제공되는 속성 이름 앞에 _이 붙어있는걸 볼 수 있다. 궁금해서 관련 내용을 검색해보니 이것은 과거 IE 버전 (5, 5.5 & 6)에서 지원하지 않는 내용을 사용하기 위해 작성해놓는 CSS-Hack이라고 찾아 볼 수 있었다. 아래에 예제 처럼 기본적으로 제공되는게 있고 제공이 안되는 브라우저 내용으로 쓰는 건데 지금은 거의 상관없다고 보면 될 거 같다. 이런게 있구나 참고용 자료. selector { property: value; /* all browsers */ property: value\9; /* < IE9 */ *property: value; /* < IE8 */ _property: value; /* < IE7 */ }.. 2022. 9. 1. 이전 1 다음
