html_css6

• 

  display:flex, position:relative tistory 글 작성 단축키 Ctrl + i block 속성을 inline-block 으로 변경하거나, div 에 float 속성 등. 여러가지 편법 같은 스킬들이 많아졌다. flex, relative 이런 것들을 전체적으로 이해하기 위해서는 먼저 구조를 잡아야 한다. 1. display: inline / block / inline-block / flex / grid 1. 요소는 display 속성이 있다. 화면에 어떻게 표현될지. ( display: none, inline, block, inline-block, flex, grid ) 이하 html 을 구성하는 요소들은 inline이나 block 속성을 갖고 있다. inline 속성은 '안녕하세요' 같은 텍스트나 이미지 등 block 은 텍스트나 이미.. html_css 2023. 1. 12.

• 

  css 가상 선택자: 형제 + ~, a[href^="http"] 등 1. * : 자식 요소 전체 : 테스트용도. 브라우저 과부하 * { margin: 0; padding: 0; } 별표는 페이지에 있는 전체 요소를 대상으로 합니다. 많은 개발자가 margin과 padding 값을 0으로 세팅하려고 이 선택자를 사용합니다. 간단한 테스트 용도로서는 괜찮습니다. 그러나, 저는 여러분에게 이 별표를 실전에서 사용하지 말라고 권합니다. 브라우저에 과부하가 걸리고, 사용하기에 적절하지 않습니다. #container * { border: 1px solid black; } 이 코드는 #container div의 자식 요소 전체를 대상으로 합니다. 한 번 더 말하지만, 이 선택자를 과다하게 사용하지 마세요. 2. #container 사용은 최소화(←가상클래스). 웬만하면 클래스로 #c.. html_css 2023. 1. 9.

• 

  html에 data-*사용법 오디오 플레이어를 구현해보다가, 어떤 버튼을 조작하는지 헷갈리기 시작. js 로 조작한 버튼을 알려줄려니, onClick 시, 버튼의 id 를 넘겨주면 되겠다 싶었다. 일반 function을 쓰면, this는 window를 가리키기 때메, 화살표 함수로. 언젠가 본듯한 dataset 속성을 이용하면, js 에서 음원을 조절할 수 있겠다 싶어서, dataset을 해봤는데, 그냥 되네? -_-; 역시, js 는 그냥 갖고 놀아봐야혀. id : this.id class : this.className data-속성 : this.dataset.value 그래서, btnPlayFunc(this.dataset.value) 이제, js 에서 음원을 배열에 담아 놓고, 랜덤플레이나 재생 곡, 순서등을 설정할 수 있겠네?.. html_css 2023. 1. 6.

• css 하이라이트 hover , z-index, transition css로 밑줄을 넣는 방법은 크게 두가지이다. 사람들은 희망보다는 절망에 더 익숙하다. 그래서 대개는 희망적인 메시지보다는 부정적인 메시지에 훨씬 쉽게 그리고 즉각적으로 반응한다. 1. box-shadow span class="highlight" 긴 글, 그리고 반응형이여서 글이 밑으로 떨어질 수 있는 경우에 적합한 방법이다. /* span 내 적용*/ .highlight{ display: inline; box-shadow: inset 0 -10px 0 #D9FCDB; /*-10px은 highlight의 두께*/ } 원하는 부분에 span으로 감싸 highlight 클래스 적용 :after 형식 제목글이나 짧은 문구에 highlight를 할때 유용하다. .highlight:after{ content:"".. html_css 2022. 11. 7.

• 

  스벅 예제: css 포지션, 애니메이션, JS 스크롤 이벤트 코딩 알려주는 누나. css 포지션, z-index css 애니메이션 js 스크롤 이벤트 html PICK YOUR FAVORITE css body { margin: 0; height: 2000px; /* position: fixed; */ } section { height: 800px; /* 아무것도 없으면, 백그라운드 이미지 표시 안됨 */ background: url("images/fav_prod_bg_new.jpg") fixed; } .photo { position: absolute; top: 100px; right: 100px; } /* h1 width 속성! */ h1 { font-size: 6em; width:258px; color:white; font-family: sans-serif; p.. html_css 2022. 11. 6.

• display: inline-block, 가로 정렬 flex, grid https://www.youtube.com/watch?v=6KwQo8oqb7Y&list=PLpJDjPqxGWGp3Pitou_dT_DeEIPK_aPxo&index=4 Tip 메뉴1 메뉴2 메뉴3 메뉴4 1) display:inline inline 은 넓이, 높이 속성이 없다. .menus > li { display: inline; /* li 블록을 inline으로. w,h 안먹힘*/ width: 3200px; height: 100px; } 2) float: left; 수직 맞추기가 어렵다. 3) display: flex; (추천) 부모 클래스 ul 에 주면, 자식 정렬. 수직은 align-items: center; 수평 간격은 justify-content 4) display: grid /* display:.. html_css 2022. 11. 2.