the Rabbit_Sand, IT Blog 🍀

선택자 : 특정 html 요소를 선택할 때 사용하는 기능이고, 해당 요소를 선택하여 원하는 스타일과 기능을 적용시킬 수 있다. 1) 전체 선택자(*) : 모든 요소를 선택할 때 사용한다. 전체 선택자 * 모든 요소를 선택할 때 사용한다. 전체 선택자 *을 사용하여 style color를 hopink로 지정했으므로 태그와 태그 모두 핫핑크색으로 출력된다. 2) 태그 선택자(태그명) : 해당 문서 내에 있는 같은 태그들을 모두 선택할 때 사용한다. 태그 선택자 (태그명) 해당 문서 내의 같은 태그들을 전부 선택할 때 사용한다. 태그 선택자를 사용하여 style color를 지정했다. p 태그는 아쿠아색, pre 태그는 노랑색으로 지정하였으므로 p 태그는 모두 아쿠아색으로 출력되며 pre 태그는 모두 노랑색으..

태그 1) href="파일명.html" : 해당 html 파일로 연결한다. 하이퍼링크태그로 가기 2) href="url" : 해당 url 주소로 연결한다. 티스토리 다음 연결하고 싶은 페이지의 url을 넣으면 해당 페이지로 이동한다. 이때 해당 페이지를 새 창에다 띄우고 싶으면 target을 사용하여 '_blank'라는 속성값을 넣으면 된다. 3) 앵커 태그 : 페이지 내에서 해당 부분으로 점프시킨다. 첫 번째 문단 두 번째 문단 세 번째 문단 첫 번째 문단 방황하여도, 공자는 우리의 우리의 위하여 꽃이 인생을 불어 꽃이 칼이다. 사랑의 속에 온갖 인간의 그들의 주는 청춘의 위하여, 것이다. 어디 이상의 주는 힘있다. 하였으며, 천자만홍이 끓는 붙잡아 뭇 그들의 평화스러운 너의 피어나는 약동하다. 쓸쓸한..

블럭 요소와 인라인 요소 1) 블럭 요소 : 한 줄 단위로 영역을 차지한다. 블럭 요소는 줄바꿈이 적용되므로 줄바꿈을 하면 이미 존재하는 요소의 다음 줄에 출력된다. - , , , 등이 블럭 요소에 해당한다. 2) 인라인 요소 : 내용(content)에 해당하는 부분만 영역을 차지한다. 인라인 요소는 줄바꿈이 적용되지 않으므로 엔터를 쳐서 밑으로 내려도 옆으로 쭉 이어서 출력된다. - , , , , , , 등이 인라인 요소에 해당한다. 태그와 태그 1) 태그 : 태그는 블럭 요소에 해당하며, 한 줄 단위로 영역을 차지하므로 줄바꿈이 적용된다. 첫 번째 영역 두 번째 영역 세 번째 영역 2) 태그 : 태그는 인라인 요소에 해당하며, 내용 부분만 영역을 차지하므로 줄바꿈이 적용되지 않는다. 첫 번째 영역 두..

태그 : 사용자에게 값을 입력받을 텍스트 상자나 체크박스 등을 만들 때 사용한다. 아이디: 비밀번호: 성별: 남 여 회원 가입 안에 입력할 때, 아이디를 입력하는 곳엔 'type="text"'로 작성한다. 비밀번호를 입력하는 곳엔 'type="password"'로 작성한다. 성별을 입력하는 곳엔 'type="radio"'로 작성한다. radio는 둥근 모양의 선택란이다. 입력받을 버튼은 'type="submit"'(제출) 또는 'type="reset"'(초기화)으로 작성한다. 버튼의 이름은 value로 지정해주면 되고, 지정하지 않으면 submit은 제출, reset은 초기화로 보여진다. 버튼은 태그로도 만들 수 있다. 이땐 과 사이에 버튼의 이름을 지정하면 된다. , 태그 1) : 태그 안에 있는 제출..

오디오와 관련된 태그 controls autoplay 페이지를 열자마자 자동으로 재생이 되도록 한다. 단, 브라우저마다 다른데 크롬은 자동 재생이 되지 않고 익스플로러가 자동 재생이 된다. 이는 생략 가능하다. loop 오디오 재생 시간이 다 끝난 후 오디오를 또 반복하도록 한다. 이는 생략 가능하다. 비디오와 관련된 태그

