Web Programming 썸네일형 리스트형 HTML CSS - transform 2 3) Rotate 이 기능은 요소를 회전시킬 수 있습니다. 사용방법은 다음과 같습니다. transform : rotate(회전 각도) - 평면상 회전 각도만큼 요소가 회전합니다. transform : rotateX(회전 각도) - x축을 기준으로 요소가 회전 각도만큼 회전합니다. transform : rotateY(회전 각도) - y축을 기준으로 요소가 회전 각도만큼 회전합니다. 예제) [그림1]과 [그림2]와 같이 HTML 및 CSS 파일을 작성하여 저장한 후 HTML 파일을 실행하면 다음과 같은 결과를 얻을 수 있습니다. 위 영상을 보면 맨 위 블록에 마우스 화살표가 위치하면 사각박스가 평면상에서 45도 회전하는 모습을 보실 수 있습니다. 그리고, 아래 사각박스는 가로축을 기준으로 180도 회전하는 .. 더보기 HTMLCSS - transform 1 HTML에서 지정해주는 값만큼 이동하는 translate와 기울기를 주는 skew에 대해서 알아보겠습니다. 1) translate 이 기능은 블록을 좌우상하(x축, y축)로 이동시킬 때 사용합니다. 사용 방법은 다음과 같습니다. transform:translateX(이동거리) : 좌우 방향(x축 방향)으로 이동거리만큼 블록이 이동 transform:translateY(이동거리) : 상하 방향(y축 방향)으로 이동거리만큼 블록이 이동 transform:translate(x축 이동거리, y축 이동거리) : 좌우상하 방향(x축 방향, y축방향)으로 이동거리만큼 블록이 이동 예제) [그림 1] HTML에서는 화면에 블록 3개를 출력하는 내용을 작성했습니다. 그리고, [그림 2] CSS 파일에서 블록의 디자인을 .. 더보기 gradient & box-sizing gradient & box-sizing [gradient] 화면을 꾸밀때 그래디언트 효과를 주고자 할때 기존에는 포토샵과 같은 그래픽 도구를 이용하여 이미지에 그래디언트 효과를 입혀서 그 이미지를 화면에 출력하는 방식을 써왔습니다. 하지만 이제 CSS3의 gradient를 이용하여 이 효과를 바로 적용시킬 수 있습니다. 아래와 같이 HTML과 CSS 파일을 작성합니다. [그림1]과 [그림2]와 같이 작성하여 HTML파일을 실행하면 브라우저에 다음과 같은 화면이 출력됨을 알 수 있습니다. CSS 파일 내용을 설명하면, div:nth-child(1) {background: linear-gradient(to right, green, lightgreen);} : 첫번째 블록에 그래디언트를 좌에 우측으로 적용하며.. 더보기 HTML과 CSS란? HTML과 CSS란? HTML은 "Hyper Text Markup Language"의 약자로 웹페이지를 만드는데 사용되는 언어입니다. 현재는 HTML5 버전이 사용되고 있습니다. HTML5를 사용하기 위해서는 HTML문서에서 ''이라고 선언함으로써 사용할 수 있습니다. HTML문서 기본 구성 [그림1]은 VISUAL STUDIO CODE로 HTML 기본 구성을 작성한 모습입니다. 단축키 '!' & 'Tab'키를 누르면 [그림1]과 같이 자동으로 작성되며 부분을 로 고치고 Document부분에서 'Document'를 원하는 프로그램 제목으로 바꿔주면 기본적으로 HTML 작성을 위한 구성은 완성된 것입니다. 그러면 CSS는 무엇일까요? CSS는 'Cascading Style Sheets'의 약자로 HTML로.. 더보기 이전 1 2 3 다음
아무개의 취미생활
