'HTML' 카테고리의 글 목록 (2 Page)

[개미의 걸음 HTML&CSS 16차시] 테이블 관련 스타일

테이블 관련 속성 caption-side 테이블 제목 위치를 설정할 때 사용하는 속성 border 테이블 테두리 스타일을 설정할 때 사용하는 속성 border-collapse 테이블 테두리를 통합*분리할 때 사용하는 속성 border-spacing 인접한 셀 테두리 사이의 거리를 설정할 때 사용하는 속성 px, em 등의 단위를 사용하여 지정[값이 두개인 경우 처음이 수평거리 값, 두번째가 수직거리 값] empty-cells 빈 셀의 표시 여부를 설정할 때 사용하는 속성 width, height 표 너비와 높이를 설정할 때 사용하는 속성 table-layout 콘텐츠에 맞게 셀 너비 지정할 때 사용하는 속성 text-align 셀 안의 텍스트의 수평 정렬 방법을 설정할 때 사용하는 속성 left, cen..

HTML 2020. 8. 16. 23:23

[개미의 걸음 HTML&CSS 15차시] 목록 관련 스타일

목록 관련 속성 주요 속성 설 명 list-style-type bullet과 번호 스타일을 지정하는 속성 list-style-image bullet을 원하는 이미지로 지정하는 속성 list-style-position list에서 bullet의 위치를 지정하는 속성 * inside : 불릿이나 숫자를 안쪽으로 들여씀 * outside : 기본값으로 불릿이나 숫자를 밖으로 내어씀 list-style 위의 3가지 속성들을 한꺼번에 작성 가능한 속성 ① list-style-type 속성 속성값 의미 속성값 의미 none bullet없애기 symbols 1로 시작하는 십진수 circle 빈 원 decimal 1로 시작하는 십진수 disc 검정색으로 채워진 원 decimal-leading-zero 01로 시작하는 ..

HTML 2020. 8. 15. 23:23

[개미의 걸음 HTML&CSS 14차시] 텍스트 관련 스타일

텍스트 관련 속성 주요 속성 설 명 font-size 숫자에 px, %, rem 등의 단위를 붙임 7단계[xx-small, x-small, small, medium(표준크기), large, x-large, xx-large]로도 지정 가능 font-family 폰트 이름 : 한글, 띄어쓰기가 있는 폰트는 작은따옴표나 큰따옴표로 감싸서 이름을 지정 키워드 : serif(명조체), sans-serif(고딕체), cursive(필기체), fantasy(장식 계열), monospace(고정폭) @font-face 사용자 시스템에 없는 글꼴 정보를 웹 문서 안에 함께 저장하여 누구나 글꼴을 사용 가능하게 함 → 웹 문서를 통해 필요한 글꼴들을 사용자 컴퓨터에 다운로드 한 후 표시 font-weight 1~1000 ..

HTML 2020. 8. 14. 23:23

[개미의 걸음 HTML&CSS 13차시] 배경 관련 스타일(색상, 이미지, 그라데이션)

들어가기전.. 색상 표기법 설 명 16진수 표기법 #RRGGBB; [# 6자리의 16진수] #ffff00처럼 두자리씩 중복될 경우 #ff0으로 하나씩만 입력해도 됨 #000000[검정색]~#ffffff[흰색] RGB, RGBA rgb(red 값, green 값, blue 값); rgba(red 값, green 값, blue 값, alpha값); alpha값은 불투명도를 나타내는 값[0(투명)~1(완전 불투명)사이의 값을 가짐] rgb(0,0,0)[검정색]~rgb(255,255,255)[흰색] HSL, HSLA hsl(hue[색상] 값, saturation[채도] 값, lightness[밝기] 값) hsla(hue[색상] 값, saturation[채도] 값, lightness[밝기] 값, alpha[불투명..

HTML 2020. 8. 13. 23:23

[개미의 걸음 HTML&CSS 12차시] CSS의 기본 구조

