본문 바로가기

web39

클라이언트 사이드 스크립트-JavaScript JavaScript란 HTML 파일에 넣을 수 있는 스크립트 언어이다. JavaScript 스크립트가 들어간 HTML 파일을 웹 브라우저에서 읽어 들이면 해석되어 실행되어진다. JavaScript는 1. body요소 안에 직접 작성하거나 2.header요소안에 작성하여 호출하거나 3.외부파일로부터 읽어들이거나 4.페이지 읽기나 버튼 클릭과 같은 이벤트에 대한 응답 으로 호출하는 방법이 있다. JavaScript는 OS나 웹 브라우저의 구성요소, HTML 문서 등과 같은 것을 오브젝트라는 단위로 취급한다. 즉, JavaScript는 DOM(Document Object Model)이며 HTML 문서를 태그나 속성의 계증 구조(트리구조)로 간주한다. 웹브라우저의 트리 구조 2020. 4. 13.

[HTML/CSS]:hover로 transition 효과주기 CSS의 transition을 이용해서 마우스를 이미지에 hover 할 때 원형 효과 주는 것을 연습해 보았다. 우선 html에서 배경을 넣을 영역과 텍스트를 넣을 영역을 만들어준다. 텍스트 영역 안에는 큰글씨와 작은 글씨로 나눌 거라 h1태그와 span태그를 사용했다. [html] Tree by Gayouni html은 여기서 끝! 간단하게 만들어볼거라 원 하나만 만들었다. 다음 css에서 배경을 원형으로 바꿔줄 것이다. [css] div.circle { width: 200px; height: 200px; border-radius: 50%; margin: 20px 30px; position: relative; box-shadow: inset 0 0 0 16px rgba(207, 207, 207, 0.6.. 2020. 4. 1.

HTML 하이퍼링크 오늘은 홈페이지에서 버튼을 누르면 다른페이지로 넘어가는 하이퍼링크를 실습 해보았다. 앞서 태그를 사용하여 href 속성에 url을 입력하는 것은 동일하다. 해당 하이퍼링크에 이동시킬 페이지의 .html 파일을 입력하는 것이 핵심이다. 텍스트에 태그로 링크를 걸어준뒤 href에 이동시키고싶은 html 파일을 삽입하면 해당 페이지로 이동한다. target 속성을 이용하면 페이지를 새로 만들어서 열기가 가능하고, 생략한다면, 기존페이지에서 링크클릭시 페이지가 이동된다. HTML5 HTML5 CSS3 javascript 결과 2020. 3. 30.

HTML에 구글 웹 폰트/웹 아이콘 사용하기. 구글에선 웹폰트, 웹아이콘 서비스를 제공하고 있다. 링크만으로 폰트를 사용할 수 있으므로써 우리는 보다 편리하게 홈페이지의 가독성을 높일 타이포그래피를 찾을 수있다. (물론 인터넷이 연결되어야 폰트가 지정됨) 일반적으로 한 페이지당 웹폰트 연결은 3개 이하로 적용하는 것이 적당하다. 너무 많은 웹 폰트의 연결은 사이트의 로딩 속도에 영향을 미칠 수 있기 때문. 많은 폰트를 사용하면 폰트가 무거워지므로 제목/ 본문/ 강조에 쓰이는 3개지가 적당하다. 컬러도 마찬가지다. 웹 폰트를 html에 적용시키는 방법은 다음과 같다. 1.아래 링크에 접속합니다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open thr.. 2020. 3. 27.

[CSS]transform(3D변형)효과 주기 perspective: 원근감 설정하기 perspective: 원근감 수치; perspective 수치가 낮을 수록 왜곡이 커지고 수치가 클수록 왜곡이 작아진다. perspective 는 자식요소에 효과에 넣고싶을 때 부모에 속성시켜야한다. (3D 변형을 한 요소의 부모태그에 설정 해주는 것이 일반적입니다.) translateZ : z축으로 이동하기 transform: translate(이동거리); translateZ는 3D 공간에서의 z축, 즉 사용자가 브라우저를 바라보는 시점으로 기준으로 앞 또는 뒤로 움직입니다. 마이너스(-) 값은 사용자 시점을 기준으로 뒤쪽으로, 플러스(+) 값은 사용자 쪽으로 가깝게 이동합니다. rotateX, rotateY : 3D 공간상에서 x축과 y축기준으로 회전하기 tr.. 2020. 3. 27.

HTML5의 시멘틱태그, 그 외 태그들 HTML5란? HTML5는 HTML의 다음버전으로 HTML4를 업그레이드한 것이다. HTML5는 특정 플러그인에 의존하지 않고 콘텐츠를 제공하는 것을 목표로 둔다. HTML5에선 개발자가 자주쓰는 표현들을 태그로 만들어주었는데 이 태그들은 HTML의 구조를 보다 논리적으로 만들어준다. 물론 windows7같이 옛날 브라우저에는 작동하지않는다. 이제 전처럼 섹션을 일일히 div태그로 나눠줄 필요가 없어진 것.! 보다 편리해졌다. 시맨틱웹태그(semantic) : 문서의 헤더 부분의 구조를 나타내는 태그 : 문서의 네비게이션 구조를 나타내는 태그 : 문서의 멀티미디어 요소를 나타내는 태그 : 특정 컨텐츠를 그룹화 시켜주는 태그 :문서의 사이드 컨텐츠, 즉 본문과는 다른 서브 컨텐츠를 나타내는 태그 : 문서의.. 2020. 3. 26.

이전 1 ··· 3 4 5 6 7 다음

티스토리툴바