본문 바로가기

전체 글

(50)
[HTML+CSS] 09_폰트관련속성 폰트 관련 속성 #01. 글자 관련 속성 1) 글자 관련 속성의 종류 속성이름 설명 적용값 예시 font-family 글꼴 이름을 지정한다. “굴림”, “돋움”, “궁서” font-size 글자 사이즈를 지정한다. 12px, 12pt, 0.8em, 120% 등 font-style 글자의 기울임을 지정한다. italic, normal font-weight 글자의 굵기를 지정한다. normal, bold, 100~900까지의 100단위 값 등 line-height 한 줄의 높이를 지정한다. 30px, 120% 등 color 글자 색상을 지정한다. #ff6600, orange 등 2) 글꼴 지정 속성 font-family: "돋움", "굴림", "바탕"; “font-family”는 콤마(,)로 구분하여 여러 ..
[HTML+CSS] 08_CSS구체성단위 CSS 구체성 단위 #01. 복잡한 형태의 셀렉터 1) 다양한 CSS 조합 방식 CSS의 셀렉터를 표현하기 위한 조합방식은 CSS2를 기준으로 하여 약 30여가지가 존재하며, HTML5에서 새롭게 약 30여개가 추가되었다. CSS 셀렉터의 조합 기법 모두가 jQuery에서 요소에 접근하기 위한 방법으로 사용된다. 2) CSS 셀렉터의 주요 조합 형태 복수 지정 셀렉터 à 콤마(,)로 구분하기 가상클래스 자식셀렉터 -> ‘’>‘’로 구분하기 자손 셀렉터 -> 공백(“ “)으로 구분하기 속성셀렉터 -> HTML 태그의 속성에 따른 구분 HTML5의 새로운 가상 클래스 -> nth-child와 target 3) “>”로 구분한 구조적 표현-자식셀렉터 “>”는 HTML의 계층 구조의 표현을 의미한다. A > B..
[HTML+CSS] 07_CSS시작하기 CSS 시작하기 #01. CSS 소개 1) CSS =Cascading Style Sheets HTML 태그에 디자인을 입혀주는 기법 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄여준다. 모양 - HTML 문서 내의 글자의 종류, 크기, 색, 여백 등을 지정한다. 효과 - 글자의 정렬 방식을 결정하거나 박스의 테두리를 지정하는 등 다양한 효과를 줄 수 있다. 웹표준 - 사용자의 WebBrowser환경에 상관없이 일정한 화면을 보여줄 수 있다. #02. HTML 태그의 분류 1) Block Level 요소 (문단) 한 개의 독립된 덩어리 = 하나의 큰 그룹 블록 레벨 요소는 다른 블록 레벨 요소와 인라인 레벨 요소를 포함할 수 있다. 블록라인요소 noframes ul/ ol/ li ..
[HTML+CSS] 06_입력양식만드 입력양식 만들기 #01. 기본 입력 양식 XHTML까지 사용되던 입력 양식 태그 #02. 텍스트 입력 받기 입력 양식을 표시하는 태그 name속성과 id 속성 name 속성은 웹 프로그램과 연계되는 속성으로 한페이지 안에서 고유한 값을 명시해야 한다. id 속성은 해당 페이지에서 그 요소를 식별하기 위한 값으로 고유한 값을 명시해야 한다. id값과 name값은 서로 동일하게 지정해도 무관하다. type 속성에 따라 화면에 표시되는 요소의 종류가 결정된다.(text, password, hidden 등) value 속성은 해당 요소에 기본적으로 작성되어 있을 값을 기술한다. 텍스트를 입력 받는 요소의 경우 maxlength 속성을 사용하여 최대 입력 가능한 글자 수를 제한할 수 있다. 요소의 제목 표시하기 ..
[HTML+CSS] 05_멀티미디어 멀티미디어 #01. 이미지의 표시 1) 이미지를 표시하기 위한 태그 이미지의 사용과 웹 접근성 이미지는 스크린 리더가 인식할 수 없는 형식이므로, 이미지를 통한 내용의 전달은 웹 접근성의 확보 불가능 alt 속성은 스크린 리더에게 이미지의 내용을 알려주기 위한 목적으로 사용하므로, 가급적 반드시 사용하는 것이 좋다. 이미지의 크기 지정하기 weight, height로 이미지의 크기를 픽셀단위로 지정한다. 크기가 주어지지 않으면 원본 크기로 표시 이미지의 경로를 명시하는 방법 절대경로: 웹 사이트상에서 해당 이미지가 위치하는 URL을 명시 상대경로: 현재 HTML파일의 위치를 기준으로 하여 상대적인 위치를 명시. 01-이미지.html 이미지의 표시 크기를 지정하지 않은 경우 이미지의 원본크기로 표시된다. ..
[HTML+CSS] 04_표만들기 표 만들기 #01. Table 태그의 기본 사용 방법 1) 표를 구성하는 태그들 2) Table 구성시 사용 가능한 기본 속성 More Actions 속성적용 가능 태그설명값 border 테두리의 두께를 설정한다. 1부터 정수 형태로 정의 width 넓이를 설정한다. 에 설정할 경우 표의 전체 넓이를 의미한다. , 에 설정할 경우 한칸의 넓이를 의미하며 각 넓이의 합은 에 정의된 넓이보다 클 수 없다. px을 의미하는 정수값.%단위의 값 height 높이를 설정한다. 에 설정할 경우 표의 전체 높이를 의미한다. , 에 설정할 경우 한 칸의 높이를 의미하며 각 열에 대한 높이의 합은 에 정의된 넓이보다 클 수 없다. px을 의미하는 정수값. align 정렬을 의미한다. 에 설정할 경우 부모 요소 안에서 표..
[HTML+CSS] 03_문장이나 단어를 강조하기 문장이나 단어를 강조하기 #01. 문장이나 단어를 강조하기 위한 HTML 태그 글자의 모양/크기/색상 표현 ... 내용 ... 굵게/기울임/밑줄 처리 HTML 설명 … 내용 … 내용을 굵게 표시한다. … 내용 … 내용을 굵게 표시한다. (bold의 약자) … 내용 … 기울임 꼴로 표시한다. (italic의 약자) … 내용 … 밑줄을 표시한다. (underline의 약자) 색상 코드값 알기 다 외우고 다닐수 없으므로 구글에 “색상코드표” 키워드를 검색해서 본다 color picker 구글에 검색후 원하는 색상의 Hex값을 가져다 쓴다. 스타일을 적용시키기 위한 영역 지정하기 태그 자체로는 어떠한 기능도 없다 CSS 스타일을 적용하여, 포함하고 있는 내용을 시각적으로 꾸미기 위한 영역을 지정하는 용도로 사용..
[HTML+CSS] 02_단락의표현 단락의 표현 #01. XHTML에서의 단락 관련 HTML 태그들 1) 단락을 나누기 위한 HTML 태그의 종류 XHTML에서는 단락을 통하여 문서의 구조를 표현하고, 이 태그들이 CSS와 결합하여 페이지의 레이아웃을 구성하게 된다. 태그 설명 div division의 약자로, "영역"을 의미 h1~h6 제목을 의미한다. 1수준부터 6수준까지있다. ol 순서 있는 목록을 의미한다. 이태그안에는 태그가 포함될 수 있으며, 포함된 항목은 순서대로 일련번호가 포함된 상태로 출력된다. ul 순서 없는 목록을 의미한다. 이 태그 안에는 태그가 포함될 수 있으며, 포함된 항목은 순서대로 도형표시가 포함된 상태로 출력된다. 01-문서의제목.html H1 수준의 제목 H2 수준의 제목 H3 수준의 제목 H4 수준의 제목..