3-1. Introduction
3-2. CSS Syntax
css는 selector part 와 property part로 나누어져 있다.
- selector part : 생각하는 모든? 대부분의 태그 이름이 해당되며 여기에는 ID, class ( #name, .name ) 를 쓸 수 있다.
: 태그, 링크, 문단, 헤더, 푸터, div 등등- property part : 소문자이고 공백이 없으며 value 뒤에 ;(semi-colon) 이 붙는다.
3-3. Mixing CSS with HTML
-
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" >
3-4. Box Model
- Content : HTML 요소의 내용이 들어간다.
- Padding : HTML 요소를 감싸는 박스와 요소간의 여백이다.
- Border : HTML 요소를 감싸는 박스(테두리)이다.
- Margin : Border의 여백, 즉 다른 여러 HTML 요소들 사이의 간격이다.
- 공부하면서 새로 알게 된 점 : body, html 에는 padding 및 margin 을 모두 0으로 놓고 시작했다. 이유는 브라우저마다 기본값이 다르기 때문에 저렇게 초기화 해놓고 시작한다고 하였다.
- % 의 개념은 부모 요소 대비 몇 % 의 width 또는 height 로 보면 될 것 같다.
3-5. Inline vs Block vs Inline Block
Block
- 바로 옆에 아무것도 없을 때, 블록이라 한다. 옆에 뭐가 있는 것을 아무것도 허락하지 않는다. 우클릭 > 요소 검사 해보면 상단에 박스가 선택되는 것을 볼 수 있다.
이유는, 박스가 크기 때문에 이렇게 보이는 것이 아니라 이 박스가 그 외에는 다른 옆에 있는 것을 허용하지 않기 때문이다.
무엇이든 그 밑으로! Block 으로 위치하게 된다.블록은 element가 크기와 상관없이 그 옆에 다른 element가 위치하는 것을 허용하지 않는 것이다. 폭과 높이가 존재하지만 그 옆에 어떤 element 도 놓일 수 없다.
Inline Block
- 각 박스들이 서로서로 옆에 있다.
인라인 요소와 블록 요소의 특징을 결합함. 서로 옆에 나타날 수 있으며 (inline), 폭과 높이 특성을 사용하여 치수를 지정할 수 있다.BOX는 block 또는 inline block 둘 중 하나가 되어야 한다. (디폴트는 block)
이미지는 기본 인라인 블록 요소의 좋은 예가 될 수 있다. 요소를 인라인 레벨로 배치하면서, 내용에는 블록레벨 속성을 지정하고 싶을 때 사용한다.
박스의 폭과 높이가 존재하고 서로서로 옆에 놓일 수가 있다. 인라인과 같은 설정값을 원하면서 동시에 박스 형태를 유지하고 싶으면 display:inline-block; 이라 쓰면 된다.
그렇다면 인라인은 무엇일까?
Inline : display:inline;
- 박스의 모든 property 설정값 (높이, 길이, 색, 보더 등등) 을 지우게 된다.
span 태그를 이용해 그 안의 컨텐츠를 숫자 1로 지정해서 넣는다면, 내가 작성한 컨텐츠 (숫자 1) 의 폭과 높이 만큼의 스타일만 적용된다.
이전에 작성한 박스의 폭이나 높이는 적용되지 않으며 마치 텍스트처럼 적용이 된다.인라인이라 함은 텍스트이다. 텍스트는 높이도 폭도 없이 서로 옆에 붙는 형태이다.
오직 컨텐츠의 길이만 존재한다.
3-6. Position property
- 4가지 종류의 position
fixed, absolute, relative, static
position: static;
- 기본 디폴트 값
position: fixed;
- 밑으로 스크롤 하니까 박스가 화면에 고정되어서 그대로 있다. 이 경우에 영향을 주는 것은 부모 요소가 아닌 브라우저 창이 된다. element가 그 위치에 오버랩 되어서 고정되어 있는 것이다. width 값이나 여기에 따른 4가지 (상하좌우) 설정값을 줄 수 있다.
(width 값이 있어야 화면에 온전히 보였던 거 같다)top - moves the element down.
(탑은 요소를 아래로 이동한다. top:20px; 이면 위에서 아래로 20px로 내려앉는것)
bottom - moves the element up. (바텀은 요소를 위로 이동한다)
left - moves the element right. (레프트는 요소를 오른쪽으로 이동한다)
right - moves the element left. (라이트는 요소를 왼쪽으로 이동한다)
position: absolute;
-
fixed 랑 비슷하다. 어디에든 붙일 수 있지만, 스크롤 한다고 고정되어 보여지지는 않는다.
위 그림에서 .box-4 의 포지션은 absolute 이다. 하지만 html 상에서 부모(father)에 해당하는 박스를 찾지 못해서 훅 넘어가 버렸다.
이 경우에는 부모 박스가 상응하는 관계가 없어서 그냥 설정한 값 대로 움직인 것이다.position: absolute; 가 설정되면 html 상에서 해당 element 와 관계가 있는 element 를 살펴보고 이에 상응해서 position 이 결정되는 것이다.
그러면? 저 분홍색 .box-4에 부모 관계를 만들어 주는 것이다. 왜? absolute 로 적용한 차일드 박스를 부모 box의 position 에 상대적! 으로 제멋대로 움직이게 만들 수 있다!
position: relative;
- 부모 박스의 position 이 relative 가 아니라면 저 위의 분홍색 문제의 .box-4 는 문서 본문 body 에 맞춰서 position 을 잡을 것이다.
부모 박스에 relative 포지션을 설정하면, 차일드 박스 .box-4 는 그에 상대해서 absolute 포지션을 잡을 것이다.
absolute 포지션을 부모 element에 상대적으로 사용하려면 부모 element 에게 relative 포지션을 먼저 설정해 줘야 한다!
그게 설정되면 child element는 부모 element 안에서 도망가지 않고 위치해 있을 것이다.
