css5

• [HTML] Layer popup + dimmed 처리 소스 아래 소스는 직접 사용중인 소스입니다.붙이셔서 마음대로 사용하셔도 괜찮습니다 ^^ .layer2 { position: fixed; _position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; } .layer2 .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .5; filter: alpha(opacity=50); } .layer2 .pop-layer2 { display: block; } .pop-layer2 { display: none; position: absolute; top: 15%; left: 3.. 프론트앤드 이야기/HTML 2019. 4. 18.

• 

  [CSS] CSS 적용 순서 ID > class > 선택자 순이 기본요소에 inline 으로 명시된 스타일이 가장 우선순위가 높으며예외적으로 important 속성으로 정의된 것이 모든것을 무효화하며 적용순위가 제일 높다. 출처 : http://webberstudy.com/html-css/css-2/multiple-style-sheet-and-priority-order/ 프론트앤드 이야기/CSS 2018. 9. 24.

• [HTML] 추석!! 블록 요소 vs 인라인 요 바로 전 태그 설명은 이정도 리마인드 하기로하였고, 이번 포스팅에서는 inline 태그와 block 태그 이해와, 특징들을 다시한번 리마인드 하도록 하겠습니다. 블록 요소와 인라인 요소의 특징으로는 줄빠꿈 처리가 되느냐, 안되느냐의 차이가 있으며, 더 디테일한 특징은 아래 포스팅에서 확인 ~ 1. 블록 요소블록 요소는 또 다른 블록 요소와, 인라인 요소를 포함할 수 있으며, 기본속성으로 가로폭이 화면의 전체를 차지합니다. 또한 블록요소가 종료된 시점에서는 줄바꿈 처리가 되는것이 특징 ~ 블록요소 종류* div, dl, dd, dt, form, h1 ~ h6, ol, ul, pre, table* html5 태그 * section, header, footer 등* 블록 요소엔 명시적으로 width, heig.. 프론트앤드 이야기/HTML 2018. 9. 24.

• [HTML] 추석!! HTML 태그 정리 오늘은 추석 당일이다. 몇년 전부터 제사를 안하기로해서 나는 특별한 일 없으면 집에서 쉰다. 그래서 오늘은 그동안 잊고 있었던 책을 다시 처음부터 쓱 보면서 리마인드 하기로 결정 ~ (다른 공부가 더 시급.. ㅠ_ㅠ) 1. html 문서의 기본 요소 //컨텐츠 영역컨텐츠 입니다. 2. html 태그 설명(heading)* 1 ~ 6 까지 총 6단계의 속성이 있으며, 단락의 제목을 정의하는데 주로 쓰인다. (paragraph)* 문서의 단락을 나눌 때 사용하며, 위의 h 테그와 같이 이용하기 좋다. (division)* 문서의 단락을 나눌 때 p 테그를 이용했다면 div 테그는 그 모든것을 담고있는, 영역을 나눌 때 주로한다.* 물론 div 영역 안에서도 여러 영역으로 나누어 사용할 수 있다.* 제목입니다.. 프론트앤드 이야기/HTML 2018. 9. 24.

• [HTML] 오버랩 사이드 메뉴 만들기 side_navigation /* 사이드바 스타일 */ .sidenav { height:100%; width: 0; position: fixed; z-index:1; top: 0; left: 0; background-color: rgb(0,154,200); overflow-x: hidden; transition:0.5s ease-in-out; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #fff; display: block; transition: 0.2s ease-in-out; } .sidenav a:hover, .offcanvas a:focus { colo.. 프론트앤드 이야기/UI 2018. 4. 24.