오늘도 코딩!

​ JavaScript 는 HTML 페이지를 동적이고, 대화식으로 만들어준다. ​ 태그는 클라이언트 측의 자바스크립트를 정의하는데 사용 된다. 태그는 스크립트 명령문을 포함하거나, src 속성을 통해 외부 스크립트 파일을 가르킨다. 자바스크립트의 일반적인 용도는 이미지 조작, 양식 유효성 검사 및 컨텐츠의 동적 변경을 할 수 있다. 자바스크립트에서 HTML 요소를 선택하기 위해서는, document.getElementById() 를 사용한다. ​ 태그는 브라우저에서 스크립트를 비활성화 했거나, 스크립트를 지원하지 않는 브라우저를 사용하는 사용자에게 표시할 대체 텍스트를 제공한다. ​

HTML Iframe은 웹페이지 내에 웹페이지를 디스플레이 하는데 사용된다. 태그는 inline frame 을 지정한다. Inline frame 은, 현재 HTML 문서 내에 다른 문서를 포함하는데 사용된다. 항상 에 대한 제목 속성을 포함하는 것이 좋다. screen readers 가 iframe의 내용을 읽어주기 때문에. ​ height 와 width 속성을 이용해서 iframe 의 사이즈를 조절해주면 되고, 사이즈값은 pixel 로 default 되어 있다. ​ Style 속성을 사용해, CSS로 height 와 width 의 사이즈를 조절해줄 수도 있다. ​ Iframe 은 default 값으로, border 테두리가 쳐져 있는데, 이를 제거하기 위해서는, style 속성과 CSS의 border ..

id 속성의 값은 HTML 문서 내에서 고유해야 한다. HTML 문서에는 동일한 id를 가진 요소가 2개 이상 있을 수 없다. id 속성은, style sheet의 특정 style 선언을 가리키는 데 사용 된다. Javascript 에서 특정 id 를 가진 요소에 access 하고자 하는 경우에도 사용할 수 있다. ​ id 구문은, 해쉬 문자(#)와 id 이름을 차례로 작성한 뒤, 중괄호 {} 안에 CSS 속성을 정의하면 된다. id 이름은, 대소문자를 구별한다. id 이름은, 하나 이상의 문자를 포함해야 하며, 숫자로 시작할 수 없고, 공백을 포함할 수 없다. ​ Class 는 여러 HTML 요소에서 사용 할 수 있지만, id는 페이지 내에서 하나의 HTML 요소에서만 사용해야 한다. ​ HTML 북마..

HTML class 속성은, HTML 요소에 대한 class를 지정하는 데 사용 된다. 여러 HTML 요소가 동일한 클래스를 공유할 수 있다. Class 속성은, style sheet에서 class 이름을 가리키는 데 사용 될 수 있고, 특정 class 이름을 가진 요소에 access하기 위해 Javascript 에서 사용 할 수도 있다. ​ Class 이름은 대소문자를 구분한다. Class 속성은 어느 HTML 요소에서도 사용 가능하다. 이런식으로, style 에서 class 값을 city로 지정해주고 요소에서 class 값을 city로 입력해주면, style 태그 안에 있는 class 인 city 값을 끌고 와 적용시켜 준다. 는 해당 블록 전체를 꾸며줌. ​​ Inline 요소인 요소에서도, cla..

모든 HTML의 요소에는 default 된 기본 디스플레이 값이 있는데, 그 표시값은 Block 과 Inline 두 가지로 나뉜다. 항상 새줄에서 시작하고, 브라우저는 자동으로 요소 앞 뒤로 약간의 공백(여백)을 추가한다. Block 요소에 사용 되는 줄은, 전체 너비를 차지한다. 일반적으로 사용되는 두 가지 Block 요소는 와 이다. - : 문서의 단락을 정의 - : 문서의 구분 또는 섹션을 정의 ​ div 요소는 다른 HTML 요소의 컨테이너로 종종 사용된다. div 요소는 필수속성은 없지만, Style, class, id는 공통이다. div 요소를 CSS와 함께 사용하면, content 블록 스타일을 지정할 수 있다. ​ ** Block-level elements ** ​ ​ Inline 요소는 ..

list 태그는 3가지로 분류된다. ​ 1) Unordered list (CSS로 꾸며서 홈페이지 목록 bar처럼 목록화 해줄 수 있음) 2) Ordered list 3) Description list ​ Unordered list 태그는 태그를 사용하고, list 안에 들어갈 각각의 아이템들은 태그를 사용하여 준다. Unordered list 는 default 값으로, bullets(작은 검정 동그라미) 서식이 붙게 된다. ​ CSS로 List item Marker를 변경 할 수도 있다. list-style-type 특성을 사용 하면 된다. 종류는 아래와 같이 4가지가 있다. - disc : 작은 블랙 동그라미(default 값) - circle : 작은 흰색 동그라미 - 검정 테두리 - square ..

