본문 바로가기
Web/HTML & CSS

div태그와 css의 border 속성

by 팡지혜 2024. 6. 3.

[ 공간을 분할하는 div태그 ]

div태그는 웹페이지에서 레이아웃을 만들 때 주로 사용하는 태그이다.
block속성의 대표적인 태그로 너비 높이를 지정하지 않으면 브라우저의 전체 너비를 차지한다.

block속성에 너비 높이와 여백을 주고 싶을 때에는 CSS BOX MODEL이라는 개념을 알고 있어야 한다.

[ CSS BOX MODEL ]
block속성을 가진 모든 태그들은 박스의 형태를 가지고 있으며 원하는 위치에 배치하기 위해 css를 이용한다. 가로와 세로의 크기를 지정하고 여백과 배치 형태를 설정하여 원하는 형태를 만들 수 있다.
이런 박스 형태의 요소를 스타일 시트에서는(css) 'css 박스 모델'이라고 부른다.
        
박스 모델로 컨텐츠 영역을 만들 때에는 width와 height를 이용해 넓이와 높이를 만들 수 있고, 컨텐츠 안의 여백을 설정할 때에는 padding을 사용한다. 컨텐츠와 컨텐츠 사이의 여백을 지정할 경우 margin을 이용해 컨텐츠를 떨어트릴 수 있다.
박스에 테두리를 지정하고 싶을 때에는 border라는 속성을 이용한다.
padding, border, margin은 사방으로 적용할 수 있고 원하는 위치에만 따로 적용할 수도 있다.

구조 : width, height -> padding -> border -> margin

CSS BOX MODEL 구조

 

개발자 화면 참고

 



[ width와 height ]
width는 넓이, height는 높이를 말한다. 이 속성들로 정해진 영역이 바로 실질적인 컨텐츠 영역이 된다.
단위는 px, %, vw / vh나 vmin / vmax를 쓰며 auto(자동)단위를 쓸 수 있다.

[ padding / margin을 각각 적용하는 방법-1 ]
컨텐츠 영역 상화좌우로 각각 다른 여백을 지정하고 싶은 경우 아래 방법을 사용한다. (단어 사이에 하이픈은 빠지면 오류가 나니 반드시 넣는다.)

1. margin-top : 숫자+단위; -margin을 위에만 적용한다.
2. margin-bottom : 숫자+단위; -margin을 아래에만 적용한다.
3. margin-left : 숫자+단위; -margin을 왼쪽에만 적용한다.
4. margin-right : 숫자+단위; -margin을 오른쪽에만 적용한다.
    
1. padding-top : 숫자+단위; -padding을 위에만 적용한다.
2. padding-bottom : 숫자+단위; -padding을 아래에만 적용한다.
3. padding-left : 숫자+단위; -padding을 왼쪽에만 적용한다.
4. padding-right : 숫자+단위; -padding을 오른쪽에만 적용한다.
    
[ padding / margin을 각각 적용하는 방법-2 ]
컨텐츠 영역 상하와 좌우에 각각 동일한 여백을 지정하고 싶은 경우
상하와 좌우에 각각 동일한 여백을 지정할 경우에는 각 값을 공백으로 구분한다.

1. padding : 숫자+px(상하 자리) 숫자+px(좌우 자리); -안쪽 여백을 줄 때
2. margin : 숫자+px(상하 자리) 숫자+px(좌우 자리); -바깥쪽 여백을 줄 때

[ padding / margin을 각각 적용하는 방법-3 ]
컨텐츠 영역 상하좌우에 각각 다른 여백을 한 번에 지정하고 싶은 경우
상/하/좌/우에 각각 다른 여백을 한 번에 지정할 경우에는 각 값을 공백으로 구분한다.
첫번 째 숫자가 top부분이며 시계방향으로 적용된다.

1. padding : 숫자+px(top) 숫자+px(right) 숫자+px(bottom) 숫자+px(left);
2. margin : 숫자+px(top) 숫자+px(right) 숫자+px(bottom) 숫자+px(left);

 

div 태그 적용

 


 

