css는 selector part 와 property part로 나누어져 있다.
- selector part : 생각하는 모든? 대부분의 태그 이름이 해당되며 여기에는 ID, class ( #name, .name ) 를 쓸 수 있다.
: 태그, 링크, 문단, 헤더, 푸터, div 등등- property part : 소문자이고 공백이 없으며 value 뒤에 ;(semi-colon) 이 붙는다.
HTML을 CSS와 연결하는 법
1) inline : html에서 Head 태그 내에 style 태그를 여닫아 놓고 css를 html 상단에 붙이는 것을 가능하게 한다.
- 단점 : 페이지가 100개 이고 셀렉터의 컬러를 동일하게 해야 한다면 일일이 다 바꿔줘야 되는 비효율이 발생하게 된다.
2) external : css file (styles.css) 파일을 새로 만드는 방식.
< link rel="stylesheet" href="css/style.css" type="text/css" >
- Content : HTML 요소의 내용이 들어간다.
- Padding : HTML 요소를 감싸는 박스와 요소간의 여백이다.
- Border : HTML 요소를 감싸는 박스(테두리)이다.
- Margin : Border의 여백, 즉 다른 여러 HTML 요소들 사이의 간격이다.
블록은 element가 크기와 상관없이 그 옆에 다른 element가 위치하는 것을 허용하지 않는 것이다. 폭과 높이가 존재하지만 그 옆에 어떤 element 도 놓일 수 없다.
BOX는 block 또는 inline block 둘 중 하나가 되어야 한다. (디폴트는 block)
이미지는 기본 인라인 블록 요소의 좋은 예가 될 수 있다. 요소를 인라인 레벨로 배치하면서, 내용에는 블록레벨 속성을 지정하고 싶을 때 사용한다.
박스의 폭과 높이가 존재하고 서로서로 옆에 놓일 수가 있다. 인라인과 같은 설정값을 원하면서 동시에 박스 형태를 유지하고 싶으면 display:inline-block; 이라 쓰면 된다.
그렇다면 인라인은 무엇일까?
인라인이라 함은 텍스트이다. 텍스트는 높이도 폭도 없이 서로 옆에 붙는 형태이다.
오직 컨텐츠의 길이만 존재한다.
fixed, absolute, relative, static
top - moves the element down.
(탑은 요소를 아래로 이동한다. top:20px; 이면 위에서 아래로 20px로 내려앉는것)
bottom - moves the element up. (바텀은 요소를 위로 이동한다)
left - moves the element right. (레프트는 요소를 오른쪽으로 이동한다)
right - moves the element left. (라이트는 요소를 왼쪽으로 이동한다)
fixed 랑 비슷하다. 어디에든 붙일 수 있지만, 스크롤 한다고 고정되어 보여지지는 않는다.
위 그림에서 .box-4 의 포지션은 absolute 이다. 하지만 html 상에서 부모(father)에 해당하는 박스를 찾지 못해서 훅 넘어가 버렸다.
이 경우에는 부모 박스가 상응하는 관계가 없어서 그냥 설정한 값 대로 움직인 것이다.
position: absolute; 가 설정되면 html 상에서 해당 element 와 관계가 있는 element 를 살펴보고 이에 상응해서 position 이 결정되는 것이다.
그러면? 저 분홍색 .box-4에 부모 관계를 만들어 주는 것이다. 왜? absolute 로 적용한 차일드 박스를 부모 box의 position 에 상대적! 으로 제멋대로 움직이게 만들 수 있다!
부모 박스에 relative 포지션을 설정하면, 차일드 박스 .box-4 는 그에 상대해서 absolute 포지션을 잡을 것이다.
absolute 포지션을 부모 element에 상대적으로 사용하려면 부모 element 에게 relative 포지션을 먼저 설정해 줘야 한다!
그게 설정되면 child element는 부모 element 안에서 도망가지 않고 위치해 있을 것이다.