JStudy - 자바스크립트 자습서

안녕하세요. 이번 포스팅에서는 태그에 대해 알아보겠습니다. 태그는 장문의 글을 입력할 수 있는 요소입니다. 오른쪽 아래의 빗금 무늬를 드래그하면 영역을 키우거나 줄일 수도 있습니다. 최초 너비와 높이를 지정하기 위해서는 cols 와 rows 속성을 사용할 수 있습니다. cols 는 한 줄에 들어가는 글자 수, rows 는 한 번에 표시할 글자 줄 수를 의미하는데 cols의 경우 정확하지는 않습니다. 는 처럼 placeholder 속성을 이용해 입력할 내용에 대한 힌트를 제공할 수도 있습니다. 또한 태그와 마찬가지로 readonly 혹은 disabled 태그를 이용해 읽기 전용으로 만들거나 사용 불가능하게 만들 수도 있습니다. 태그에 기본 값을 제공하려면 태그 사이에 내용을 입력하면 됩니다. 이때 태그와 ..

안녕하세요. 이번 포스팅에서는 HTML에서 버튼을 만들 수 있는 태그 대해 알아보겠습니다. 태그는 말 그대로 버튼의 역할을 합니다. 사용자가 클릭 가능하며 시작 태그와 끝 태그 사이에 표시하고자 하는 내용을 입력할 수 있습니다. 버튼 태그에서는 type 속성을 이용해 버튼의 역할을 규정할 수도 있습니다. 사용할 수 있는 값으로는 아래와 같습니다. button reset submit button 타입은 버튼을 특별한 역할이 없는 클릭 가능한 버튼으로 만듭니다. reset 타입은 클릭 시 해당 태그가 속한 태그의 내용을 초기화 시킵니다. submit 타입은 클릭 시 해당 태그가 속한 태그를 제출합니다. 차이점을 이해하기 위해 아래 예시를 보겠습니다. 버튼 제출 초기화 여기에 간단히 제출 가능한 양식과 세 개..

안녕하세요. 이번 포스팅은 사용자의 입력을 받아들일 수 있는 태그에 대해 알아보겠습니다. 태그는 다양한 형태로 사용자의 입력을 요청하고 받아들일 수 있는 태그로, 끝 태그가 없습니다. 태그에는 type 이라는 속성을 지정해서 어떤 형태의 값을 받아들일 지 설정할 수 있는데, type의 기본 값은 text입니다. 위 코드와 같이 type 속성을 명시해주지 않는다면 태그는 암시적으로 type="text" 속성을 사용하여 아래와 같은 모양을 나타내게 됩니다. 태그는 아래처럼 placeholder 라는 속성을 이용해 무슨 내용을 입력해야할 지 힌트를 제공해줄 수도 있습니다. 또한 value 속성을 이용하면 태그의 기본값을 설정해줄 수 있는데, 이 때는 아래처럼 반드시 태그와 함께 사용되어야만 합니다. 태그에 대..

안녕하세요. 이번 포스팅은 표를 그릴 수 있는 태그에 대해 소개하겠습니다. 태그는 그 자체로만은 표를 사용할 수 없고, 아래와 같은 태그들을 함께 사용했을 때 제대로 된 표를 그릴 수 있습니다. 기본적인 테이블의 형태는 다음과 같습니다. 이름 직업 김철수 개발자 김영희 디자이너 태그는 테이블 영역을 정의합니다. 태그는 테이블의 각 행을 정의합니다. 태그는 테이블의 헤더 셀을 정의합니다. 태그는 테이블의 데이터 셀을 정의합니다. , , 태그들은 테이블의 머릿글 영역과 본문 영역, 바닥글 영역을 그룹화하는 역할을 합니다. 이름 직업 경력 김철수 개발자 7년 김영희 디자이너 4년 경력 합 11년 보시다시피 보여지는 형태에는 차이가 없지만, 나중에 CSS를 이용해 각 그룹별로 서로 다른 스타일을 적용할 수도 있..

안녕하세요. 이번 포스팅에서는 영상을 표시하는 태그에 대해 알아보겠습니다. 태그와 유사하게 태그도 src 속성을 이용해 재생할 비디오 경로를 지정할 수 있습니다. 동영상 크기가 커지는 것을 방지하기 위해 태그처럼 width 속성을 지정해주면, 이렇게 까만 화면이 나타난 것을 볼 수 있습니다. 이런 현상이 나타나는 이유는 영상이 재생되지 않고 멈춰진 상태로 있기 때문입니다. 만약 영상을 화면이 로딩되자마자 재생하고 싶다면 autoplay 와 muted 속성을 설정하면 됩니다. autoplay는 자동 재생을 허용하는 것이고, muted는 영상을 음소거 시키는 속성인데, 이 두 속성을 함께 사용하는 이유는 원치 않는 영상이 자동 재생되는 것을 방지하기 위해서입니다. 그렇다고 아예 자동 재생이 안되게 할 수는 ..