[ 테두리를 만드는 border ]
테두리 관련 css 속성은 사각 형태를 가진 모든 요소에 다양하게 적용할 수 있다.
테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)를 테두리 속성이라고 한다.

border는 절대단위을 사용한다.


[ border-style ]
1. none★ : 테두리가 나타나지 않는다. 기본 설정.
2. hidden : 테두리가 나타나지 않는다. border-collapse : collapse; 일 때 다른 테두리도 모두 표시되지 않는다.(예로 블록속성의 박스 선과 바깥박스 선 사이)
3. dashed△ : 테두리를 직선 형태의 점선으로 표시한다.
4. dotted△ : 테두리를 도트 점선으로 표시한다.
5. double : 테두리를 이중 실선으로 표시한다.(3px 이상 써야 효과가 보인다)
6. groove : 테두리를 입체적으로 표시한다.
7. inset : 테두리를 안쪽 형태로 굵게 표시함. 입체적으로 보인다.
8. outset : 테두리를 바깥쪽 형태로 굵게 표시한다. 입체적으로 보인다.
9. ridge : 테두리를 창에서 튀어나오는 것처럼 표시한다.
10. soild★ : 테두리를 실선으로 표시한다.

[ border에 동일한 두께와 색상, 스타일을 사방에 적용하고 싶을 때★]
border : 두께 스타일 색상;  ex) border: 3px solid #000;

[ 박스의 일부분에 border를 적용할 경우 ] - 상하 좌우 같은 값이라도 묶어서 쓰는 것은 안된다. 반드시 따로 한 줄씩 써야 한다. 
1. border-top : 두께 스타일 색상; -박스의 위에만 border를 적용한다.
2. border-left : 두께 스타일 색상; -박스의 왼쪽에만 border를 적용한다.
3. border-bottom : 두께 스타일 색상; -박스의 아래에만 border를 적용한다.
4. border-right : 두께 스타일 색상; -박스의 오른쪽에만 border를 적용한다.

 

border style

 


 

[ 박스를 둥글게 만드는 border-radius ]
박스의 모서리 부분을 둥글게 만들어주는 속성.
border-radius는 값을 적용할 때 1개만 선언하면 모든 둥글기가
동일하게 적용되고 2개로 구분하여 선언하면 대각선으로 적용된다.
또한 값을 4개로 구분하면 각 모서리마다 다른 둥글기를 적용할 수 있다.

(%값을 사용할 수는 있지만 타원형으로 만들어 지게 되므로 px단위를 주로 쓴다.

원 모양을 만드는 방법은 넓이 높이 동일하게 하여 넓이 높이의  반 이상 만큼 px을 써주거나 50% 적용)

- 값이 한 개일 때
border-radius: 동일한 둥글기 값;
- 값이 두 개일 때(대각선으로 X자 방향)
border-radius: top-left,bottom-right top-right,bottom-left;
- 값이 네 개일 때 (시계방향)
border-radius: top-left top-right bottom-right bottom-left; 

 


<추가 참고>

 

[ VSCode 자동완성★ ]
 - div 10개를 만들고 싶을 때 : div*10
 - class가 있는 div 10개를 만들고 싶을 때 : .클래스명*10
 - class가 있는 다른 태그를 n개 만들고 싶을 때 : 태그명.클래스명*n
   ex) li.menu*8 => <li class"menu"></li>

 - 자동번호넣기(순차적 번호가 할당됨) : 태그명.클래스명$(내용$)*n
 =>태그에 해당 클래스명으로 숫자를 오름차순으로 할당하고 내용뒤에 숫자를 붙여 함께 할당함.
     ex)li.menu${menu$}*8
     ul>li.menu${menu$}*8

 - p>lorem : p태그 안에 lorem ipsum 기본문자를 할당


 

- link 'rel' 은 파일 형식

-'*'는 전체 선택자

-css 안에 초기화 코드 넣어도 된다.

 

-보더는 선택사항이며 사방 중 필요한 부분만 적용 가능

 

-px 값은 항상 짝수를 사용한다. (반으로 나누거나 할 때 소수점 생기지 않도록)