HTML & CSS 발표 스터디 피드백 다시 공부하기

박서연·2023년 3월 22일

웹 스터디 기록

목록 보기

4/4

<script type="text/javascript" src="주소"> src 대신 코드 내용 작성 </script>
type="text/javascript"는 HTML5에서는 생략 가능.

head와 body 앞에 삽입될 수 있습니다.

head에 삽입되는 경우에는 브라우저 렌더링에 방해가 되어 무거운 스크립트가 실행되는 경우 오랫동안 완성되지 못한 화면을 노출하게 됩니다. 주로 가벼운 스크립트들이 자주 사용됩니다. DOM구조가 필요한 스크립트의 경우 document.onload와 같은 로드 이벤트가 추가되어야 에러없이 동작합니다.
body에 삽입되는 경우에는 브라우저가 렌더링이 완료된 상태에서 스크립트가 실행되기에 콘텐츠를 변경하는 스크립트의 경우 화면에 노출된 상태로 변화됩니다. 대부분의 스크립트의 위치로 추천됩니다. 문서의 DOM구조가 완료된 시점이기 때문에 별다른 추가설정이 필요없습니다.

동기적으로 작동하기 때문입니다. 비동기적이라면 하나가 끝나기 전에 함께 처리하면서 먼저 끝난 값을 받아올 수 있으나 동기적으로 작동한다면 하나가 끝날 때까지 대기해야합니다.

head 안 title 태그에 검색엔진의 제목부분에 표시될 수 있는 중요한 정보를 담아둘 수 있습니다.
meta 태그에서 name과 content로 표기한 정보를 적극적으로 활용합니다.
name="description"으로 하고, content의 값을 작성해주면, 그 내용이 문서의 요약기술이 됩니다.
name="keywords"로 하고 content를 작성하면, 이 정보도 검색엔진이 사용합니다. content의 값으로는 content="자바,코딩,자바스크립트" 느낌으로 태그를 달듯이 써줍니다.

head 안 meta 태그 중 og:XXX가 있는 태그들을 찾아내 보여주는 프로토콜입니다.

이를 통해 웹사이트에 들어가기 전 어떤 사이트인지 미리 보기를 볼 수 있습니다.

main은 페이지에 고유한 콘텐츠를 위한 것으로, 한 페이지 당 한번만 사용하고 body요소안에 직접 넣어야 합니다. 이상적으로는 다른 요소내에 중첩되지 않아야 합니다.
article은 페이지의 나머지 부분없이 자체적으로 의미가 있는 관련 콘텐츠 블록입니다. 예시로는 단일 블로그 게시물이 있습니다.
section은 article과 유사하지만 하나의 단일 기능 또는 테마를 구성하는 페이지의 단일 부분을 그룹화하는데 가깝습니다.
각 섹션은 heading으로 시작하는 것이 가장 좋습니다. 미니 맵 도는 기사 헤드라인 및 요약 집합이 이에 해당합니다.

가상요소란? 가상요소는 선택자로 선택한 요소 뒤에 붙여 표기하는 미리 약속된 키워드입니다. 가상 요소 키워드 별로 미리 기능이 정의되어 있고, 요소에 css 속성을 적용하는 것과 같은 방법입니다.

예를들어

<q>Some quotes,</q> he said, <q>are better than none.</q>

이런 코드가 있다면, CSS에서

q::before {
 content: "«";
 color: blue;
}
q::after {
 content: "»";
 color: red;
}

이렇게 작성해 주면 결과는 아래와 같습니다.

미디어쿼리는 접속하고 있는 기기마다 다르게 반응하여 표현되도록 개발할 수 있는 것으로, 업데이트, 유지관리, 디버깅이 쉬워져 비용이 감소하는 효과가 있습니다. 단점으로는 구현이 어렵고, 사용자에게 보여주는 화면의 로딩이 느려집니다.

box-sizing 속성은 박스의 크기를 어떤 것을 기준으로 계산할지 정하는 속성입니다.
box-sizing: content-box | border-box | initial | inherit

content-box : 콘텐트 영역을 기준으로 크기 결정
border-box : 테두리를 기준으로 크기 결정
initial : 기본값으로 설정
inherit : 부모 요소의 속성값을 상속받음.

둘 다 width 값을 500px으로 두었으나, box-sizing 속성에 따라 크기가 달라집니다.