웹47 ::before ::after content에 대해 쌉 이해 가능 ::before ::after content에 대해 쌉 이해 가능 안녕하세요 웹로드케스트입니다. CSS3 가상요소 before, after를 활용한 예제와 content에 대해 쉽게 설명해드리겠습니다. 1. ::before, ::after 의 차이점 ::before - 선택한 element(s) 앞에 가상 콘텐츠 삽입 ::after - 선택한 element(s)s 뒤에 가상 콘텐츠 삽입 See the Pen ::before, ::after diffrent by dadada (@yesna) on CodePen. 예제를 보시면 before를 사용하면 HTML element(태그) 앞에 위치하고 after를 사용하면 HTML element 뒤에 위치하게 됩니다 2. content를 쓰는 이유 가상 요소 bef.. 2020. 6. 14. 반응형/적응형 차이점 안녕하세요, 웹로드캐스트입니다 주변에서 "이 웹사이트 반응형이에요? 적응형이에요?"라고 궁금해하는 분들이 많아서 이 글을 씁니다. 1. 반응형 웹사이트 :: Response Website 하나의 템플릿(Templete)로 모바일, 태블릿, 데스크탑 모든 기기에 대응할 수 있는 웹 반응형 웹은 해상도 별로 보여질 화면을 꼼꼼하게 정의해야 돼서 초기 기획 단계에서 많은 시간이 듭니다. 마크업 작업을 할 때 고정된 px값이 아닌 em, rem, % 처럼 백분율 값으로 작업해야 합니다. 하나의 템플릿으로 만드는 작업이라 미디어쿼리(Media Queries)를 사용해서 해상도, 디바이스 등 특정 화면에 따라 레이아웃을 변경합니다 2020년 6월 기준 유튜브 웹사이트에 들어가보니 반응형으로 되어 있네요! 2. 적응.. 2020. 6. 14. Pseudo-Element :before ::before의 차이점 Pseudo-Element :before ::before의 차이점 안녕하세요. 웹로드케스트입니다. 웹페이지 작업할 때 가상요소인 ::before, ::after 많이 사용하시죠? 세미콜론을 하나만 쓸 때도 있고 두 개를 쓸 때도 있는데 그 차이점에 대해 포스팅하겠습니다. 1. 가상요소(Pseudo-Element)란? 먼저 가상요소에 대해 잠깐 짚고 넘어갈게요. Pseudo-Element 가상요소라고 부르는데, HTML 에서 Element는 쉽게 말해서 와 같은 태그를 의미합니다. HTML Element는 하나의 덩어리로 이뤄져 있습니다. CSS에서 가상(Pseudo)으로 태그(Element)를 쓰게 된다면 굳이 HTML 요소를 사용하지 않아도 CSS만으로 가상으로 덩어리를 만들 수 있게 됩니다. 여기서 .. 2020. 6. 13. <ul> <li> 앞에 위치한 점. 점 대신 간단하게 모양을 바꿔보자 안녕하세요 웹로드케스트입니다. ul li 태그를 쓰면 항상 li 앞에 위치해 자동으로 붙는 점. 디자이너가 항상 바꿔달라고 하는 그 점! 그 점을 이제 bullet(블릿)이라고 하겠습니다. ⬆︎기본 스타일 ⬇︎커스텀 스타일 bullet! css만으로 단순하고 쉽게 css만으로 변경할 수 있습니다. Pseudo-Element(가상요소)를 활용해 만들 수 있는데 가상요소에 대해 모르는 분을 위해 간단하게 설명해드릴게요 css pseudo-element(가상요소) 가상요소는 선택자에 추가할 수 있는 키워드로 ::first-child, ::last-child, ::after, ::before 와 같은 게 있습니다. 저는 가상요소 ::before를 사용하겠습니다. 참고 구문 selector::pseudo-elem.. 2020. 6. 13. [JavaScript] Location.hash 로 URL 활용하는 방법 Location.hash란? URL 내 '#' 뒤에 나오는 식별자를 value로 하는 DOMString ex) daum.net#domstring hash의 쓰임새 - #id를 활용해 클릭할 때 지정한 anchor로 이동 - ajax 호출, 뒤로가기 등 사용 가능 - window.location 속성을 통해 접근 (window 생략 가능) 문법 var string = object.hash; console.log(string); Examples Callback addEventListner를 이용한 별도 처리하는 방법 function hashHandler() { if (location.hash === '#tab01') { console.log("첫 번째 탭"); }else if(location.hash.. 2020. 6. 13. 이전 1 ··· 5 6 7 8 다음