태그는 테이블의 특정 열에 스타일을 지정하는 데 사용 된다. 각 그룹은 요소로 지정된다. span 속성은 스타일을 가져오는 열의 수를 말한다. style 속성은 열에 제공할 스타일을 지정한다. 태그는 반드시 태그의 자식 태그로 속해 있어야 한다. table > colgroup > col 이런식.... ​ Colgroup 태그는 CSS로 표현할 수 있는 스타일링이 매우 제한적이다. - width - visibility - background - border ​ col span 을 이용하면, 해당하는 열 만큼 style 로 꾸며줄 수 있다. ​ ​ col span 태그에 열 갯수만 지정해주고, style 을 지정해주지 않으면 된다. ​ 셀 숨기기 기능은 visibility: collapse 를 사용하면 된다.

Table row를 스타일링 하기 위해선, :nth-child(even) 선택기능을 사용하면 된다. 태그 위치는 의 태그 안에 위치 시킨다. (even) 은 2,4,6 열에 스타일링 적용 (odd) 는 1,3,5 열에 스타일링 적용 ​ Vertical 로 수직 스타일링 하기 위해선, td(table data) 와 th(table header)를 꾸며주면 된다. : Combine Vertical & Horizontal Zebra stripes ​ 위에서 배운 스타일 두가지를 결합한 형태로 나타낼 수 있다. 열과 행에 모두 줄무늬가 생김. 투명한 색상을 사용하면 겹치는 효과를 얻을 수 있다. 투명도를 반영 시키려면, rgba() 를 사용 하면 된다. ​ 각 테이블 열의 밑줄 선만 살리고자 하는 경우, bor..

​ HTML 표는 padding과 spacing 기능을 통해, 셀 사이의 공간을 조절할 수 있다. ​ 셀 padding은, 셀의 가장자리와 셀 내용 사이의 공간을 말한다. default 값으로, 0으로 맞춰져 있고, padding을 더해주기 위해선, CSS의 padding 속성을 사용 하면 된다. padding 값을 좀 더 세밀하게 조절하고 싶다면, 아래와 같은 padding 속성을 이용하면 된다. padding-top padding-bottom padding-left padding-right ​ cell spacing은 셀과 셀 사이의 빈 공간을 말한다. default 값으로, 2 pixels 이 기본 적용되고, 이를 변경하려면, table 요소에서 CSS의 border-spacing 속성을 사용하면 ..

HTML Header 구조는 이렇다. 한 덩어리의 태그는 1열을 의미하고, 여러 열을 표시하고 싶은 경우 태그를 밑으로 차곡차곡 쌓으면 된다. table header는 default 값으로, 굵은 글씨체 + 센터 위치로 맞춰지며, header 의 위치는 를 어디에 위치 시키는가에 따라 달라진다. ​ Header 의 텍스트 위치를 center 가 아닌, 왼쪽 or 오른쪽 정렬을 해주고 싶다면 CSS의 text-align 속성을 사용 하면 된다. ​ 가로 셀 병합은 요소 안에 colspan 속성을 사용 하면 된다. 세로 셀 병합은 요소 안에 rowspan 속성을 사용 하면 된다. ​ 전체 테이블에 제목을 달아주려면, 태그를 사용하면 된다. 태그의 위치는 항상 태그 바로 밑에 와야한다. ​