Web12 [Web] 온라인 코드 에디터 제이에스피들 ( JSFiddle ) https://jsfiddle.net/ JSFiddle - Code Playground jsfiddle.net 코드펜 ( CodePen ) https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 코드샌드박스 ( CodeSandBox ) https://codesandbox.io/ CodeSandbox: Instant Cloud-Based IDE CodeSandbo.. 2023. 10. 12. [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. [Web] manifest.json manifest.json 파일은 웹앱 메타정보를 작성하는 파일입니다. short_name: 화면 아이콘 이름으로 사용합니다. (12자를 넘으면 잘려서 보일 수 있습니다.) name: 애플리케이션 이름입니다. icons: 홈 화면에 표시되는 이미지입니다. start_url: 웹앱이 시작되는 URL 주소입니다. display: 디스플레이 유형 - fullscreen: 전체 화면으로 표시합니다. - standalone: 독자적인 애플리케이션으로 보여지게 구성됩니다. - minimal-ui: 'standalon'과 유사하지만 최소한의 내비게이션 UI를 제공합니다. - browser: 기존 브라우저 탭이나 새로운 창을 띄워서 표시합니다. theme_color: 애플리케이션의 기본 테마 색상입니다. backgrou.. 2023. 9. 14. [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. [HTML] 공백 삽입 ( ) None-Braking Space HTML에서는 스페이스는 1번만 인식하기 때문에 추가로 공백을 삽입하고 싶으면 HTML Entity를 사용해야합니다. See the Pen Untitled by Park, Chungman (@pcm9881) on CodePen. 참조 [HTML Entities]: https://www.w3schools.com/html/html_entities.asp HTML Entities W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQ.. 2023. 4. 1. [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. [HTML] HTML 파일 이름 규칙 (HTML File Naming Rules) HTML 파일을 만들 때마다 파일이름을 어떤식으로 지어야 할지 고민 하는 경우가 있었을 겁니다. HTML 파일은 URL일부로 사용되는 경우가 있습니다. (과거에는 빈번했지만 요즘 개발 할때는 거의 필요 없음.) 그래서 URL 규칙을 따라간다고 보시면 됩니다. 1. 특수 문자를 사용하지마세요. 문자, 숫자, 하이픈(-), 밑줄(_), 마침표(.)만 사용 가능합니다. 그 외에는 사용하면 제대로 인식 안될 수 있습니다. 2. 공백을 사용하지 마세요. 만약 공백을 이용하려면 브라우저에서는 더하기(+) 기호나 %20으로 인코딩해야 합니다. 3. 문자로 파일 이름을 시작하세요. 반드시 해야하는 것은 아니지만 의도한 대로 실행이 안되는 경우가 발생 할 수 있습니다. 4. 모두 소문자 사용 3번과 마찬가지로 필수는 아.. 2023. 1. 7. [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 다음
