https://code.visualstudio.com/docs/?dv=winhttps://penguingoon.tistory.com/185: 웹사이트 개발용 도구, 대부분의 최신 브라우저에는 개발자 도구가 탑재되어있다. HTML CSS 코드 확인,
일반적으로 HTML 문서는 다음과 같은 기본 구조를 가진다.: 문서의 첫 부분에서 문서 유형을 지정하는 단일 태그: 문서 유형을 지정한 후 실제 문서가 시작되고 끝나는 것을 나타내는 태그 / 이 태그의 내부에 다양한 태그들이 포함되어 문서의 내용을 구성함.: 웹 브라우
(1) 블록 레벨 요소를 만드는 태그 - 블록 태그(2) 인라인 요소를 만드는 태그 - 인라인 태그블록 레벨 요소: 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성함.\-> ex) p태그, h태그인라인 요소: 자기에게 필요한 만큼의 공간만 차지한다.\-> ex)
: 콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 혁할을 하는 태그콘텐츠 내용을 구분하거나, 공통적인 스타일을 적용하고자 할 때 사용<div> </div> : 블록 레벨 컨테이너<span> </s
: 연관있는 항목 (item) 들을 나열한 것HTML 목록은 순서 없는 목록과 순서 있는 목록 으로 구분된다.순서 없는 목록<ul> </ul>순서 있는 목록<ol> </ol>항목 태그는 순서가 있는 목록과 순서가 없는 목록 모두 <li> &l
: 다수의 옵션 (선택지) 을 포함할 수 있는 선택 메뉴. 메뉴 안에 포함되는 옵션은 option 태그를 사용해 표시한다.select에는 input과 마찬가지로 name을 지정할 수 있으며, 각각의 option에는 value 속성을 지정할 수 있다.value는 실제로
: 사용자가 입력한 데이터 (입력값) 를 서버로 보내기 위해 사용하는 태그.: 정보를 제공하는 호스트 (host) 이다.: 입력 요소들을 감싸며, 입력 값을 서버 측으로 제출 (submit) 할 수 있다.action : 입력값을 전송할 서버의 urlmethod : 입력
선택자 : 어떤 요소(ex : 텍스트, 이미지...) 에 스타일을 적용할지에 대한 정보{중괄호} : 선택한 요소에 적요앟ㄹ 스타일을 정의하는 영역속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보 (색상, 크기 등)속성값 : 어떻게 정의하고 싶은지에 대한 정보: 태그
: 어떤 요소에 스타일을 적용할 것인지에 대한 정보선택자의 종류\-> 기본 선택자\-> 그룹 선택자\-> 특성 선택자\-> 결합 선택자\-> 의사 클래스\-> 의사 요소모든 요소를 선택한다.\*(애스터리스크)는 '문서 내의 모든 요소'를 의미하는 기호이다.주어진 이름을
: 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.ex) div, p, h1 등: 자기에게 필요한 만큼의 공간만 차지한다.ex) span, a 등: 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다.display 속성 값: display에는 미리 정의되어
: 브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다. 이 영역을 '박스'라 표현하며, CSS는 박스의 크기, 위치, 속성 (색, 배경, 테두리 모양 등)을 결정할 수 있다.박스 영역\-> 콘텐츠 영역 / 안쪽 여백 / 경계
padding 과 margin 모두 콘텐츠 주변에 여백을 정의하기 위한 속성.여백은 상하좌우 네 개의 면에 존재하는 영역임.각 면에 개별적으로 두께를 정의하기위해 다음 두 가지 방법을 사용한다.\-> 하위 속성 정의하기\-> 여러 값을 한 번에 정의하기margin 에도