HTML script요소의 위치
-
브라우저가 동작할 때 HTML을 읽어내리다가 스크립트 요소를 발견하면 파싱을 중단한다.중단한 상태에서 스트립트 요소 로드 + 파싱 후 다시 HTML 파싱한다. (script요소는 등장과 함께 실행된다)
-
이렇다 보니 HTML 상단에 스크립트가 있을 때, head 부분에 무거운 스크립트 요소가 있을 디스플레이에 표시되는 것이 지연된다.
-
권장하는 것은 닫는 body 태그의 바로 앞에 스크립트 요소를 입력하는 것이다.
이렇게 하면 html 파싱이 다 끝난 후 자바스크립트를 실행하기 때문에 로딩 지연으로 렌더링에 지장받는 일이 없어진다. -
스크립트 삽입 위치가 아닌 async나 defer 속성을 사용해서 HTML 파싱과 스크립트 로드를 동시에 할 수도 있다.
-
둘의 차이점이 있다면, async의 경우 순서에 상관없는(비동기적)실행을 하기 때문에 html 파싱이 끝나지 않아도 스크립트가 로드되면 즉시 스크립트가 실행된다.
-
defer는 HTMl 파싱이 끝나고 난 뒤에 스크립트를 실행한다.
실행 순서가 중요한 경우에는 async 사용에 주의해야 한다.
파싱(parsing) : 컴퓨터가 알아듣는 언어로 바꾸는 작업 (코드로)
혼자하는 과제
: 네이버 포털 사이트 참고해서 레이아웃 짜보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Naver</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<div id="logo">NAVER</div>
<div id="search-box"></div>
<input type="button" value="검색" id="search-button"></div>
</header>
<div id="menu-section">
<div class="menu-box">메일</div>
<div class="menu-box">카페</div>
<div class="menu-box">블로그</div>
<div class="menu-box">지식IN</div>
<div class="menu-box">쇼핑</div>
</div>
<main>
<section class="left-column">
<div class="main-contents">광고 영역</div>
<div class="main-contents">뉴스 영역</div>
<div class="main-contents">오늘 읽을만한 글 분류 상자</div>
<div class="main-contents">오늘 읽을만한 글 콘텐츠</div>
</section>
<section class="right-column">
<div class="side-contents">로그인 박스</div>
<div class="side-contents">짧은 이슈 제목 슬라이드</div>
<div class="side-contents">광고</div>
<div class="side-contents">트렌드 쇼핑</div>
</section>
</main>
<footer class="footer-area">
<div class="footer-content">회사소개</div>
<div class="footer-content">인재채용</div>
<div class="footer-content">제휴제안</div>
<div class="footer-content">이용약관</div>
<div class="footer-content">개인정보처리방침</div>
<div class="footer-content">청소년보호정책</div>
<div class="footer-content">네이버정책</div>
<div class="footer-content">고객센터</div>
</footer>
</body>
</html>
- 줌 세션을 듣기 전에 혼자 끼적여 본 코드인데, 줌 세션 듣고나서 보니 내 CSS 코드는 구려서 못 올리겠다...
- flex : 1 0 60% 이런식으로 줘서 어떤 한 부모 요소 내부에 있는 자식 요소들을 비율에 맞게 basis를 줄 수 있다. 나는 좀 비효율적이게 flex-basis : 100px 이런식으로 줌... 내가 비교적 고정되어 있는 값을 많이 쓰는데, 앞으로 상대값을 좀 더 쓰도록 노력해봐야겠다.
- 메뉴 바를 만들 때 inset을 처음 써봤는데, 다른 분들 계산기 목업 만든 것 보니까 border-shadow랑 함께 inset도 많이 쓰는 것 같았다. 계산기 구현하면서 CSS를 만질 수 있다면 shadow도 꼭! 써야지!
페어 프로그래밍, 과제 회고
부제 : 발전하는 사람?
오늘 마무리한 목업 계산기!
-
사실 나는 목업 계산기의 대부분을 어제 만들었고, 오늘은 좀 다듬는 작업을 했다. 나름대로 맘에 들게 만들었다고 생각했는데... 제출된 다른 사람들의 과제를 보니 정말 신기한 모양으로 만든 사람들도 많아서 좀 위축되기도 했다. 나랑 같은 HTML, CSS로 만든 거 맞나요...? 그래도 비교하지는 말자... 배울점만 배우기!
-
이번에 과제를 같이 한 페어님을 보면서는 '이게 내가 할 수 있는 최선인가?'같은 걸 느낀 것 같다. 나는 목업이기도 하고 사용할 수 있는 기능들을 모두 사용해봤단 느낌이 안 드는데, 페어분은 포토샵으로 직접 배경까지 만드셨다...! 내가 본 계산기 중 제일 예쁜 계산기였다...(엄지 척) 항상 뭔가를 할 때 이정도면 된 거 아닌가 하고 중도에 그만두는 내 모습이 좀 실망스러울 때가 많았다. 이번에 부트캠프를 하고, 여러 과제들을 진행해가면서 늘 열정적일순 없더라도 에너지가 있는데 중도에 쉬거나 포기하지는 말아야겠다는 생각을 다시 한 번 한다.
-
레퍼런스 검색을 좀 더 오래해보면 좋겠다.
-
CSS에서 rgba()를 사용하면 네번째 값을 조정해 불투명도를 조절할 수 있다는 것을 알게 되었다!
줌 세션에서 듣기로는 opacity값을 사용해도 불투명도를 조절할 수 있다고 한다! -
box-sizing : border-box로 설정하면 boder의 픽셀도 박스 계산에 포함되기 때문에, 부모 요소를 %로 나눠서 자식요소들을 놓더라도 자식요소들이 2개냐 3개냐 4개냐에 따라서 튀는 부분이 생길 수도 있다. 그런 경우에는 outline을 사용하면 되는데, outline은 그냥 선만 생기는 것일 뿐이라 박스의 크기에 영향을 주지 않는다!
-
Font Awesome이라는 멋진 사이트를 알게 되었다! 여러가지 아이콘들을 사용하기 좋을듯!
-
vh는 브라우저의 크기를 기준으로 하고, %는 부모요소의 크기를 기준으로 한다. (둘 다 상대적인 값들)
