TWIL #03 HTML/CSS
나를 괴롭히는 CSS position..
계속 업무가 바빠서 한 2주 정도 세션을 못 들었다. 6주차 내용은 HTML/CSS이고, 이전 내용을 몰라도 이해할 수 있어서 다시 도전!
This Week I Learned
이번 주는 HTML, CSS로 프론트엔드 개발의 기초를 배웠다. 아무래도 눈에 보이는 부분이라 신나게 만들었다. 디자인은 엄청 허접했지만ㅋㅋㅋ
새롭게 알게 된 것
1. 코드는 위에서 아래로 읽힌다
엄청 당연한 말이긴 한데, 이 원리로 HTML과 JavaScript를 연결할 때의 원칙(?) 하나를 이해했다.
HTML과 JavaScript를 연결하려면 HTML 문서의 body에 <script> 태그를 이용해 JavaScript 문서를 연결한다.
cf. <script> 태그는 클라이언트 사이드 스크립트를 정의할 때 사용되는 태그라고.
여기서 JavaScript를 삽입하는 위치가 중요하다. 코드는 위에서 아래로 읽히기 때문에, 브라우저가 HTML의 구조와 CSS 스타일을 렌더링 하는 도중에 JavaScript를 만나면 이를 해석하고, 구현하는 게 완료될 때까지 브라우저 렌더링을 멈추게 된다. 그래서 </body> 앞에 주로 삽입시킨다.
</div>
<script src="data.js"></script>
<script src="logic.js"></script>
</body>
</html>
2. CSS Position/Layout
실습하면서 너무 헷갈리고 어려웠던 내용. 사실 아직도 정확히 잘 모르겠다. 여기에 블로깅 하면서 정리해봐야겠다ㅎㅎ
1) Static
특별히 포지션을 지정하지 않으면 디폴트로 static이 된다. top, bottom, left, right를 지정해도 적용되지 않는다.
한 줄을 다 차지하는 block이면 (e.g. <div>) 위에서 아래 순서로 위치하고, 컨텐츠 공간만큼만 차지하는 inline이면 (e.g. <span>)왼쪽에서 오른쪽 순서로 위치한다.
물론 inline도 창 너비에 따라 아래로 내려갈 수 있다.
2) Relative
현재 위치를 기준으로 새롭게 위치를 지정하는 것. 프로퍼티를 지정하지 않으면 static과 동일하게 작동하고, top, right, bottom, left property를 설정해주면 적용된다.
두 개 이상의 relative한 <div>가 있을 때 서로의 위치에 영향을 받는 것 같다. 근데 어떻게 서로 작용하는 건지는 아직 이해하지 못했다. 이해하려다가 천불이 나서 차차 알아가기로 했다.
3) Fixed
페이지가 스크롤되어도 화면 한 구석에 그대로 남아있는 요소들은 fixed를 이용한 것이다. 보통 상단 메뉴바에 많이 적용하는 바로 그것!
4) Absolute
fixed는 화면을 기준으로 고정시키지만, absolute는 부모 요소를 기준으로 fixed를 시키는 것이다. (부모 태그는 포함하는 태그, 자식은 포함되는 태그이다)
<div> 태그 안에 또 다른 <div> 태그를 넣고, 두 번째 태그를 absolute로 지정하면 첫 번째 <div> 태그를 기준으로, 그 안에서만 움직인다.
만약 첫 번째 <div>의 영역에 벗어나게 만들면? 두 번째 <div>가 사라져서 보이지 않는다.
5) Sticky
fixed는 화면 한 곳에 완전히 고정되는데, sticky는
top 프로퍼티를 주면 스크롤을 내리다가 (원래라면 없어져야 할) top 위치부터 화면에 딱 붙고,
bottom 프로퍼티를 주면 스크롤을 올리다가 (원래라면 없어져야 할) bottom 위치부터 화면에 딱 붙는다.
다음 주에 학습할 내용
다음 주는 HTML과 CSS를 이용해 디자인한 것을 JavaScript를 이용해 동적으로, 인터렉티브하게 만드는 방법에 대해서 배운다. 지난번에 이쯤에서 못 버티고 중도 탈락했던 기억이 있는데.. 이번에는 무사히 이해할 수 있길..!!!
