HTML기초 - css태그 (margin,padding등)

최근 css의 여러 태그를 사용해서 연습해보고 있다.

이제 자바스크립트도 시작하고 css에도 어느 정도 익숙해져서 늦었지만 드디어 css의 태그에 대해서

정리해 보려고한다.

 

css에서 박스를 배치할 때 가장 많이 사용하는 태그를 생각해 보면

position, margin, padding, text-align, item-align, justify-content정도이다.

 

정말 이 정도만 알아도 어느 정도 배치는 가능했었다.

순서대로 정리해 보자면

 

첫 번째는 margin이다.

margin은 프레임에서 얼마나 뛰어줄지 정하는 태그이다.

margin : 20px
                 : 20px auto
                 : 10px 20px 20px 10px;
                [top] [buttom] [left] [right]

 

만약 네모난 프레임 안에 버튼을 배치하고 싶다면

 전체 클래스에 여려 클래스를 만들고 배치를 할 건데

안쪽에 있는 클래스에 margin을 걸어주면 원하는 픽셀만큼 거리를 만들 수 있다.

 

margin : auto를 주면 정확히 중간으로 이동하는데 중간에서 이동시키면 편하게 배치할 수 있다.

 

두 번째는 padding이다. padding은 margin과 같은 개념이라 확실히 구분해서 사용할 필요가 있다.

우선 margin과 padding의 차이점으로

 

margin은 전체 여백과의 여백을 둔다는 점이 있다.

위 설명에서 알 수 있듯이 네모난 프레임(부모클래스) 안에 자식 클래스가 있을 때 margin을 사용하면

부모클래스의 프레임을 기중으로 여백을 두게 된다는 뜻이다.

(혹시나 이해가 어렵다면 크롬에서 F12를 누르고 개발자 도구를 눌러서 구조를 분석해 보길 바란다)

 

padding은 객체 간의 간격을 뛰어주는 태그이다.

만약 두 개의 버튼을 같은 클래스에 배치하고 padding을 사용하면

버튼사이의 간격을 뛰우게 된다.

 

세 번째는 display이다. 이건 객체를 나열할 때 사용하는 태그인데 

주로 사용하는 용도는 가로로 배치할 때 쓰이는 것 같다.

각각 정리하자면

       display    : flex
                  : block
                  : inline
                  : none /요소가 사라짐. 자리차지 없음 /

이렇게 있고 flex가 가로로 나열할 때 사용된다.

See the Pen Untitled by wogh0424 (@wogh0424) on CodePen.

 

See the Pen block by wogh0424 (@wogh0424) on CodePen.

 

다음은 block이다. block는 위 결과와 같이 하나가 채워지면 아래쪽으로만 배치되는 성질이 있다.

 

in-line태그는 간단히 줄 바꿈 없이 한 줄에서만 배치되는 설정이며

none은 그냥 안 보이게 하는 설정이다.

 

마지막 태그는 justify-content이다.

이 태그는 옆 객체와의 거리를 뛰우고 싶을 때 사용한다.

보통 버튼과의 일정한 거리를 뛰울 때 사용되는 태그이다.

See the Pen justify by wogh0424 (@wogh0424) on CodePen.

 

 

        justify-content : flex-start; 
                        : center
                        : flex-end
                        : space-between;
                        : space-arount;
                        : space-evenly;

 

justify-content에는 다양한 간격설정이 존재하며 직접 사용해 보면서 간격을 맞춰가면 될 것이다.

 

 

이제 학원에서 js도 들어가고 슬라이드나 버튼을 누르면 페이지를 뛰우는 등 다양한 코드에 대해서 배웠다.

하지만 진도가 워낙 빠르다 보니 따로 복습을 하지 않으면 따라갈 수 없을 정도의 속도와 난이도라고 생각한다.

그래도 지금 공부해 두면 전부터 만들고 싶었던 슬라이드가 적용된 홈페이지를 혼자 만들 수 있다는 점에서는

설레고 기대되는 부분이 크기에 코드를 펼쳐서 세세히 공부해서 무조건 이해할 생각이다.

 

앞으로 어려운 내용은 더욱 늘 것이고 공부해야 할 내용도 늘겠지만 결국은 공부의 양은 나 자신이 

그 공부를 시작하기 전까지 얼마나 배운 내용들을 흡수해왔는가에 따라서 앞으로 공부해야 할 공부의 양도 달라질 것이다.

그렇기에 게으름 피우지 않고 블로그와 복습 이외에도 필요한 공부를 해나갈 것이다.

 

그럼 오늘은 여기서 끝내겠다.