가상선택자 before, after에 관한 오해 물론 나만 오해했을 수 있다. (뭐야? 나만 바보야?) 처음 before, after에 대한 설명을 읽었을 때는 제대로 이해한 줄 알았는데 css 속성을 설정하면서 이상하다는 생각이 들었다. 어떤 태그에 before를 붙이면 그 태그의 형제 관계로 앞쪽에 위치하는 줄 알았다. 아니었다. before가 붙은 태그의 자식 관계에 위치한다. 예를 들어, 아래와 같은 코드가 있다고 해보자. 결과는 아래와 같다. 가상선택자 before, after로 만든 "좌", "우"라는 글씨는 div 태그 내부에 표시되는 것을 확인할 수 있다. div 태그 내부에 있는 텍스트 "기준"의 앞쪽은 before, 뒤쪽은 after 이다. 내가 처음 이해했던대로 div 태그의 형제 관..
이미지에 링크 여러개 걸기 - , 태그, usemap 속성 활용 보통은 태그를 태그로 둘러싸는 방법으로 이미지 하나에 링크 하나 설정한다. 이미지 하나 당 링크 하나가 되는 것이다. 커다란 이미지 내에 각 요소 별로 링크를 걸 수는 없을까? 있다. 가능하다. , 태그와 태그의 usemap 속성을 사용하면 된다. 마케팅용 이메일 작성 시 기다란 통으로된 이미지를 사용하곤 한다. 이때 유용하게 활용할 수 있다. 예를 들어, 위에 사진에서 붉은색 동그라미 영역을 클릭하면 광동 옥수수 수염차 설명페이지로 이동하고, 보라색 동그라미 영역을 클릭하면 스타벅스 홈페이지로 이동한다. (※ 위에 사진은 모바일에서 제대로 작동하지 않는다. 모바일에서도 태그를 사용하려면 자바스크립트로 보완해야 한다.) 이미지에 링크 여러개..
웹알못을 위한 HTML 기초와 태그 사이에 넣으면 된다고 참 쉽다던 글들이 어렴픗이 떠오른다. 이런 쉬운 설명에도 잘 모르겠으면 담당 부서 또는 담당자에게 코드를 건네라고 이메일 전달 기능도 있었지만 내게는 해당되지 않았다. 태그 내에 코드를 삽입하고서도 이것이 정말 제대로 한 것인지 혼란의 연속이었다. 혹시나 나와 같은 어려움을 겪는 사람에게 이 글이 도움이 되었으면 좋겠다. 디테일 말고 큰그림 위주로 설명하겠다. 우리가 보는 웹사이트, 웹페이지는 HTML(HyperText Markup Language) 코드로 만들어진다. HTML은 웹 페이지를 만드는 언어다. 인터넷을 하기 위해서 아무생각 없이 키던 인터넷 익스플로러, 크롬은 웹 브라우저다. 웹 브라우저의 역할은 HTML로 만들어진 문서를 해석하여 ..