본문 바로가기

전체 글266

[20210616] CSS 기초3 다양한 Transform 아래는 회전, 기울임, 이동, 확대/축소가 적용된 사례이다. 또한 마우스를 올리면 추가적으로 변환이 일어난다. rotate 20 deg skew(0, 20deg) translateY(100px) scale(3,1) 2021. 6. 16.
[20210615] CSS 기초2 z-index 프로퍼티 2021. 6. 15.
[20210615] CSS 기초 CSS(Cascading StyleSheet)는 HTML 문서에 시각적 효과를 주기 위한 언어이다. HTML에서 직접 style 속성에 CSS 속성을 추가할 수 있지만, 웹 표준에서 권장하지 않는 방식이다. CSS를 작성하기 위해서는 세 가지 방식이 있다. 하나는 HTML 문서의 head 태그 안에 style 태그를 추가하고 그 안에 CSS를 작성하는 방식, 다른 방식은 외부에 CSS 파일을 만들고 HTML 문서에서 link 태그로 불러오는 방식이다. 또 다른 방식은 style 태그 안에 @import 키워드를 사용하는 것이다. 첫 번째 방식은 다음과 같다. ... 두 번째 방식은 다음과 같다. 외부 CSS 파일 style.css를 html 문서와 같은 디렉터리에 저장했다고 가정한다. ... 세 번째 방.. 2021. 6. 15.
[20210614] HTML5 시맨틱 태그 기존의 HTML 문서들은 페이지 소스만 봐서는 문서의 구조를 파악할 수 없었다. 태그는 자신의 요소만 표시해줄 뿐 자기가 문서에서 어떤 '의미'를 가지는지 알 수 없었다. (예를 들면, h3 태그가 담고 있는 내용이 소제목이라고 해도, h3 태그는 크고 굵은 효과가 필요하면 문서 어디서든 사용이 가능해서 그 의미를 알기 힘들다.) 그러나 검색 엔진 등 웹 문서 탐색이 용이하도록 구성하는 것이 중요해지면서 HTML5에서는 웹문서를 구조화할 수 있는 시맨틱 태그가 등장하게 되었다. 그 종류에는 header, nav, section, article, main, aside 등이 있다. 다만, 이 태그를 html 문서에 사용한다고 해서 화면이 변하지 않는다. 이 태그들 자체로는 div 태그를 사용한 것과 다르지 .. 2021. 6. 14.
728x90