안녕하세요. 오늘은 이미지를 표시하는 태그를 알아보겠습니다. 이미지를 웹 화면 상에 표시하기 위해서는 태그를 사용해야 합니다. 이 태그는 끝 태그가 없고, 이미지를 표시하기 위해 src라는 속성을 지정해줘야 합니다. src 속성에는 이미지의 상대경로 혹은 절대경로를 넣어주면 됩니다. 상대경로와 절대경로에 대한 설명은 다음에 하도록 하겠습니다. 지금 저는 Unsplash의 Wasa Crispbread의 사진을 사용했습니다. 그런데 이미지가 너무 큽니다. 이 경우는 width나 height, 혹은 두 가지 속성을 모두 이용해 이미지 크기를 조정할 수 있습니다. 우선 width 속성으로 이미지 크기를 조정해 보겠습니다. 웹에서의 크기 단위는 기본적으로 px을 사용합니다. 너비를 200px로 준 모습입니다. 이..

안녕하세요. 이번 포스팅에서는 HTML의 주석에 대해 알아보겠습니다. Comment라고도 부르는 주석은 개발자들이 확인하기 위해 작성하는 문서로, 화면 상에는 보여지지 않습니다. HTML에서 주석 역시 태그처럼 시작과 끝이 존재합니다. 시작은 로 표현합니다. 주석의 시작과 끝 사이에 존재하는 내용은 화면에 표시되지 않습니다. 이것은 눈에 보이는 내용입니다. 이렇게 하면 태그 자체가 숨겨져서 보이지 않습니다. 한 줄만 가리기 위해서 다음과 같이 쓸 수도 있습니다. 이것은 눈에 보이는 내용입니다. 단, 이 경우는 앞선 경우와 달리 태그는 정상적으로 출력 됩니다. 태그가 정상적으로 출력 되었는지 확인하는 방법은 개발자 도구를 이용하는 방법입니다. 개발자 도구는 일반적으로 브라우저에서 F12를 누르면 열립니다...

안녕하세요. 이번 포스팅은 목록을 표현하는 태그들에 대해 알아보겠습니다. 목록을 표현하는 태그는 , , 태그가 있습니다. 각각 Ordered List, Unordered List, Definition List 를 의미합니다. 모두 목록을 표현할 때 사용하지만 쓰임이 다릅니다. 우선 은 순서가 있는 목록을 만들 때 씁니다. 첫 번째 두 번째 세 번째 과 에서는 라는 태그를 이용해 목록의 각 항목을 표시합니다. 은 순서가 있는 목록이기 때문에 위와 같이 번호가 각 목록 앞에 자동으로 생성됩니다. 은 반대로 순서가 없는 목록을 만들 때 사용합니다. 첫 번째 두 번째 세 번째 태그와 태그는 중첩해서 표시할 수도 있습니다. 첫 번째 두 번째 두 번째 중 첫 번째 두 번째 중 두 번째 두 번째 중 세 번째 세 번째..

안녕하세요. 이번 포스팅에서는 HTML의 시멘틱 태그에 대해 알아보겠습니다. 지난 포스팅에서는 과 이라는 글자를 강조하는 태그를 알아보았습니다. 하지만 HTML에는 브라우저가 해석할 수 있는 다양한 시멘틱 태그들이 있습니다. 시멘틱 태그 종류 : 독립적인 컨텐츠 정의. : 페이지 컨텐츠 이외의 컨텐츠 정의. : Show/Hide 할 수 있는 추가적인 컨텐츠 정의. : 태그에 대한 표제 정의. : 주로 사진, 일러스트, 도표, 코드 리스트 등을 표시하는 자체 컨텐츠 정의. : 문서나 섹션의 푸터 정의. 푸터는 일반적으로 작성자, 저작권 정보, 관련 문서 등의 내용을 포함. : 문서나 섹션의 헤더 정의. 헤더는 일반적으로 제목, 로고, 검색 폼 등 포함. : 문서의 메인 컨텐츠 정의. : 강조된 텍스트 정의..

안녕하세요. 이번 포스팅에서는 글자의 모양을 변경하는 태그를 알아보겠습니다. 내용입니다 지난 번에는 간단한 문장을 작성하는 법을 배웠습니다. 그런데 여기서 특정 단어를 굵게, 혹은 기울여서 표시를 하고 싶을 수도 있습니다. 그 경우 사용할 수 있는 태그는 태그와 태그가 있습니다. 태그는 굵은 글씨체를 뜻하는 Bold의 B를 따온 것이고, 태그는 이탈릭체, 즉 기울기체를 뜻하는 Italic에서 I를 따온 것입니다. 나는 굵고, 기울어져 있습니다 굵은 글씨와 기울어진 글씨를 동시에 적용할 수도 있습니다. 그럴 경우 태그로 태그를 감싸거나, 태그로 태그를 감싸면 됩니다. 나는 굵고 기울어져 있습니다. 나는 굵고 기울어져 있습니다. 그렇다면 제목에 있는 태그와 태그는 무엇인지 의문이 생길 것입니다. 태그는 태그..