본문 바로가기

HTML

(12)

[프론트엔드 입문] 인라인, 블록 요소 내용 열린태그(시작하는태그) /닫힌태그(종료태그) tag = 요소(element) 내용=contents (요소의 내용) 내용 부모요소 / 자식요소 내용 상위(조상)요소 / 하위(후손)요소 (부모요소 / 자식요소) 들여쓰기 (Indent) : Tab 내어쓰기 (Outdent) : Shift Tab 2. 열리고 닫히는 태그 없이, 종료태그 없는 태그 = 빈 태그(empty tag) empty tag 작성방식 (html5) ① : 작성 편리하나 빈 태그 인지 못하고 닫힌 태그 찾으려고 하는 경우 모르는 태그일 때 헷갈릴 수 있음 vue.js 등 이용시에는 /안붙이면 문제 생기는 경우도 많아서 를 더 자주 사용하는 게 좋은 편 ② : >> 기능의 확장 tag 전체 요소의 기본적 역할을 attribute 로 확장..

[프론트엔드 입문] CSS 스타일 세팅 초기화 코드 / Day+4 1. codepen.io > start coding html : 바로 body 부분codepen.io > start coding html : 바로 body 부분 html preprocessor (markdown, pug 등) css preprocessor 전처리 도구들 (scss,.../vendor prefixor의 autoprefixing 유용) js babel, typescript 자주 쓰임 search CDNjs (lodash, react 등의 plugin 자주 사용) login 한 상태로 codepen 작성하면 저장 가능 2. f12개발자도구로 live server 확인해보면 body css에 크롬 디폴트로 margin 8px 활용되고 있음 만들어진 영역 여백은 홈브라우저로부터 제공되며, 크로스브..

[프론트엔드 입문] Day+3 1. 문서(페이지)의 HTML 버전을 지정) HTML은 HTML1, HTML2, HTML3, HTML4, XHTML, HTML5 의 소스를 보면 그 웹사이트는 XHTML사용한다고 보면 됨 그 이전버전은 거의 없음 2. 시작과 종료 태그 문서의 전체 범위 의미 문서의 정보를 나타내는 범위. 웹브라우저가 해석해야할 웹페이지 내의 제목, 설명, 사용 파일 위치, 스타일(CSS)등 '눈에 보이지 않는 정보' 문서의 구조를 나타내는 범위. 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 등 웹페이지의 '보여지는 구조'를 작성하는 범위 3. head 태그에 link 태그tab으로 (연결) main.css를 html에 연결 html lang 태그 "" 내에 ko 변환하면 한국어를 기본으로 사용하는 html 페..

[프론트엔드 입문] VSCODE Day+2 1. 폴더 = 프로젝트 = 디렉토리 2. 파일이름은 기본적으로는 '소문자'로만 생성 (index.html 등) 3. !, enter 또는 tab 클릭하면 자동으로 html 구조 완성됨 4. div 태그 자동완성 Emmet? 5. 앞쪽에 . 로 시작하는 파일이나 폴더는 '숨김 전용 파일/폴더'임 (무시하면 됨) 6. 열린 태그 닫힌 태그 7. beautify (ctrl, alt, l) 내용 정리 플러그인 auto rename tag 플러그인 live server 플러그인 (하단 go live / 우클릭 open with live server) / keyboard shortcuts from preference 이용 8. 탭 우측 하얀 동그라미는 '저장' 안한 상태 Ctrl+S 는 파일 단일 저장 Ctrl +..

이전 1 2 다음

티스토리툴바