들어가기 전... 스타일[style] HTML문서에서 자주 사용하는 글꼴이나 색상, 정렬 등 시각적으로 보기 좋게 꾸미는 것 인라인 스타일[Inline style] 스타일을 적용할 태그 안에 style속성을 이용해서 스타일을 지정하는 것 스타일 시트[stylesheet] 스타일 규칙들을 한눈에 확인하고 필요할 때 수정하기 위해 스타일들을 묶어둔 곳 스타일 시트는 내부스타일 시트와 외부스타일 시트로 나뉜다. * 내부스타일시트 : 태그 안에 태그를 사용해 작성 * 외부스타일시트 : 웹 문서에서 가져와서 태그 안에 태그를 사용해 작성 스타일 상속[style inherit] 부모 요소에 있는 스타일 속성들이 자식 요소로 전달되는 것 → 스타일의 모든 속성이 상속되는 것은 아님![배경색*배경 이미지는 상속되지 않..

HTML 2020. 8. 12. 23:23

[개미의 걸음 HTML&CSS 11차시] 멀티미디어를 위한 태그

HTML5에서의 멀티미디어 HTML5에서는 엡 브라우저 안에서 멀티미디어를 직접 재생 가능 HTML4까지는 웹 브라우저에 멀티미디어 파일을 삽입하기 위해서는 별도의 프로그램이 필요 [플러그인 프로그램을 사용해야지만 웹 브라우저에서 멀티미디어 재생 가능] 대부분의 웹사이트들이 점점 플래시 플레이어 지원을 중단해나가고 있는 추세 크롬 브라우저는 2020년말까지 플래시 플래이어 지원을 완전히 중단할 예정] 태그의 경우, HTML5에서만 지원하므로 이전 브라우저에서 비디오 삽입시 태그나 태 그 설 명 웹 문서 안에서 처리할 수 없는 외부 파일을 삽입하기 위해 사용하는 태그 닫는 태그가 없으며 주로 태그를 지원하지 않는 이전 브라우저에서 사용됨 웹 문서 안에서 처리할 수 없는 외부 파일을 삽입하기 위해 사용하는 ..

HTML 2020. 8. 11. 23:23

[개미의 걸음 HTML&CSS 10차시] 시맨틱(semantic) 태그

시멘틱 태그[Semantic tag] 태그만 봐도 페이지 구조를 쉽게 이해할 수 있도록 정의된 태그 HTML5부터 추가된 기능 태그를 사용해도 되지만 각 블록들이 어떤 역할을 하는지 구분하기 쉽게하기 위해 시맨틱 태그 사용 시맨틱 태그에는 header, nav, main, section, article, aside, footer이 있다. 시맨틱 태그를 사용하면 소스만으로도 문서 내용파악이 가능해 사이트 검색시 필요한 내용을 정확히 찾을 수 있음 [원하는 부분의 시맨틱 태그만 검색하면 되므로] 시맨틱 태그 설 명 태그 사이트의 윗부분, 본문의 머리말 등 특정 부분의 머리말에 해당 주로 태그를 사용해 검색창을 넣거나 태그를 사용해 메뉴를 삽입 태그 사이트 안의 문서나 다른 사이트 문서로 연결하는 링크 모음을..

HTML 2020. 8. 10. 23:23

[개미의 걸음 HTML&CSS 9차시] 박스모델을 생성하는 태그(div, iframe)

태그 은 inline frame의 약자로 웹 페이지 안에 틀을 만들어 다른 웹페이지를 삽입하는 태그 scr속성을 통해 본인이 만든 html파일이나 동영상 등을 삽입 가능 width와 height속성을 통해 frame의 크기를 조절 가능 frameborder 속성값을 0으로 지정하면 iframe의 테두리를 없앨 수 있음 틀을 지정하는 방법에는 iframe, ajax, jinja 등을 사용하는 방법이 있다. 태그의 주요 속성 설 명 scr 인라인 프레임에 표시할 문서의 주소를 설정하는 속성 width 인라인 프레임의 너비를 설정하는 속성 height 인라인 프레임의 높이를 설정하는 속성 name 인라인 프레임의 이름을 설정하는 속성 하나의 인라인 프레임에 여러가지 내용을 번갈아 표시할 때 유용 seamles..

HTML 2020. 8. 9. 23:23