Code Playground

< h1 > Code Playground </ h1 >

위와 같은 리스트를 html, css로 표현할 때,실제 태그에 숫자를 적지 않고 가상클래스에 counter()를 사용하여 표현할 수 있다. 1. counter-reset : 카운터이름 시작숫자 /* Set "my-counter" to 0 */ counter-reset: my-counter; /* Set "my-counter" to -1 */ counter-reset: my-counter -1; /* Set "counter1" to 1, and "counter2" to 4 */ counter-reset: counter1 1 counter2 4; /* Cancel any reset that could have been set in less specific rules */ counter-reset: none;..

Day3- input태그를 이용한 입력양식- [1] XHTML에서 사용되던 태그 --->영역 지정 ->파일 첨부를 위해 ->get: 속도 빠름/보안 취약/ 글자 1024제한/새로고침O ->post: 속도 느림/보안 나음/글자 무제한/새로고침X --->그룹 형성 ---> 그룹 제목 표시 제목-기타 들어갈 수 있는 속성: placeholder: 설명글 ex)아이디를 입력하시오. 제목 --->JS와 같이 사용 -> 제출 ->모든 입력 내용 삭제=버튼 표시 텍스트 ->이미지 버튼 ... 화면표시 내용 ...기본적으로 작성되어있을 내용 [2] HTML5에서 추가된 태그

Day2- 문장 꾸미기/테이블/멀티미디어- [1] 문장/단어 강조1. 폰트 태그.... , 굵게 기울임 / 밑줄 2. ...: CSS스타일을 적용하기 위한 영역 지정 3. ...: 형광펜 기능 4. ... 링크 기능 -"#"-현재 페이지로 이동 / "#id값" -그 id값 위치로 이동 [2] 테이블 만들기 ---> 상단 제목 영역(생략가능) --->1줄 ->열의 제목 ->열의 내용 --->본문(생략가능) --->하단(생략가능) (기타) rowspan (th, td에 적용 가능) 행 병합(세로로 병합) colspan (th, td에 적용 가능) 열 병합(가로로 병합) [3] 멀티미디어 1. 이미지: 2. 이미지 상대경로 표시법../ ---> 한 칸 위로./ ---> 현재 폴더ex) folder1/photo..

Day1 -HTML의 기본구조- 1. 기본 구조 2. 단락관련 태그~: 제목, / : 리스트(ordered, unordered): 본문: 인용문: 영역 나눔: 직선 표시 / : 줄 바꿈: 주소, 저작권(카피라이트), 회사 연락처 등등 *id 속성: -웹 페이지에서 고유한 요소를 의미하는 값. -특수문자:© :카피라이트 특수문자 :띄어쓰기 & :&: ---> >: « 내용 »왼쪽 화살표/오른쪽 화살표: ← / → *구조를 표현하기 위한 기타 시멘틱 태그들: 주로 ~와 같이 사용: 사이트 앞머리, 머릿글, 사이트 소개 등등: 블로그 포스팅, 뉴스 기사, 회사 소개 등: 본문과 상관없는 사이드바/배너 영역: 페이지 하단:주로 메뉴: 제목과 관련 부제목 하나로 묶기