HTML

CSS 선언 방식

1. 내장 방식 : 의 내용(Contents)로 스타일을 작성하는 방식. 2. 인라인 방식 : 요소의 style 속성에 직접 스타일을 작성하는 방식(선택자 없음) 유지 보수 측면에서 안좋아 비추천, 스타일 바꿀 때 CSS가서 바꾸는게 좋음. 3. 링크 방식 : 로 외부 CSS 문서를 가져와서 연결하는 방식. 병렬 방식으로 볼 수 있음. main.css 파일의 내용 div { color: green; margin: 50px; } 4. @import 방식 : CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식. 직렬 방식으로 볼 수 있고, 연결이 지연됨. main.css 파일의 내용 @import url("./box.css"); div { color: green;..

HTML 전역 속성

HTML 전체 영역에서 사용할 수 있는 태그 body 전체 영역에서 사용 가능함. 1. 요소의 정보나 설명을 지정 2. 요소에 적용할 스타일(CSS)을 지정 3. 요소를 지칭하는 중복 가능한 이름 4. 요소를 지칭하는 고유한 이름 5. 요소에 데이터를 지정

HTML의 주석처리

주석 : 수정사항이나 설명 등을 작성하는 것으로 브라우저는 이 태그를 해석하지 않기 때문에, 코드 위에 있어도 화면에 내용이 표시되지 않음. 식으로 하며, 영역 선택 후 윈도우 기준 Ctrl+/ 맥 기준 Cmd+/ 로 가능하다. ※ CSS의 주석처리는 /* */ 지만 단축키는 대부분 같으니 단축키만 알아도 된다.

HTML 자주 사용하는 태그2

1. 인라인(글자) 요소 특별한 의미가 없는 구분을 위한 요소 2. (Break, 인라인(글자) 요소) 줄바꿈 요소. 3. 인라인(글자) 요소, 블록(상자) 요소 사용자가 데이터를 입력하는 요소. type : 입력받을 데이터의 타입. 여기서 데이터 text 타입에 value="안녕하세요" /> 를 입력시 미리 칸에 입력되어있음. placeholder="이름를 입력하세요" /> 를 입력시 미리 칸에 표시되나 사용자가 활성화시키면 사라짐. 데이터 힌트를 줄 때 사용 ex) 생년월일을 입력하세요! , 번호를 입력하세요!(-제외) disabled /> 를 입력시 입력 요소가 비활성화됨. 여기서 데이터 checkbox 타입에 여기서 checkbox" /> 포도 여기서 checkbox" /> 딸기 하게되면 체크 박..

HTML 자주 사용하는 태그 요소

1. (Division, 블록(상자) 요소) 특별한 의미가 없이, 그저 구분을 위한 요소라 자주 사용 2. (Heading, 블록(상자) 요소) 제목을 의미하는 요소. 1 ~ 6번까지 있다. 3. (Paragraph, 블록(상자) 요소) 문장을 의미하는 요소. 1번 div로 대체 가능하나, p태그가 갖는 특성으로 좀 더 직관성이 생김. 4. (image, 인라인(글자) 요소) 이미지를 삽입하는 요소. 필수 속성인 src과 alt는 각각 src : 삽입할 이미지의 경로(source) alt : 삽입할 이미지의 이름(alternate) 5. (Unordered List, 블록(상자) 요소) 순서가 필요없는 목록의 집합. ※ 순서필요시 태그 활용, 사용 빈도 적음 ul 태그의 자식으로는 li 태그가 한개이상나..

HTML 빈태그

vs 는 편리하고, HTML 1/2/3/4/5 에서 사용 / 열리는 태그로 착각할 수 있다. 는 안전하고, XHTML/HTML5 에서 사용 빈태그의 예시로 태그는 줄바꿈을 주는 기능을 하는 태그로, 빈태그임. 이미지를 불러오는 태그로, 닫는 태그가 없음. 대신 src를 써야한다.

HTML 부모와 자식 요소

내용 위와 같은 내용에서 태그1에게 태그2는 자식이고, 태그 2, 3은 결국 태그 1의 후손이다. 태그1에 속한다고 볼 수 있음. 종속되는 관계이다.

HTML 상대 경로와 절대 경로

상대경로 ./ → 주변 경로로 탐색 (./는 생략 가능함) ../ → 상위 폴더로 탐색 절대 경로 http(https) / → //와 같음, 최상위 경로(루트)

Doctype(DTD) HTML 기본 양식 불러오기(Visual Studio code)

Visual Studio Code(Vs Code)를 켠 뒤 HTML 파일에서 느낌표를 치게되면 아래와 같이 나온다. 위와 같은 상태에서 Enter 키나 Tab 키를 누르면 아래와 같이 기본 구조가 만들어진다.

HTML, CSS, JS 개요

HTML (Hyper Text Markup Language) - 기획자의 영역 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당 ex) 얼굴에서 눈, 코, 입, 귀 등 CSS (Cascading Style Sheets) - 디자이너의 영역 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당 ex) 얼굴에서 눈, 코, 입, 귀 등의 위치나 크기, 색상 등 JS (JavaScript) - 개발자의 영역 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당. ex) 얼굴에서 각 이목구비의 기능, 피부를 눌렀을 때 나오는 탄성 등 -------------------------------------------- HTML..