키다리 개발자

JavaScript는 웹 페이지를 동적으로 만들어주는 언어로, 객체 기반의 스크립트 프로그래밍 언어입니다. 단순히 규격을 나타내는 HTML과 CSS와 달리, 변수와 함수 등이 존재하는 프로그래밍 언어입니다. JavaScript를 줄여서 js라고 하며 파일 확장자는 .js를 사용합니다. JS파일 사용법 CSS와 같이 Javascript 파일을 만들어 따로 분리하여 HTML과 연결시켜주는 방법이 있는데, 1 2 3 이와 같이 에 로 js파일을 연결 시켜주는 방법이 있고 1 2 3 4 5 6 배가본드 안에 내용 가장 밑줄에 사용하는 방법이 있습니다. 주석 주석 사용법 : 한줄인 경우 // 주석내용 여러 줄 일 경우 /* 주석내용 */ 그리고 단축키는 ' Ctrl + / ' 를 사용하면 간편하다. 주석(comm..

transition 전환(transition)을 위해 제공되는 속성(property)는 다음과 같습니다. transition transition-delay transition-duration transition-property transition-timing-function transition 속성 transition 속성은 다음과 같은 순서로 정의할 수 있습니다. 1. 해당 요소에 추가할 CSS 스타일 전환(transition) 효과를 설정합니다. 2. 추가할 전환 효과가 지속될 시간을 설정합니다. transition-timing-function 속성 transition-timing-function 속성은 전환(transition) 효과의 시간당 속도를 설정합니다. transition-timing-fu..

padding과 margin은 간격 사이의 영역을 정의하는데 기준점이 다릅니다. 예를 들어, 우리가 레스토랑에 가서 음식 2개를 시켜서 테이블에 놓았다고 합니다. padding은 접시의 테두리(border)에서 음식(content)까지의 사이의 영역이며, margin은 접시(element)와 접시(element) 사이의 영역으로 이해하시면 됩니다. padding padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정합니다. 이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다. CSS를 사용하면 패딩 영역의 크기를 방향별로 따로 설정할 수 있습니다. padding 속성 padding-top padding-rig..

CSS 선택자 CSS의 선택자는 다음과 같이 4개로 분류됩니다. HTML 요소 선택자 id 선택자 class 선택자 그룹(group) 선택자 HTML 요소 선택자 CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있습니다. 예를 들어, 을 모두 css 스타일로 적용하려고 합니다. html 선택자(여기선 span 해당)를 css문서에 직접 입력하면, 해당 모든 요소의 텍스트 색은 green(초록색)으로 스타일 적용이 됩니다. id 선택자 id 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용합니다. 이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 줍니다. 그러므로 하나의 웹페이지에서는 중복하지 않고 딱 1개의 요소만 특정 id..

CSS란? CSS는 Cascading Style Sheets의 약자입니다. CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어입니다. HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌습니다. 오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있습니다. CSS를 사용하는 이유 HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야만 합니다. 이 작업은 매우 많은 시간이 걸리며, 완성한 후에도 스타일의 변경 및 유지 보수가 매우 힘들어집니다. 이러한 문제점을 해소하기 위해 W3C(World Wide Web Consortium)에서 만든 스타일 시트 언어가 바로 CSS입니다...

: HTML Link 요소는 현재 문서와 외부 리소스와의 연결 관계를 명시합니다. 이 요소는 스타일 시트에 링크하는 데에 가장 많이 사용됩니다. rel="속성 값" : 요소에 반드시 명시되어야 하는 필수 속성입니다. 이 속성의 가장 일반적인 쓰임새는 스타일시트의 링크를 나타내는것입니다. "stylesheet" : 스타일 시트(stylesheet)로 사용할 외부 리소스를 불러옵니다. type : 태그의 type 속성은 링크된 외부 리소스의 미디어 타입을 명시합니다. 이 속성은 반드시 href 속성이 설정되어 있어야만 사용할 수 있습니다. href="URL" : 링크된 외부 리소스(external resource)의 URL를 명시합니다.

태그의 구성에 대해 기록하겠습니다. ... 아래 사진은 html문서를 서로 연결시켜 이동하는 모습입니다. : 다른 페이지, 파일, 같은 페이지의 어느 위치, 이메일 주소나 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만든다. href="html 문서의 주소값" : html 문서로 이동시키는 속성이다. 한 줄 결론 따라서, 와 href속성은 이동시킬 HTML의 문서를 연결하고 이동시킨다. 이미지 태그는 단일 태그이다. HTML문서에 이미지를 삽입한 모습입니다. : HTML문서에 이미지를 삽입할 수 있으며 단일(홀) 태그이다. 따라서 본인 스스로 열고 닫는다. src="이미지 주소 값" : src 속성은 source의 약어이며, 이미지의 경로를 받는다. 한 줄 결론 와 src속성은 이동경로를 ..

실제 간단한 웹페이지를 만들어 HTML 기본 태그를 기록하였습니다. 실습한 웹페이지를 크롬(Chrome) 검사도구에서 텍스트상으로 설명하기 애매한 요소를 직접 확인하려고 열어보았습니다. 'F12' 또는 '오른쪽 클릭 후 검사'로 검사도구를 열어줍니다. 우측의 빨간 테두리 부분 안에서 태그 위로 마우스 커서를 이리저리 움직여 보면, 요소(Elements)들의 섹션(Section)을 좌측 화면(실제 화면)에서 직접 확인할 수 있습니다. 는 태그를 감싸준다(Wrap) HTML 코드 작성 후 크롬 검사도구 elements에서 위에 커서를 올려보면 구역이 지정이 되고, 웹 페이지 상 가 요소를 감싸고 있는 걸 확인할 수 있습니다. 즉, 는 태그들을 감싸는 역할을 합니다. 와 두 태그 모두 Text를 입력받는다 :..