Knowledge/HTML & CSS
-
<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..
-
CSS 클래스명을 정돈해보자 BEM ( Block, Element, Modifier ) 방법론Knowledge/HTML & CSS 2019. 11. 14. 15:06
- BEM BEM은 Block(블럭), Element(요소), Modifier(블럭 또는 요소의 속성)을 활용한 CSS 클래스 작성법이다. - Block Block은 어떤 요소를 담고 있는 컨테이너를 의미한다. 예를 들어 웹이 header, footer, sidebar, article 의 구조로 이루어져 있다면 이런 것들을 block이라 할 수 있다. block은 그냥 block의 이름을 클래스 명으로 적어주면 된다 1 2 3 4 5 6 .block {} /* ex */ .header {} .footer {} - Element element(요소)는 블럭이 포함하고 있는 한 조각을 의미한다. 그렇기 때문에 요소는 블럭의 클래스명을 적고 두 개의 밑줄 표시 (__)를 해준다음 요소명을 붙여주면 된다 1 2..
-
반응형 웹 기초 뷰포트(View port) 와 미디어 쿼리(Media Queries)Knowledge/HTML & CSS 2019. 11. 13. 16:19
- 뷰포트 ( View Port ) 본격적으로 뷰포트에 대해 얘기하기 전에 먼저 픽셀에 대해 짚고 넘어갈 필요가 있다. 픽셀은 화면을 구성하는 가장 기본이 되는 단위다. 예를 들어 15인치 모니터의 해상도가 1024 X 768의 라고 하면 수평으로는 1024개의 픽셀이, 수직으로는 768개의 픽셀이 배치되어 있다고 보면 된다. 즉 786,432개의 픽셀로 화면이 이루어진 셈이다. 모바일이 대두되기 전의 웹은 이 정도 수준의 해상도를 기준으로 제작되었다. 문제는 거기서 발생했다. 모바일과 태블릿 등 손 안에 들어오는 작은 디스플에이에 일반 모니터의 픽셀 기준을 적용할 수 없었기 때문이다. 이런 문제를 해결하기 위해 모바일 브라우져에서 시도한 것이 가상 viewport 개념의 도입이다. 처음에는 980px인..
-
클릭시 스크롤이 상단으로 이동하거나 주소 뒤에 #이 붙으면 범인은 A태그!Knowledge/HTML & CSS 2019. 8. 22. 23:02
어딘가를 클릭했는데 갑자기 스크롤이 상단으로 이동하거나 다른 주소로 이동했는데 이렇게 URI 가장 뒤에 #이 붙어있는 걸 본적 있는가? 이 두가지 현상의 범인은 모두 a태그다. 정확히는 형태의, #으로 막아놓은 A태그 보통 A태그 형태만 쓰고 기능은 자바스크립트로 구현하고 싶을 때 이런식으로 #으로 A태그의 기능을 막곤 하는데 #이 나름의 기능을 해버리기 때문에 원래 의도와 다르게 작동하는 것이라고 할 수 있다. 해결 방법은 여러가지가 있고 다 간단한데 ( 참고 : https://blog.mywebstyle.pe.kr/?p=65 ) 필자는 의 형태로 a태그 기능을 막는 걸 선호하고 추천한다. 뭐 특별한 이유는 없지만 애초에 A태그를 #으로 막는다는 것 자체가 귀차니즘의 산물인데 굳이 javascrip..