이미지와 관련된 태그 width와 height로 가로 길이와 세로 길이를 조절할 수 있다. 이때, 고정 길이는 px로 지정하고, 가변 길이는 %로 지정한다. 고정 길이(px) → 기본값으로 설정. 화면 사이즈가 변동돼도 사진의 크기는 고정. 가변 길이(%) → 화면 사이즈에 따라 사진의 크기가 달라짐. 이미지 경로를 제대로 작성했을 때 1번 사진과 같이 해당 이미지가 뜬다. 그리고 이미지 경로가 제대로 작성되지 않았을 때, 즉 해당 경로에 이미지가 없거나 경로가 잘못 작성되었을 경우엔 2번 사진과 같이 엑박 표시와 함께 해당 이미지에 대한 설명 문구가 뜬다. width="가로크기(px/%)" height="세로크기(px/%)" 가로크기와 세로크기를 'px'로 설정하면 화면이 커지든 작아지든 사진 크기는 ..

표를 구성하는 태그 , , , 1) : 표를 생성한다. 2) : 표의 제목 셀을 나타낸다. - 글자를 굵게 표시하며, 가운데 정렬한다. 3) : 표의 한 행을 나타낸다. 4) : 표의 일반 셀을 나타낸다. 기본 형태의 표 생성하기 기본 형태의 표 생성하기 브라우저명 제조사 홈페이지 Internet Explorer Microsoft https://www.microsoft.com Chrome Google https://www.google.com Firefox Mozilla https://www.mozilla.com ① 표 생성하기 표를 생성하기 위해 태그를 사용한다. 에서 border는 표 바깥선 굵기는 나타내는 것이다. 속성값이 커질 수록 표 바깥선 굵기도 굵어진다. ② 표 내에서의 제목 셀 만들기 표 내..

: 목록을 나타낸다. 첫 번째 목록 두 번째 목록 : 목록의 순서가 없이 표시된다. ul 과일 사과 포도 채소 1. 과일 2. 채소 가 아니라 단순 도형으로 목록을 표시한다. 안에 를 사용하면 목록 내의 목록을 만들 수 있다. : 목록의 순서를 표시한다. - 속성값은 숫자가 기본값이고, 숫자 외에 a와 A, i, I가 있다. ol type 귤 사과 바나나 파인애플 start 귤 사과 바나나 파인애플 reserved 귤 포도 바나나 파인애플 type 에 type으로 목록의 순서(숫자/영어 대소문자/로마표기 대소문자)를 여러 가지로 나타낼 수 있다. type의 속성값을 'a'로 넣으면 abc순으로. 'A'로 넣으면 ABC순으로, 'i'로 넣으면 로마문자 ⅰⅱⅲ순으로, 'I'로 넣으면 ⅠⅡⅢ순으로 나타난다. ..

글자 크기 태그 : ~ 태그 태그 태그 태그 태그 태그 글자 크기 태그는 부터 까지 있으며, 이 가장 큰 글자이고 이 가장 작은 글자이다. 만약 을 사용하면 은 존재하지 않는 태그이므로 기본 글자 크기로 출력이 된다. 구분선 태그 : 구분선 위는 구분선 로 구분선을 만들 수 있다. 로 작성하면 구분선이 두 줄 생긴다. 문단 나누는 태그 , 이것은 문단 영역을 나누는 p 태그이다. 줄바꿈을 할 땐 줄바꿈 태그를 사용해야 한다. 하나의 공백만 표시할 수 있어서 별도의 기호 문구를 작성해야 한다. 이것은 문단 영역을 나누는 pre 태그이다. 줄바꿈 태그를 사용하지 않아도 줄바꿈이 된다. 여러 개의 공백을 표시할 수 있다. 와 는 문단을 나누는 태그이다. 이때 각각 특징이 다르다. 는 줄바꿈을 할 때 이라는 줄..

1) : 문서 유형을 나타낸다. html 문서로 작성한다는 뜻이다. 2) : html 문서의 시작과 끝을 표시한다. ① lang은 언어(language)를 뜻한다. ② : html 문서의 설정 언어는 한국어('ko')이다. - 설정 언어 코드 : de(독일어), en(영어), fr(불어), ja(일본어), ko(한국어), zh(중국어) 3) : 머리 부분을 담당하며, 문서의 각종 정보와 문서 자체에 대한 설명을 작성한다. - 이 부분에서 , , , , 등이 들어간다. 4) : 몸체 부분을 담당하며, 화면에 출력해서 보여주는 모든 정보를 작성한다. - 에서 들어가는 태그들을 제외한 모든 태그들을 쓸 수 있다. 5) : 주석을 뜻하며, 코드에 대해 설명할 때 사용한다.