CSS 기초편(1)
개요: 필자가 클론코딩을 들으면서 정리한 게시물이다.(~3-7)
CSS : Cascading Style Sheet
브라우저가 위에 코드를 차례되로 읽는다. 즉 위에서 아래로 차근차근 코드를 읽는다.
CSS 작성하는 구조는 다음과 같다.
무조건 head 안에 적어야 하며 첫번째 방법은 따로 만든 CSS 파일을 link를 통해 연결하고 rel= 다음과 같이
작성해주면 된다.
두번째는 html에 바로 style을 써서 해주는 방식이다. 보통 앞에껄 선호한다고 한다.
다음과 같이 style 안에 h1 태그를 가르치는 {}쳐서 다음과 같이 작성하다. 속성들은 되게 많은데 다 외울 필요없고
형식만 알아두면 된다고 한다.
결과는 다음과 같다.
이렇게 엄청 많다... 엄청...
div 는 박스여서 옆에 아무도 안온다. 하지만 span (img, <a> 등도)은 옆에 다른 요소들이 붙을 수 있다.
이때 box를 block, 반대가 inline(in the same line)으로 정의하겠다.
물론
이렇게 해서 서로를 바꿀 수 있다. 이때 inline은 높이와 너비가 없기 때문에 페이지에 안뜬다.
box의 3가지 특징
1. margin - box의 경계의 바깥에 있는 공간
2. border
3. padding - box의 경계로부터 안쪽에 있는 공간
margin
1번은 전체를 0으로 해서 공간이 없고 2번은 윗부분 공간을 50px 해주겠다. 3번은 위 아래 10px 적용, 왼쪽 오른쪽
10px 적용한다는 뜻이다. 그리고 4번은 위 오 아 왼 시계방향!!
collapsing margins 현상 - box들의 위쪽 경계가 같으면 안바뀐다. 그래서 이 두 box들은 하나의 margin이 되는 거다.
이 현상은 위 아래쪽에서만 일어난다. (3-5 참고)
그래서 저거를 없애고 싶으면 padding이 필요하다.
padding
이렇게 하면 아까말한 현상에서 벗어날 수 있다.
겹치는 태그를 id를 이용해 구분할 수 있다. \
border
border는 박스의 경계 저런식으로 구현할 수 있다.
그러면
이렇게 나온다.
적용된 <div>안에 <span>을 써도 border가 적용된다.
border은 block inline 모두 적용된다.