마진 겹침 각 요소의 박스 마진이 겹쳐버리는 현상 Hello world Hello world 이렇게 설정한 경우 두 블록 사이에는 200px가 떨어져 있어야 하나, 실은 100px만 떨어지고 서로 겹쳐있게 된다. 마진은 상응하는 두 요소 중 큰 쪽의 마진값을 여백으로 하는 것으로 설정되어 있기 때문. 자식 요소의 마진이 부모 요소의 것보다 적다면, 자식 요소의 마진은 적용되지 않는다. 자식 요소의 마진값이 더 커지면 그 때는 또 적용된다! 위치 (position) 위치 자체를 정하는 건 아니고, 위치를 어떻게 계산할지를 설정한다. static 기본값. 적당히 알아서 계산된다. relative 부모 요소의 위치가 축이 되어 상대적인 위치를 지니게 된다. 이러면 오프셋 설정이 가능하다. absolute 해당..
프로그래밍/HTML&CSS
color 글자나 다른 요소의 색상을 지정해준다. 크게 세 타입으로 나뉜다. name red, blue 같은 미리 정의된 이름으로 고정한다. 140개 정도의 색상명이 있다. hex #FFFFFF 식으로 설정한다. 16진수를 쓰는 방식으로, 빨강, 초록, 파랑이 각각 두 글자를 차지한다. FF0000이면 완전히 빨간색이 된다. 00~FF 까지의 범위를 쓰면 된다. 왜 16진수를 쓰나요? 제작자가 빅엿을 주는건가요? 아니면 순수 악 성향인가요? 1 바이트(byte)는 8 비트(bit)다. 1 비트는 0과 1의 두 수를 표현할 수 있다. 즉 2진법을 쓴다는 뜻이다. 이게 8개 있으면? 2를 8번 곱한것과 같으니 256(16 * 16)까지의 수를 표현할 수 있게 된다. 이렇게 2의 제곱이 되는 진수들은 비트 연..
개요 선택자 { 속성:값; 속성:값; } li { color:red; textdecoration:underline; } 여기서 맨 위의 li 가 선택자~라고 할 수 있겠다 HTML의 태그를 써도 괜찮지만 보통 클래스나 ID를 많이 쓰는 듯 기본 태그를 선택하고 싶다면 그냥 태그명을 쓰면 된다. 특정 Class를 선택하고 싶다면 .class명 으로 작성한다. 일반 태그 선택시보다 우선순위가 높다. 특정 ID를 선택하고 싶다면 #id명 으로 작성한다. 클래스 선택시보다 우선순위가 높다. 끝! 특정 요소의 자식이 되는 요소만 선택하고 싶어! 부모선택자 자식선택자 그_자식선택자 그_자식선택자... { ... } 식으로 쓰면 된다. HTML CSS JavaScript HTML CSS JavaScript ul li..
