position 속성과 좌표 레이아웃
-
좌표 이동을 하고 싶을 때 position 속성을 입력할 수 있다.
-
특징은 좌표 이동 가능, 공중에 뜬다.
css
.main-button {
position: relative;
top: 100px;
left: 100px;
bottom: 100px;
}이렇게 position: relative; 먼저 작성 후 밑에 주고 싶은 위치 값을 적으면 된다.
-
position: relative;
내 현재 위치를 기준으로 움직여주세요 라는 뜻
position: static;
좌표 이동하지 말아주세요 라는 뜻
position: fixed;
현재 보이는 화면(viewport) 전체 기준에서 고정하고 싶을 때(상단 고정 메뉴같은거 만들때)
position: absolute;
내 부모 태그중에 position: relative; 를 가진 부모가 기준점이 된다.(배경 기준 하단에 붙는 버튼같은거 만들 때) -
position: absolute; 준 요소 가운데 정렬 하려면
.main-button {
position : absolute;
left : 0;
right : 0;
margin-left : auto;
margin-right : auto;
width : 적당히
}z-index
- 공중에 떠있는 박스들이 많을 때 어떤 것이 앞에오고 할건지 정해주는 속성
z-index: 5;정수가 높을수록 앞에 온다고 생각하면 된다.
반응형 width & box-sizing
css
- max-width
.main-background {
width: 80%;
max-width: 600%;
}width의 %은 pc사이즈에서 너무 클 수 있음
그래서 max-width와 함께 쓰면 그 이상으로 안커지니까 괜찮음
(반대로 min-width는 최소폭)
반응형으로 만들때 최대/최소 넓이/높이 다 설정해서 사용
box-sizing
- width는 content의 영역을 의미함
그래서 padding이나 border을 줄 때 max-width 설정한 값보다 넘음
해결 방법은
content 영역만 width로 설정하지말고, padding과 border를 모두 포함해서 설정
.box {
box-sizing : border-box; /*박스의 폭은 border까지 포함*/
}이것은 padding과 border를 포함해서 max-width만큼 해주세요 !
.box {
box-sizing : content-box; /*박스의 폭은 padding 안쪽*/
{이것은 원래처럼 padding과 border를 포함 X !
그래서 css파일 맨 위에 먼저 써놓고 시작하면 편함
CSS 파일 작성시 기본으로 쓰면 좋을 속성들 필수 기본값 CSS 리스트(계속 업데이트 해주면 좋음)
div {
box-sizing : border-box;
}
body {
margin : 0;
}
html {
line-height : 1.15; /*기본 행간 높이*/
}또한 모든 h, p 태그의 margin을 균일하게 설정하거나
li, a 태그에 text-decoration : none 을 주거나
table 태그에 border-collapse: collapse 를 주면 이런 것들이 편하다.
CSS normalize
-
브라우저마다 디자인이 다르게 보일 수 있으며
<button><input>이런 태그들은 크롬/파이어폭스 디자인이 다르다.
<small><main>이런 태그들은 일부 IE브라우저에서 이상하게 보일 수 있다.
-
호환성 이슈 관련 해결책부터 첨부해놓으면 좋은데
CSS Normalize 링크 : https://github.com/necolas/normalize.css/blob/master/normalize.css
여기있는 스타일 붙여넣으면 브라우저간 다르게 보이는 문제들을 미리 해결할 수 있다.(코딩애플강의참조)
여기 있는 스타일을 그대로 CSS 파일에 복붙하시거나 아니면 다운받아서 link 태그로 첨부하면 된다.
