처음 알게된 atom 팁

코드에 html을 치고 엔터를 누르면 기본구조가 바로 완성된다!

1 Block Element,Inline Element

화면 전체를 쓰는 태그 Block Element ex) <h1>
자기 크기만큼 쓰는 태그 Inline Element ex) <a>

이 태그들을 확인하기 위해서 태그에 테두리를 그려 부피감을 확인하려할때
선 두께 색 선 종류를 지정한다

border-width 테두리 두께
border-color 테두리 색
border-style 테두리 선의 종류(단선solid 실선 점선)

h1{
  border-width:5px;
  border-color:red; 
  border-style: solid;
}
a{
  border-width:5px;
  border-color:red; 
  border-style: solid;
}

위의 코드를 적용시켜보면 h1 태그는 화면전체를 사용하고
a태그는 컨텐츠 크기만큼의 부피를 사용한다
이처럼 화면전체를 사용하는태그 Block Element 와
자기 만큼만 쓰는 태그 Inline Element 로 나누어져 있다

2 display

Block Element를 Inline Element로 바꾸고 싶을때

h1{
  border-width:5px;
  border-color:red; 
  border-style: solid;
  display:inline;
}

Inline Element을 Block Element로 바꿀때는 display:block;
바꿔 써주면 된다

--> block, inline은 기본값일뿐 css를 통해 언제든 바꿀수있다

추가팁
display:none; 을 쓰면 화면에서 사라지게 할 수 있다

3 코드 중복 없애기

h1{
  border-width:5px;
  border-color:red; 
  border-style: solid;
}
a{
  border-width:5px;
  border-color:red; 
  border-style: solid;
}

중복이 많은 태그를 줄이는 방법은

h1,a{
  border-width:5px;
  border-color:red; 
  border-style: solid;
}

h1과 a를 같이 써주면 똑같이 적용된다

하지만 이코드도 border이라는 중복 존재

h1,a{
  border : 5px solid red;
}

border로 묶어 특징들을 띄어쓰기로 구분해 나열해 주면 된다

4 padding

콘텐츠와 테두리 사이 간격을 만드는 방법

h1,a{
  border : 5px solid red;
  padding: 20px
}

padding: 20px 추가전

padding: 20px 추가후

5 margin

테두리 사이의 간격을 수정하는 방법

marin을 20px주면 박스사이 간격이 떨어지게 되고

h1{
   border:5px solid red;
   padding: 20px;
   margin: 20px;
}

marin을 0px 주게 되면 아예 간격이 사라지게 된다

h1{
   border:5px solid red;
   padding: 20px;
   margin: 0;
}

6 width

폭을 줄이고 싶을때 사용하는 방법

  h1{
     border:5px solid red;
     padding: 20px;
     margin: 20px;
     width: 100px;
 }

width 값을 지정해주게되면 테두리가 지정한만큼의 값으로 그려지게 된다

box model의 다양한 속성이 존재하는데 까먹었다면 검색을 통해 찾으면 된다

추천 검색어 : css box model

7 검사

웹 페이지에서 마우스 오른쪽 버튼 누른후 검사를 선택하게되면

이런 화면이 나타나게 되는데
박스를 선택하면 왼쪽 화면에 어떤부분이 어느곳에 해당하는지
바로 확인이 가능하다

파란색 -> 콘텐츠
초록색 -> padding
노란색 -> border
주황색 -> margin

style 부분은 이 태그가 어떤 css스타일의 영향을
받고있는지 보여주는 중요한 기능이다

이 기능을 사용하지 않으면 css와 html이 복잡해졌을때
어떤 css의 영향을 받는지 찾기 힘들어지므로 잘 이해하고 사용할것!