개발이좋아

css filter란 html로 작성된 문서의 이미지나 동영상 혹은 텍스트 등에 간단한 방법으로 여러 가지 효과를 적용할 수 있는 방법이다. 여러 가지 효과란 스마트폰의 카메라 어플의 다양한 효과를 생각하면 된다. 예를 들어 블러, 세피아, 색 반전, 흑백 효과 등이 있다. 현재 위 사진의 나와있는 브라우저 버전에서 지원하고 있으며 사용할 때는 접두사를 붙여서 사용하는 편이 좋다. 위와 같은 사진의 간단한 필터를 적용한 예제는 아래와 같다. See the Pen MWwgLNQ by ParkChanYang (@dudwk814) on CodePen. 위 코드는 위의 사진에 흑백의 필터를 씌우는 코드이다. result를 보면 사진이 흑백으로 변한것을 알 수 있다. 또 다른 예제로는 텍스트의 블러 효과 등을 적..

박스 모델이란 태그의 실제 모습이라고 생각하면 된다. 태그가 웹페이지에 적용되는 실제 모습이 사각형의 박스 처럼 생겨서 박스 모델이라고 부른다. 위 사진은 박스 모델의 구성을 나타낸 사진으로 Content는 태그의 실제 내용이 들어가며 Padding은 내용인 Content와 테두리인 Border 사이의 여백을 나타낸다. Border는 박스의 테두리를 나타내고 Margin은 박스 모델과 박스 모델사이의 여백을 나타낸다. 박스 모델은 레이아웃을 잡을 때 필수일정도로 중요한 내용이다. 박스 모델의 주요 속성 width, height 속성 - Content 영역의 크기 조정 width와 height 속성은 박스 모델의 너비와 높이를 조정하는 속성으로 width는 너비를 height는 높이를 조정한다. /* wi..

HTML 문서에 CSS를 적용할 때 인라인으로 적용하는 경우가 아니라면 어떤 요소에 스타일을 적용할지 결정해야 한다. 이때 어떤 요소의 CSS를 결정하는지 지목하는 것이 '선택자(Selector)'이다. 위 코드에서 div가 선택자가 된다. 위 코드의 의미는 div 태그의 글자의 색을 빨간색으로 지정하겠다는 의미이다. 기본적으로 선택자는 전체 선택자, 태그 선택자, 아이디 선택자, 클래스 선택자, 가상 선택자가 있다. (1) 전체 선택자(universal selector) 전체 선택자란 모든 요소의 스타일을 지정하겠다는 의미이다. /* 전체 선택자의 기본 형 */ 선택자를 ' * '로 하면 해당 html파일 전체 요소의 스타일을 적용할 수 있다. (2) 태그 선택자(tag selector) 태그 선택자는..

가변 그리드를 사용하면 브라우저에 너비에 따라 웹의 요소들이 유동적으로 바뀌게 된다. 이때 글씨가 픽셀(px)단위로 고정되어 있다면 브라우저의 너비에 따라 글씨가 굉장히 작아질 수도 있는 문제가 발생한다. 이러한 문제를 해결하기 위해서는 글씨를 픽셀과 같은 고정된 단위가 아닌 가변적인 단위인 em과 rem을 사용하여 해결할 수 있다. em 단위 em 단위는 자신의 부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 지정한 것으로 기본적으로 1em은 16px의 크기를 갖는다. p 태그의 부모 요소인 div 태그의 따로 폰트 사이즈를 조정해주지 않는다면 기본적으로 1em은 16px로 적용이 되며 부모 요소의 폰트 사이를 적용한다면 부모 요소의 폰트 사이즈에 따라 1em의 값은 가변적으로 변동된다. t..

시맨틱 태그(semantic tag)란 HTML5부터 사용가능한 레이아웃 관련 태그로 등이 있다. 시맨틱 태그는 HTML4에서 태그를 이용하여 만들던 웹의 레이아웃을 보다 쉽게하기 위한 표준이라고 생각하면 된다. 레이아웃을 구성하기에 굉장히 편리하지만 IE8 이하 브라우저에서는 HTML5를 지원하지 않아 시맨틱 태그를 사용할 수 없다는 문제가 있다. 아직 우리나라에는 IE8 이하 브라우저를 사용하는 경우가 많기 때문에 시맨틱 태그로 웹의 레이아웃을 구성했을 경우 태그를 인식하지 못하게 되는 문제가 있다. 그렇다면 시맨틱 태그로 레이아웃을 구성한 웹은 IE8 이하 브라우저에서는 제대로 표현할 수 없을까? IE8 이하 브라우저에서 시맨틱 태그를 사용하기 위한 방법은 여러 방법이 있는데 그중 하나로는 HTML..

anchor의 사전적 의미는 배에서 사용하는 닻을 생각하면 된다. 예를 들어 위키백과 같은 백과사전 사이트에서 목차에 링크가 달려있고 그 링크를 클릭하면 해당 내용이 있는 곳으로 링크되는 것을 생각하면 된다. HTML에서 페이지 내의 링크를 하고 싶은 경우 이 앵커를 사용하면 된다. 텍스트 또는 이미지 텍스트 또는 이미지 앵커를 사용하기 위해서는 우선 이동하고 싶은 위치마다 id속성을 이용하여 앵커를 만들고 a태그를 이용하여 이동한다. a태그의 href 속성에는 이동하고 싶은 앵커 이름 앞의 #을 붙여준다. Example 메뉴1 메뉴2 메뉴3 내용1 내용1 [메뉴로] 내용2 내용2 [메뉴로] 내용3 내용3 [메뉴로] 위의 코드는 위키백과와 같은 백과사전에서 목차의 번호를 클릭하면 해당 번호로 내용으로 이..

HTML을 작성할 때 특수문자를 사용해야 하는 경우 참고할 수 있는 표이다. 사용법은 무척 간단하다. 위의 사진을 클릭하면 W3C에서 제공해주는 공식 엔티티표 사이트로 이동한다. 원하는 특수문자에 마우스를 올려놓으면 코드가 보이는데 그 코드를 복사/붙여 넣기 하면 끝이다. 여러 태그가 있는 경우가 있는데 이 경우는 세미콜론 ; 을 기준으로 코드가 구분되며 여러 코드 중 아무것이나 사용해도 상관없다.