HTML
-
<script> 태그는 어디에 위치해야 할까요?Knowledge/HTML & CSS 2023. 7. 4. 11:25
위와 같이 asnyc 속성이 더해진 script 태그가 HTML 태그 사이에 있는 경우 아래 그림과 같이 작동합니다. 보시다시피 script 태그를 만나도 html parsing이 중단되지 않습니다. script 로드와 html parsing이 함께 이루어지다가 script 로드가 끝나면 script가 실행되는 시점에 html parsing이 잠시 중단되고 실행이 끝나면 html parsing이 재개됩니다. defer 위와 같이 defer 속성이 더해진 script 태그가 HTML 태그 사이에 있는 경우 아래 그림과 같이 작동합니다. 보시다시피 script 태그를 만나도 script 로드의 시작부터 끝까지 html parsing이 중단되지 않으며 html parsing이 끝나고 난 뒤에야 script가 ..
-
overflow와 clear 속성을 활용해 float을 해제하는 방법Knowledge/HTML & CSS 2019. 12. 10. 17:30
div는 블록 레벨 요소입니다. 새로운 줄에서 시작하고 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다는 블록 레벨 요소의 특징( 참고 ) 에 따라 div를 두개 생성하면 하나의 div가 한 줄씩을 차지하여 위와 같은 형태로 나타나는 것을 확인할 수 있습니다. 코드 보기 더보기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 float 해제 방법 .box_wrap { width: 400px; margin: 0 auto; } .box_parent { padding: 10px; } .box { width: 100px; height: 1..
-
블록 레벨 ( Block level ) 요소와 인라인 ( Inline ) 요소에 대하여Knowledge/HTML & CSS 2019. 12. 10. 16:14
HTML 요소들은 모두 블록 레벨 ( Block level ) 요소와 인라인 ( Inline ) 요소로 분류할 수 있습니다 - 블록 레벨 요소 ( Block Level Elements ) 특징 새로운 줄에서 시작합니다. 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다. 다른 블록 레벨 요소와 인라인 요소들을 포함할 수 있습니다. 블록 레벨 요소 자체를 text-align을 활용해 가운데 정렬할 수 없습니다. 블록 레벨 요소 자체를 Vertical-align을 활용해 수직 정렬할 수 없습니다. 블록 레벨 요소인 요소들 1 2 3 - ( 혹시나 해서 사족을 달자면 위의 태그들을 암기하듯 외우는 건 무의미하다고 생각합니다. 어차피 쓰다보면 체화되거든요. ) - 인라인 요소 ( Inline Eleme..
-
DOCTYPE을 선언하는 이유Knowledge/HTML & CSS 2018. 3. 5. 14:22
현재 문서가 어떠한 구조를 갖고 있는지, 어떠한 표준을 준수하고 있는지를 브라우저에게 알려주는 역할. HTML과 XHTML은 여러 버전이 있으므로 정의해주어야 브라우져가 문서를 정확하게 해석한다. 올바른 DOCTYPE이 아니면 마크업과 유효성 검사 불가능하고 경우에 따라 원하는 결과가 수행되지 않을 수도 있다. xhtml이나 html5 이전 버전에서는 공개 식별자와 시스템 식별자를 작성하여 선언했지만 html5 버전은 문서 가장 처음에 이라고만 작성해도 선언이 완료된다.
-
img요소에 width와 height속성의 직접 사용이 허용되는 이유Knowledge/HTML & CSS 2018. 2. 27. 21:47
웹 표준은 HTML이 구조와 데이터를, CSS가 표현 및 동작을, javascript가 동작 및 제어를 각각 담당하도록 분리하는 것을 권장하고 있다 그러나 img 요소에서만큼은 표현을 담당하는 width와 height 속성을 html 태그 내에서 직접 지정해도 웹 표준에 어긋나지 않는다. 이는 브라우저가 웹 서버에서 페이지를 받아오고 출력하는 방식 때문이다. 유저가 링크를 클릭하거나 주소창에 url을 입력하면 브라우저가 이 요청을 웹 서버로 전달하는데 웹 서버는 이에 대한 응답으로 우선 해당 페이지의 html 문서를 브라우저에 전송한다. 그러면 브라우저는 이를 바탕으로 두 가지 작업을 병행하는데 하나는 전송된 html 문서를 해석해서 페이지 출력(렌더링)에 필요한 css,이미지, 스크립트 파일 등을 순차..