써치킴의 우당탕탕 개발 블로그

들여쓰기/내어쓰기를 통해서 코드를 정리한다. 나를 기준으로 나를 감싸고 있는 바로 위 단계의 요소는 나의 부모 요소. 나를 기준으로 내가 감싸고 있는 바로 아래 단계의 요소는 자식 요소. 부모 요소 포함 나를 감싸고 있는 모든 요소는 상위(조상) 요소. 자식 요소 포함 내가 감싸고 있는 모든 요소는 하위(후손) 요소.

요소(Element) 내용 앞에 있는 태그 : 시작(열린) 태그 뒤에 있는 태그 : 종료(닫힌) 태그 내용 : 요소의 내용(Contents)

브라우저 스타일 초기화 방법 google > reset.css cdn 검색 jsdelivr.com 또는 cdnjs.com 진입 reset.min.css > copy HTML 4. 코드 추가 codepen.in 초기화 방법 CSS > 설정(톱니바퀴 아이콘) 선택 CSS Base > Reset 선택 Close ? 파일명.min.확장자 min(Minify의 약자) 키워드는 파일이 난독화나 경량화되었다는 것을 의미. 외부에서 가져와 사용하는 플러그인, 라이브러리 등을 직접 수정할 상황은 드물기 때문에 굳이 원본을 사용할 필요가 없어 압축된 버전을 쓰는 것을 권장.

간단한 코드를 테스트를 하기위해 Codepen.io 사용 https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io

모든 파일 공백 설정 방법 Code > 기본 설정 > 설정 tab size 검색 Editor : Tab Size > 2(원하는 공백) 설정

브라우저는 index라는 이름을 갖는 html 파일을 자동으로 찾는다. Home / 경로는 루트경로이기 때문에 루트에 있는 index라는 이름을 갖는 html파일을 찾아 이동한다.

상대 경로 ./ : 주변에서 찾는 개념(생략 가능) ../ : 상위 폴더 주변에서 찾는 개념 절대 경로 http(https) : 원격의 다른 사이트를 의미 /(//) : 최상위 경로(루트 경로)

HTML 문서의 제목(title)을 정의하는 TITLE 태그 SEARCHKIM 웹 브라우저 탭에 표시됨. 외부 문서(대부분 CSS파일)를 가져와 연결할 때 사용하는 LINK 태그 ref : 가져올 문서와 관계(필수속성) Relationship의 약어 가져올 외부문서가 현재의 HTML과 어떤 관계인지 명시하는 속성 href : 가져올 문서의 경로 ? Favicon(파비콘) Favorite Icon을 줄여서 Favicon(파비콘)이라고 부름. favicon.ico 또는 favicon.png파일이 주로 사용됨. 스타일(CSS)를 HTML 문서 안에서 작성하는 STYLE 태그 외부에 있는 자바스크립트(JS) 파일을 가져오는 SCRIPT 태그 src Source의 약어 사용할 소스 코드(파일)를 지정하는 속성 자..

문서의 정보를 나타내는 HEAD 태그에 CSS, JS 연결 Hello world! link 태그 : 작성한 css 파일을 가져와서 현재의 html 파일과 연결 script 태그 : 작성한 javascript 파일을 가져와서 현재의 html 파일과 연결

: 시작태그 : 종료태그 문서의 전체를 나타내는 범위 HTML 태그 HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할. 문서의 정보를 나타내는 범위 HEAD 태그 웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 위치, 스타일(CSS) 같은, 웹 페이지의 보이지 않는 정보를 작성하는 범위. 문서의 구조를 나타내는 범위 BODY 태그 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은, 웹 페이지의 보여지는 구조를 작성하는 범위.