[내위주] HTML / CSS 정리 1탄

내위치

 

 

1. 마진 패딩

 

margin : 바깥 여백

padding:  안쪽 여백

border: 테두리

 

border 설정법

border : 두께  선의종류  색상  -> border: 1px solid black;

 

---

2. 가운데 정렬

text-align

 

display: block;

margin-left: auto;                  =>  div,p,h1,li는 자체 block 내장이라서 display: block 안해도 됨

margin-right: auto;

 

---

3. 가로정렬하기

3-1 float

 

요소를 공중에 띄워 왼쪽/오른쪽 정렬함

 

보통 요소를 가로로 정렬하고싶을때 사용함

 

사용법:

float: left; 

float: right;

clear: both   << float 다썼으면 써줘야함. 문닫기

 

 

3-2 display : inline-block 

 

<div>
  <div class="left-box"></div><div class="right-box"></div>
</div>

.left-box {
  width : 100px; 
  height : 100px;
  display : inline-block;
}
.right-box {
  width : 100px; 
  height : 100px;
  display : inline-block;
}

박스를 만들어 왼쪽으로 정렬시키기

 

inline-block 뜻: 내폭과 높이만큼 자리차지하게 해줘.  / / 태그사이에 공백있으면 그대로 반영, 공백도 제거해야함

 

 

공백제거 편법1. 주석처리 기호 사용하기

<div>
   <div class="left-box"></div><!--
--><div class="right-box"></div>
</div>

 

 

공백제거 편법2. 부모의 폰트사이즈를 0으로 만들기

<div style="font-size : 0px;">
    <div class="left-box"></div>
    <div class="right-box"></div>
</div>

 

 

--> 결론:  깝치지말고 그냥 float 쓰자

 

---

 

4. 클래스 두개 이상 붙이기

<div class="container1 container2"> </div>

 

-> 그냥 띄어쓰고 또 쓰면됨ㅋ

---

 

5. 셀렉터 

 

5-1 공백

 

<ul class="navbar">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

.navbar li {
  display : inline-block;
}

공백으로 모든 자손 선택가능

 

5-2 꺽쇠괄호

<ul class="navbar">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

.navbar>li {
  display : inline-block;
}

  꺽쇠 > 이용해서 .li-inline 바로 밑에있는 자식만 선택가능

 

 

5-3 더 상세히 선택하기

<ul class="navbar">
  <li> <span>안녕</span> </li>
  <li></li>
  <li></li>
  <li></li>
</ul>

.navbar li>span {
  color : red;
}

.navbar 안에 있는 li, 모든 직계 자손 span 태그를 선택함

 

but, 4~5개 이상 연달아 붙이지 말기.

이렇게 써야할경우에는 상위에 클래스하나 만들고 깔끔하게적자.

 

---

6. 링크 디자인

.link {
  text-decoration : none;
}
.link:visited {
  color : black;
}

 

text-decoration: 링크에 밑줄쳐져있는거 설정하기

 

---

7. 배경설정하기

 

background-size는 px, % 단위도 가능하고

cover는 배경으로 꽉채워주세요

contain은 배경이 짤리지 않게 꽉채워주세요 라는 뜻.

background-attachment는 웹사이트가 스크롤될 때 배경이 신기하게 동작하게 만들고 싶으면 써보도록 합시다. 

 

배경 두개 겹치기

.main-background {
  background-image : url(../img/shoes.jpg), url(person.jpg);
}

 

그냥 콤마로 이미지 두개 첨부하면됨

---

8. 그라데이션

 

linear-gradient( direction, color1, color2, …, color3 )

direction에는 그라데이션 방향을 입력합니다.

• to bottom : 위에서 아래로 그라데이션을 만듭니다. (기본값)
• to top : 아래에서 위로 그라데이션을 만듭니다.
• to left : 오른쪽에서 왼쪽으로 그라데이션을 만듭니다.
• to right : 왼쪽에서 오른쪽으로 그라데이션을 만듭니다.
• ndeg : n도의 방향으로 그라데이션을 만듭니다.

 

---

 

9. position

 

요소의 위치를 설정하려면 좌표의 기준점이 필요함. 

그 기준이 되는것이 position

 

position : static;  -> 기준이 없음, 좌표적용 불가능

position : relative; -> 내 원래위치가 기준

position : absolute; -> 내 부모가 기준

position : fixeed;  -> 브라우저 창이 기준

 

---

 

10. 박스 만들기 (주의점)

 

div 박스는 width를 주면 padding, border를 고려하지 않음.

그림에서 파란색 부분만 실제 width임.

그래서 200px 박스를 만들어도, padding을 많이 주게 되면 실제 보여지는 박스의 폭이 padding 만큼 늘어날수있음.

 

 

박스의 폭을 border까지 설정해주고 싶을때

.box {
  box-sizing : border-box; /*박스의 폭은 border까지 포함입니다*/
  box-sizing : content-box; /*박스의 폭은 padding 안쪽입니다*/
}

 

box-sizing이라는 속성으로 border까지 실제 박스의폭을 설정할수있다. (중요)

 

---

 

11. CSS Reset  ( CSS 기본값 설정해두기)

div {
  box-sizing : border-box;
}
body {
  margin : 0;
}
html {
  line-height : 1.15; /*기본 행간 높이*/
}

 

 

이런거부터 시작해서

h, p태그의 margin 균일하게주기 /  li, a태그에 text-decoration : noe 주기 / 

table 태그에 border-collapse: collapse 주기 / 폰트, 폰트사이즈 설정등 미리적용해두기 가능

 

---

 

12. CSS normalize 

 

브라우저별로 조금씩 다른 스타일을 통일시키기

 

CSS Normalize 링크 :  https://github.com/necolas/normalize.css/blob/master/normalize.css 

GitHub - necolas/normalize.css: A modern alternative to CSS resets

들어가서 css복붙하기