프론트엔드/html & css (3) 썸네일형 리스트형 간단한 모달 만들기 (simple modal) 모달 만들기 html javascript css 를 이용해서 간단한 모달을 만들어보려고 한다. 먼저 .. Simple Modal Test Open Modal Modal Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis voluptate, culpa possimus odit ratione reprehenderit asperiores distinctio animi numquam sequi nisi velit perferendis sit neque ducimus ad dolorem, architecto illum. close 이렇게 코드를 작성하면 브라우저에는 아래 사진과 같이 표시가 된다. 우선 javascript를 만지기 전에 css부.. [CSS] transform 정리 Transform 속성은? MDN을 찾아보니 transform을 다음과 같이 설명하고 있다. 'transform은 좌표공간을 변형함으로써 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿉니다.' 일반적인 문서 흐름을 방해하지 않는다는게 무슨 말일까 ... 이건 직접 테스트해보면 알 수 있다. 위에 사진은 transform을 이용해서 B를 확대시키고 살짝 기울인 모습인데 B가 커질 때 양 옆에 있는 박스들을 밀어내거나 위에 글에 영향을 주지 않고있다. 이렇게 다른 곳에 영향을 주지 않고 혼자만 스윽~ 변한다. transform에 부여할 수 있는 속성이 여러개가 있고 그 중에는 2D 속성과 3D 속성이 있다. 오늘은 2D 효과와 관련된 부분만 정리하고 3D는 나중에 다시 포스팅 할거다. tra.. HTML5 시맨틱 태그 (Sementic Tag) 정리 Sementic 이라는 단어의 사전적 정의를 살펴보면 '의미의, 의미론적인' 이라는 뜻이라고 한다. (흠 ..) 페이지를 만들 때 아무 생각 없이 div 떡칠을 하지 않기 위해서 시맨틱 태그에 대해 공부한 내용을 정리하려고 한다. 기존에 잘 사용하던 div를 두고 왜 시맨틱 태그를 사용할까? (div를 지금 사용하지 않는다는 건 아니다! 지금도 유용하게 사용된다) 몇 가지 이유가 있는데 그 중에 내가 공부한 내용만 몇 가지를 정리해보겠다. (좀 더 깊게 알고싶으신 분은 구글이나 다른 곳을 참조해보시면 좋을듯) 시맨틱 태그(Semantic Tag) 를 사용해야 하는 이유 1. 검색엔진 최적화 (SEO) 검색 엔진이 검색을 수행할 때 html 내에 있는 태그들을 분석한다. 이 때 그 태그들의 의미가 분명하다.. 이전 1 다음
