본문 바로가기

전체 글

 (166)
HTML 주석 및 전역 속성 주석 Windows: Ctrl + / MacOs: Cmd + / 수정사항이나 설명 등을 작성하는 게 주석입니다. 브라우저는 이 태그를 해석하지 않기 때문에 화면에 내용이 표시되지 않습니다. 전역 속성 전체 영역에서 사용할 수 있는 속성입니다. title 속성은 요소의 정보나 설명을 지정합니다. style 속성은 요소에 적용할 스타일(CSS)을 지정합니다. class 속성은 요소를 지칭하는 중복 가능한 이름입니다. id 속성은 요소를 지칭하는 고유한 이름입니다. title 속성은 요소의 정보나 설명을 지정합니다. data-이름 속성은 요소에 데이터를 지정합니다.
HTML 핵심 요소 (Division) 요소는 블록(상자) 요소며, 특별한 의미가 없는 구분을 위한 요소다. (Heading) 요소는 블록(상자) 요소며, 제목을 의미하는 요소다. 1~6가 있으며, 숫자가 작을수록 더 중요한 제목을 정의한다. (Paragraph) 요소는 블록(상자) 요소며, 문장을 의미하는 요소다. 과 (Unordered List) 요소는 블록(상자) 요소며, 순서가 필요없는 목록의 집합을 의미. (List Item) 요소는 목록 내 각 항목을 의미한다. (Image) 요소는 인라인(글자) 요소며, 이미지를 삽입하는 요소다. src 속성은 이미지의 경로를 뜻하고, alt 속성은 이미지가 제대로 삽입 안 될 시, 대신 나타난 문구를 뜻한다. (Anchor) 요소는 인라인(글자) 요소며, 다른/같은 페이지로 ..
HTML 기본 문법 요소(Element) 내용 형태로 많이 나타납니다. 앞에 태그는 시작(열린) 태그라고 불리고, 뒷 태그는 종료(닫힌) 태그라고 불립니다. 가운데 내용은 요소의 내용(Contents)로 불립니다. 빈(Empty) 태그 열린 태그만 존재하고 뒤에 닫힌 태그가 없는 태그는 빈(Empty)태그라고 합니다. 빈태그도 두 종류가 있습니다. 1. 이 종류는 편리하며 HTML 1/2/3/4/5에 모두 사용가능합니다. 2. 이 종류는 문법 조금 더 엄격한 XHTML와 HTML5버전에서 사용합니다. 특히, XHTML에서 /를 추가 안 하면 에러 납니다. 그래서 이 종류의 장점은 안전함입니다. 태그 기능의 확장 열린 태그에 속성(Attribute)과 값(Value)를 설정해줍니다. 특히, 처럼 빈 태그는 속성과 값이 있어서..
Emmet Emmet(에밋)은 HTML 및 CSS 등의 다양한 파일 종류에 유용한 코드 단축키를 제공합니다. emmet은 CSS 선택자를 활용해 사용하는 기능입니다. VS Code로 HTML파일을 작성시, ! 를 입력하고 Tab키를 누르면 자동완성되는 거 있습니다. 이것도 emmet에 해당됩니다. * 기호는 곱하기, { } 는 내용을 삽입, $ 는 순서대로 숫자 입력을 의미합니다. 이런 CSS 선택자 외 나머지 내용은 모두 Emmet에서만 지원하는 기능이니 착오 없으시길 바랍니다. 예시를 하나 보여주자면, div>ul>li*4{$}입니다. 태그 하부에 태그 있고, 태그 하부에 태그가 있습니다. 태그가 4번 반복하며, 순서대로 숫자를 입력합니다. tab키 혹은 enter키를 누르면, 위 사진처럼 나타납니다.
브라우저 스타일 초기화 브라우저마다 기본적으로 제공한 스타일이 있습니다. 예를 들어, Chrome에서 태그는 margin이 8px로 자동 부여되고 있습니다. 사용자가 어떤 브라우저를 사용할 지 모름으로, 작업 전 브라우저 스타일을 초기화하는 게 좋습니다. 브라우저 스타일 초기화 1. 구글 검색창에 reset.css cdn 검색하며, cdnjs.com 혹은 jsdelivr.com 사이트로 뜬 링크를 열어 줍니다. 2. reset.css 파일을 확인 후, Copy HTML을 하시고 HTML파일에 붙일 준비를 합니다. 가끔 reset.css 파일과 reset.min.css 파일 두 개로 존재할 때 있습니다. min(Minify 단어의 약어) 키워드는 파일이 난독화나 경량화되었다는 것을 의미합니다. min이 없는 거는 원본파일일 것을..
모든 파일 공백 크기 한꺼번에 설정 모든 파일 공백 크기 한꺼번에 설정하는 방법을 소개합니다. 1. 모든 명령 표시(에디터의 모든 명령에 접근) 단축키로 접근 가능합니다. MacOs: Cmd + Shift + P Windows: Ctrl + Shift + P 2. setting을 입력하며 Open User Settings 클릭 3. 키워드 검색에서 tab size를 입력해서 원하는 크기로 설정 기본적으로 4로 되어 있으며 2로 변경하는 것을 추천합니다.
상대 경로 vs 절대 경로 상대 경로 vs 절대 경로 ./ (생략 가능) http (https) ../ / (//) ./ 해당 html파일 주변의 위치부터 불러옴. 이 표시 없어도 됨. ../ 해당 html파일 상위 폴더에서 불러옴. http (https) 원격 컴퓨터, 혹은 사이트에서 불러옴. / (//) 최상위 경로(루트 경로)를 의미합니다.
정보를 의미한 태그들 정보를 의미하는 태그들은 html파일 영역에 담아야 한다! 1. 태그 태그는 HTML문서의 제목(title)을 정의합니다. 해당 영역에서 입력된 문자들이 웹 브라우저 탭에서 표시됩니다. 영역에서 제가 임위적으로 코딩좋아라는 이름을 붙여줬습니다. 브라우저탭도 같은 이름으로 띄워지죠. 2. 태그 태그는 외부 문서를 가져와 연결할 때 사용하며, 대부분은 CSS파일입니다. 필수 속성이 두개 있습니다. rel 과 href 입니다. rel 속성 rel(Relationship 단어의 약어)은 가져올 외부 문서(대표적으로 CSS파일)가 현재의 HTML과 어떤 관계인지를 명시하는 HTML 속성(Attribute)입니다. stylesheet로 명시되면 css파일을 의미합니다. icon도 명시될 수 있습니다. icon은 브..
CSS, JS 연결하기 CSS 연결 영역에서 태그를 걸어주면 됩니다. html 파일 언어 변경 태그 중 lang속성이 기본적으로 en으로 되어 있습니다. en는 영어의 약자라서 해당 파일은 암묵적으로 영어로 표시됩니다. 한국어로 변경하고 싶으면 ko로 변경하면 됩니다. JS 연결 JavaScript 파일 연결하려면 태그를 사용해야 됩니다. html 파일의 영역에서 위 캡처처럼 태그를 넣고, src에서 js파일 경로를 표시해주면 연결됩니다. 그리고 다시 브라우저를 켜시고 F12키를 누르면 개발자 모드 나옵니다. 여기서 JS를 확인할 수 있습니다.
Doctype(DTD), html/head/body 태그 DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도. 현재는 HTML5 표준 버전으로 되어 있습니다. 간혹 오래된 문서를 유지보수할 때

티스토리툴바