JudithHopps JudithHopps

색상 표현 방법 keyword는 색상마다 부여된 이름으로 이 링크에서 목록을 확인할 수 있습니다. ex) white, red, green RGB(A)는 빨강, 초록, 파랑의 광원으로 색을 혼합하는 방식이며 끝에 알파값을 붙여서 투명도를 조절할 수 있죠. ex) rgb (255,25,,255) HEX는 R, G, B, Alpha 값들을 16진수형태로 나타낸 것입니다. ex) #FFFFFF (=#FFF), #00080080(뒤 두자리는 투명도) HSL(A)은 색상, 채도, 명도값 그리고 알파값을 조합하여 색을 나타냅니다. ex) hsl(0,100%,100%) , hsl(30,40%,100%) 인라인 요소와 블록 요소 인라인 요소는 비닐이나 랩 안에 내용물을 넣은 것과도 같습니다. 이 텍스트처럼, 일정한 바깥..

font-style 속성은 글자를 기울일 때 사용할 수 있습니다. italic과 oblique은 얼핏 보면 비슷한데 italic이 '기울여서 쓴' 서체라면 oblique는 본래 서체를 기울여놓은 것입니다. 서체마다 둘 다 있거나 한 쪽만 있거나 둘 다 없을 수도 있는데 이들은 한쪽이 없을 시 상호 교차되어 사용됩니다. font-weight 속성은 글자의 굵기를 조절합니다. 서체가 어떤 굵기를 지원하느냐에 따라 normal과 bold중에 선택하거나 100~900 사이 100 단위의 수치를 사용합니다. font-size 속성은 말 그대로 글자의 크기를 지정합니다. 단위로는 px과 %, em, rem이 사용되죠. px는 절대값으로서 픽셀 단위입니다. 100%는 1em으로, 이들은 부모 요소와의 상대적 크기를 ..

1. 적용방법 a. 인라인 스타일(inline style) 방식 HTML 태그마다 style 속성으로 CSS 코드를 넣어주는 방식입니다. 여러 요소들에 공통 속성을 재사용하여 부여할 수 없고 HTML 코드와 CSS 코드가 분리되지 않기 때문에 특별한 경우를 제외하고는 사용되지 않습니다. b. 내부 스타일 시트(internal style sheet) 방식 head 태그 안에 style 태그를 두고 그 안에 CSS 코드를 작성하는 방식입니다. HTML과 CSS의 전체 코드량이 많지 않고 CSS가 해당 HTML 문서에서만 적용될 경우 유용하게 사용될 수 있습니다. c. 링킹 스타일 시트(linking style sheet) 방식 외부의 CSS 파일을 HTML 문서에 연결하는 것입니다. HTML과 CSS의 코드..

form 1. 형식 정보를 제출하기 위한 태그들을 포함 autocomplete 속성: 자동완성 여부 (기본: on) 입력을 받는 요소 type 속성을 통해 다양화 인풋 요소마다의 라벨 for 속성값을 인풋 요소의 id와 연결. 인풋의 클릭 영역 확장 버튼 type 속성에 submit(제출), reset(초기화), button(기본 동작 없음) 2. 그룹화 폼 태그 내 입력요소와 라벨들을 그룹화 disabled 속성: 포함된 입력요소 비활성화 필드셋 요소의 제목 또는 설명 input 👉 의 타입과 속성들 보기 텍스트 관련 인풋 속성들 속성설명비고 placeholder 빈 칸에 보이는 안내문 maxlength 최대 길이 minlength 최소 길이 위반시 submit이 거부됨 숫자 관련 인풋 속성들 속성설명..

링크 1. 형식 target 속성값설명비고 _self 현재 창 기본 _blank 새 창 텍스트나 내부 이미지의 alt 등으로 명시 필요 _parent 부모 프레임 사용시 _top 최상위 프레임 사용시 2. 속성 or Phone address 형식 웹사이트 주소: yalco.kr 오피스: 전산시 개발구 코딩동 123번길 45 전화 010-1234-5678 이메일: yalco@kakao.com

약어 구문 Emmet은 생성된 트리 내 요소의 위치와 요소의 속성을 설명하기 위해 CSS 선택기와 유사한 구문을 사용합니다. 집단 div또는 같은 요소 이름을 사용 하여 HTML 태그 p를 생성 할 수 있습니다. divEmmet에는 미리 정의된 사용 가능한 태그 이름 세트가 없으므로 → , foo→ 등 의 단어를 작성하여 태그로 변환할 수 있습니다 . 중첩 연산자 중첩 연산자는 생성된 트리 내부에 약어 요소를 배치하는 데 사용됩니다(컨텍스트 요소 내부 또는 근처에 배치해야 하는지 여부). 어린이:> >연산자를 사용하여 요소를 서로 중첩 할 수 있습니다 . div>ul>li ...생산할 예정 형제자매:+ 연산자를 사용 +하여 동일한 수준에서 요소를 서로 가까이에 배치합니다. div+p+bq ... 출력합니..

img : html 문서에 이미지를 넣습니다. - 속성) src 원본파일 경로 절대경로 또는 상대경로 alt 대체 텍스트 스크린 리더, 원본파일 무효시(텍스트 설명이며 필수X) title 툴팁 alt의 대체제나 반복이 되어서는 안됨 width 너비 픽셀 단위의 정수 height 높이 픽셀 단위의 정수 table : html 문서에 이미지를 넣습니다. - 속성) 태그설명비고 테이블 표 설명 또는 제목 선택사항 테이블의 행 테이블의 데이터 셀 테이블의 헤더 부분 앞에 와야 함 테이블의 본문 본 내용을 담음 테이블의 푸터 부분 뒤에 와야 함 열 또는 행의 헤더 scope 속성으로 row, col 중 선택 colspan 열 병합 rowspan 행 병합 표에 열을 묶어서 속성 부여 보다 뒤, 그 외 요소보다 앞에..

! 참고 단축키 : ul>li*4 + tab 버튼 목록 태그 순서가 없는 목록 순서가 있는 목록 type, start 속성 사용 가능 목록 아이템 ul, ol 태그의 1촌 자식으로 이 태그만 가능 용어 태그 설명 목록을 생성합니다. 설명 혹은 정의 리스트에서 용어를 나타냅니다. 요소 안에 위치해야 합니다. 앞선 용어()에 대한 설명, 정의, 또는 값을 제공한다. 다음 위치