주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

글 작성 당시 웹, 모바일 모두 해당하는 사항이었습니다. 이게 정상적인 모습인데, 사파리에서만 확인이 되는 부분이었습니다. 아래와 같이 라운드처리가 된 부분이 가려지지 않고 튀어나와있습니다. border-radius가 적용된 부분이 overflow:hidden이 안되는 모습입니다. css 적용 사항입니다. 첫번째로 든 의심은 특정 가상 선택자의 버그인가 생각이 들어서 :before -> :after로 변경해봤습니다. (X) 하위 엘리먼트의 가상선택자로도 변경해봤습니다. (X) 두번째는 가상선택자 버그인가 싶어서 태그로 변경했습니다. (X) 세번째는 border-radius를 다른 객체들에게도 줘봤습니다. (X) 네번째로 position:absolute를 relative로 변경했습니다.(X) 결론은 모두 ..

아이프레임은 HTML Inline Frame 요소이며 inline frame의 약자이다. " 효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로 iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입 할 수 있다. " HTML // 문법 // 예시 유튜브 iframe API 사용 예제 iframe을 지원하지 않는 브라우저입니다. noframes 요소는 해당 브라우저가 iframe 요소를 지원하지 않을 때 보여지는 문자열을 저장합니다. iframe 속성 - src : 삽입 할 홈페이지 url - name : 프레임 이름 - width : 프레임 가로 너비 - height : 프레임 세로 길이 - frameborder : 프레임 테두리 선 (..

조건부 주석이란? HTML을 이용해 웹 사이트를 마크업할 때에 크로스 브라우징을 할 경우에 HTML의 주석 태그를 이용하여서 인터넷 익스플로러에 대해 적용하기 위한 특수한 형식의 주석이다. IE5 에서 처음으로 지원하기 시작하였으며 IE10이상에서는 조건부 주석이 작동하지 않는다. 문법 구문 예시 예시 IE8이 아닐 때 IE8 일 때

CSS3 란 (Cascading Style Sheets) 차세대 HTML5 제안과 함께 CSS3라는 이름의 새로운 스타일이 나왔다. 차세대 웹 개발을 위한 새로운 표준이다. 최신버전의 CSS 이며 기존 CSS2.1에서 부족한 부분을 보완하고 개선한 버전이다. [ 예시 ] css3 장점 - 이미지를 사용하지 않아도 되기 때문에 웹 페이지의 데이터량을 절약할 수 있다. 다중 컬럼 레이아웃(Multiple column layout) 컬럼 갯수 정의하여 다수의 컬럼(세로단)에 텍스트를 배치할 수 있다. column-count 컬럼의 갯수를 직접 지정. 컬럼의 너비는 컬럼 갯수 기반으로 자동으로 결정(table) column-width 각 컬럼의 너비를 지정함으로써 컬럼의 갯수는 자동으로 결정되도록한다. colu..