html8

• [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 선택자 이해 화면 개발하면서 늘 헷갈리는 CSS .class ul : class 라는 class 의 모든 ul 하위 선택자에 적용.class > ul : class 라는 class 의 바로 아래 자식 ul 선택자만 적용 1. CSS 명시도(Specificity) 계산법!important > id [ 100 ] > class [ 10 ] > tag [ 1 ] > * [ 0 ] !important선언을 사용한 형식이 가장 우선 순위가 높습니다. 그래서 다른 선언들을 덮어버릴 수 있기 때문에 꼭 필요한 곳에만 사용해야 합니다.이를 제외한 나머지 선택자는 대괄호 "[]"안에 있는 숫자를 각각의 점수로 부여하여 우선순위를 계산합니다.ID 선택자의 갯수를 세어서 개당 100 으로 계산합니다. (= a)클래스 선택자의 갯수를 세.. 프론트앤드 이야기/CSS 2018. 9. 26.

• [html5] HTML5 테그 * header : 테그 안에는 적어도 한개의 제목()이 들어 있어야 하며, section, header, footer 요소는 절대 들어갈 수 없다.nav 요소도 일종의 section 이므로 header 안에 들어갈 수 없습니다. * section : 요소안에는 header, footer를 넣을 수 있으며, body에 들어갈 수 있는 모든 요소를 넣을 수 있다. 프론트앤드 이야기/HTML 2018. 9. 26.

• 

  [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.

• [HTML]간략한 상단 탭 만들기 HTML How to develop a tab menu with jQuery 제작자 : 박경두 고려대학교 경영정보학과 멋쟁이 사자처럼 4기 About Portfolio Contact Travel About Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuri.. 프론트앤드 이야기/UI 2018. 4. 24.