반응형

프로그래밍/HTML 공부 7

HTML <script>태그의 defer속성

defer 속성은 페이지가 모두 로드 된 후에 로 불러온 외부 스크립트가 실행되어야 함을 명시하는 속성이다. 불리언 속성이라 명시하지 않으면 false, 명시하면 true값을 가지게 된다 이 속성은 태그가 외부 스크립트를 참조하는 경우에만 사용할 수 있고, src 속성이 명시된 경우에만 사용 가능하다. 예를 들어서, 태그가 head 태그에 있고, 태그가 참조하는 외부 스크립트에서는 body태그에 작성된 내용을 이용해 코드를 실행시켜야할때. 웹페이지를 동작시키면 body 태그를 읽어들이기 전에 head태그에 있는 script 태그가 실행되면서 외부 스크립트는 body태그의 내용을 받지 못해 실행이 되지 않는다. 이때 script에 defer 속성을 추가하면 script의 외부 스크립트는 페이지 로드가 전부..

<span> 태그

대표적인 인라인inline 요소. 본질적으로 아무것도 나타내지 않고 콘텐츠 영역을 설정하는 용도. 하나의 글자처럼 취급되고, inline요소라서 줄바꿈 기능이 없어서 연달아 출력하면 그대로 한줄에 전부 출력된다. hello world 이런식으로 작성하면 출력은 'hello world'로 출력된다. 띄어쓰기는 span태그가 줄이 다른 상태에서 연달아 출력되면서 자동으로 띄어진거다. 만약 픽셀 크기를 바꾸고 싶어서 css파일에 span { font-size:100px; } 을 작성하면 100px짜리 'hello world' 문자가 나오지만 띄어쓰기 부분은 폰트 사이즈가 그대로라서 띄어쓰기 부분이 매우 좁아진다. 대신 body { font-size:100px; } 을 작성하면 띄어쓰기 부분도 100px로 적용..

브라우저 스타일 초기화

크롬 브라우저 html파일을 실행해보면 body태그에 기본으로 margin이 8px 적용된다. 이는 브라우저마자 제각각 다른데 웹 개발에 방해되니 이런 기본값들을 초기화하고 개발하는 게 좋다. 1. 검색창에 'reset.css cdn' 을 검색한다. 2. 검색 결과중에 'cdnjs.com', 'cdn.jsdelivr.net' 사이트의 결과에 들어간다. 나는 cdnjs.com 결과물에 들어갔다. 3. 들어가서 reset.css의 html 코드를 복사해서 index.html의 head태그에 붙여넣는다. https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi..

head 태그 내부 요소들 정리

- html 문서의 제목(title) 정의 - 외부 문서를 가져와 연결할 때 사용. 대부분 css파일이지만 css파일이 아니어도 사용. 이런 형식으로 쓰는데 여기서 rel은 가져올 문서와의 관계이며 필수속성이다. relation(관계)의 줄임말. href는 가져올 문서의 경로를 명시한다. hypertext reference의 약자이다. favicon(파비콘)은 favorite icon의 줄인 말인데 브라우저 탭 부분에 표시되는 대표 아이콘을 favicon이라는 이름으로 저장하길 권장한다. 주로 favicon.png나 favicon.ico 파일이 사용된다. - 스타일(css)를 html 문서 안에서 작성하는 경우에 사용 - 자바스크립트를 html문서 안에서 작성할때 사용하기도 하고 자바스크립트 파일을 외부..

HTML <!DOCTYPE html> 정리

DOCTYPE html> html의 DOCTYPE부분은 html의 버전을 정의한다. 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 html 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도이다. 위의 DOCTYPE 형태는 html5를 나타낸다. 이전 버전인 xhtml이나 html4의 DOCTYPE은 http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 이것 처럼 html5의 DOCTYPE의 뒤에 PUBLIC 이라는 단어가 나오고 그 뒤에도 뭐가 더 줄줄 나온다.

HTML 태그 정리 - strong, u, h1, b

1. strong hello! how are you? 으로 표현 -> hello! how are you? 문자를 진하게 표시함 2. u underline의 약자 hello! how are you? 로 표현 -> hello! how are you? 3. h1 ~ h6 heading의 약자. 제목이라는 뜻. h7은 없다. 숫자가 작을수록 글씨가 커진다. This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 위와 같이 표현. This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is hea..

반응형