[카테고리:] HTML/CSS

CSS box-shadow

html <img src="https://kit.svelte.dev/_app/immutable/assets/svelte-logo.5c5d7d20.svg" style="width:300px"> css img { border:solid 1px gray; box-shadow: rgba(0,0,0,0.1) 3px 5px 7px; /*black의 0.1%로 우측:3px, 하단:5px 번짐:7px */ }

CSS flex 간단 정리

컨테이너 관련 display: flex/inline-flex - 기본설정flex-direction: row/row-reverse/column/column-reverse - 출력방향: row ▶,column ▼flex-wrap: nowap/wrap/wrap-reverse - overflow 관련(nowrap:hidden)justify-content: flex-start/flex-end/center/space-between/space-around/space-evenly - 가로축 정렬align-items: stretch/flex-start/flex-end/center/baseline - 세로측 정렬align-content: stretch/flex-start/flex-end/center/space-between/space-round/space-evenly - display:wrap(개행) 상태에서 여러줄 아이템들 세로축 정렬 아이템 관련 flex-grow: 0:본래크기 유지, 1:컨테이너 크기에 맞춘다 - 확장크기 flex-shrink: 0:본래크기 유지, 1:컨테이너 크기에 맞춘다 - 축소크기 flex-basis: (숫자, px, %, em … 계속 읽기 CSS flex 간단 정리

CSS 문장 2번째 문장부터 들여쓰기

CSS .indent { padding:3em; text-indent:-3em; } HTML <div class="indent"> 제 6 조 (자격과 범위) 조합원은 노동조합 및 노동관계조정법 제2조 규정에 의한 "사용자"(사업주, 사업의 경영담당자 또는 그 사업의 근로자에 관한 사항에 대하여 사업주를 위하여 행동하는자)을 제외한 회사의 종업원으로서 소정의 조합가입절차를 필 한자로 한다. </div> 결과물 제 6 조 (자격과 범위) 조합원은 노동조합 및 노동관계조정법 제2조 규정에 … 계속 읽기 CSS 문장 2번째 문장부터 들여쓰기

캡처링 버블링의 이해

아래와 같이 모든 DOM요소(엘리먼트)의 최종 자식인 <p>P</p>의 click 이벤트를 발생시 캡쳐링 발생: html > body > form > div > p, 직후 버블링 발생: p > div > form > body > html 다시말해서 이벤트가 전파되는 순서를 의미한다. 캡처링(Capturing) : Dom 요소 최상위에서 event.target 까지 도달할 때 까지 내려가는(찾아 들어가는) 과정 버블링(Bubbling): event.target까지 도달했다가 다시 … 계속 읽기 캡처링 버블링의 이해

가로형 탭메뉴 예제

이 번엔 HTML과 CSS만으로 가로형 탭메뉴를 만들어 보자.이게 참... 별 것 아닌 것 같지만, 막상 어디서 라이브러리 같은 것 찾아서 가져다 쓰려면 되게 귀찮드라.그래서 만들어 보았다. ul, li 와 CSS만으로 만든 가로형 TabMenu HTML 이 것 보다 더 간단할 수는 없겠지? 하지만... 기본적으로 ul을 감싸고 있는 부모엘리먼트(div)의 position 속성값은 반드시 relative 이기를 바란다. <div id="aabooTab" … 계속 읽기 가로형 탭메뉴 예제

Shadow Dom(HTML 코드 숨기기)

유튜브 "코딩애플"님의 강좌를 정리하였습니다. HTML <div id="mordor"></div> JAVASCRIPT document.querySelector('#mordor').attachShadow({mode:'open'}); document.querySelector('#mordor').shadowRoot.innerHTML=` <p>심연에서 왔도다</p> `; 위 화면의 결과를 개발자도구에서 확인하면, <div id="mordor"></div> 만보이고, '심연에서 왔도다'는 안보여진다. 그냥 개발자가 멋있어 보일려고 이런 코드를 작성한다고 하는데, 보이게 하려면 개발자도구 설정에서 ShadowDom을 활성화 시키면 된다. 사용자정의 엘리먼트 작성 방법 우선 아래와 같이 작성을 하면 <custom-input/> 이라는 새로운 엘리먼트를 클래스화하여 사용할 … 계속 읽기 Shadow Dom(HTML 코드 숨기기)

HTML5 소리 재생

출처: http://m.mkexdev.net/63 HTML <button id="btnWsAudio">재생</button> JAVASCRIPT var wsAudio = null , wsAudio_didUserStop = false , wsAudio_isLoaded = false , soundBook = [ "combat_music.mp3" , "Death_Note_OST.mp3" , "Game_of_Thrones_OST.mp3" , "Harlem_Shake-Washing_Machine.mp3" , "Pacific_Rim_OST.mp3" ] , soundRandomChoosed = soundBook[Math.floor(Math.random()*(soundBook.length))] ; function wsSetup(){ wsAudio = new Audio(); //wsAudio = document.getElementById("wsAudio"); wsAudio.src = '/soundEffect/'+soundRandomChoosed; wsAudio.preload = true; //wsAudio.autoplay = true; … 계속 읽기 HTML5 소리 재생

CSS DIV 위치를 화면 정가운데로 맞추기

.centerBox{ position:absolute; top:50%; left:50%; margin-right:50%; transform: translate(-50%, -50%) } 하지만 위의 방법은 transform이 크로스브라우저에 취약하기 때문에 사용하기가 조금 곤란하다.아래처럼 하기를 권장한다. .centerBox{ position:absolute; width:400px; height:600px; top:50%; left:50%; margin:-300px 0 0 -200px; /*(위 오른쪽 아래 왼쪽 순)*/ } margin을 눈여겨 볼 필요가 있다.오브젝트(0,0)기준의 위치를 화면의 50%로 이동시켜준 후에, 다시 오브젝트 width와 height의 1/2 넓이로 margin이동 역이동 … 계속 읽기 CSS DIV 위치를 화면 정가운데로 맞추기