[html] [CSS] 레이아웃 기초/ div공간, vs code 단축 문구, border테두리, border-radius둥근 테두리
vs code 비주얼스튜디오 코드 단축문구
- div 10개 만들고 싶을 때 : div*10
- class가 있는 div를 10개 만들고 싶을 때 : .클래스명*10
- class가 있는 다른 태그를 n개 만들고 싶을 때 : 태그명.클래스명*n
ex) li.menu*5 하면 <li class="menu"></li>가 5개 생긴다
- ul 안에 li 8개 넣고 싶을 때
ul>li*8
- p태그 안에 lorem ipsum 기본문자를 넣고 싶을 때
p>lorem
-자동번호 넣기(순차적 번호가 할당됨)
태그명.클래스명 $ {내용}*n
태그 해당 클래스명에 숫자를 오름차순으로 할당하고 내용 뒤에 숫자를 붙여 함께 할당함
<p>본문 안에는 제목이 들어가지않는다.
본문 안에 제목을 넣고 싶으면 div를 또 넣어준다.
[ width와 height ]
width - 넓이
height - 높이
넓이와 높이를 말한다. 이 속성들로 정해진 영역이 바로 실질적인 컨텐츠 영역이 된다.
단위는 px, %, vw / vh나 vmin / vmax를 쓰며 auto(자동)단위를 쓸 수 있다.
%는 브라우저를 줄였을때도 그 %를 유지한다.
margin- 바깥쪽 여백, 컨텐츠와 컨텐츠 사이에 영역을 넣을 때 사용
padding- 안쪽 여백
boder - 테두리 (선택 사항)
**< 공간을 나누는 div 태그 >
블록속성의 대표태그 (세로로 출력)
투명한 빈 상자다.
넓이높이를 정해줘야 컨텐츠 영역이 된다.
div안에 div 넣을 수 있다.
div태그는 웹페이지에서 레이아웃을 만들 때 주로 사용하는 태그이다.
block속성의 대표적인 태그로 너비 높이를 지정하지 않으면 브라우저의 전체 너비를 차지한다.
block 속성에 너비 높이와 여백을 주고 싶을 때에는 css box model이라는 개념을 알고 있어야 한다.
[ css box model ]
block 속성을 가진 모든 태그들은 박스의 형태를 가지고 있으며 원하는 위치에 배치하기 위해
css를 이용한다.
가로와 세로의 크기를 지정하고 여백과 배치 형태를 설정하여 원하는 형태를 만들 수 있다.
이러한 박스형태인 요소를 스타일 시트에서는(css) 'css박스 모델'이라고 부른다.
박스 모델로 컨텐츠 영역을 만들 때에는 width와 height를 이용해 넓이와 높이를 만들 수 있고,
컨텐츠 안에 여백을 설정할 때에는 padding을 사용한다.
컨텐츠와 컨텐츠 사이의 여백을 지정할 경우 margin을 이용해 컨텐츠를 떨어트릴 수 있다.
박스에 테두리를 지정하고 싶을때에는 boder라는 속성을 이용한다.
padding, boder, margin은 사방으로 적용할 수 있고, 원하는 위치에만 따로 적용할 수 도 있다.
구조: width, height -> padding -> boder -> margin
초록영역: 패딩
주황 부분: 마진
위와 같이 코딩했을 때 총 가로 사이즈는 420이 된다. (padding)은 컨텐츠 영역 밖으로 생긴다
<margin / padding 원하는 부분에만 적용하는 법>
1. padding/ margin을 각각 적용하는 방법
------------------------------------------------------------
컨텐츠 영역 상하좌우로 각각 다른 여백을 지정하고 싶을 경우 아래 방법을 사용한다.
1. margin-top : 숫자단위; - margin을 위에만 적용.
2. margin-bottom : 숫자단위; - margin을 아래에만 적용.
3. margin-left : 숫자단위; - margin을 왼쪽에만 적용.
4. margin-rigth : 숫자단위; - margin을 오른쪽에만 적용.
1. padding-top : 숫자단위; - padding을 위에만 적용.
2. padding-bottom : 숫자단위; - padding을 아래에만 적용.
3. padding-left : 숫자단위; - padding을 왼쪽에만 적용.
4. padding-rigth : 숫자단위; - padding을 오른쪽에만 적용.
2. 컨텐츠 영역 상하와 좌우에 각각 동일한 여백을 지정하고 싶을 경우
-------------------------------------------------------------
상하와 좌우에 각각 동일한 여백을 지정할 경우에는 각 값을 공백으로 구분한다.
padding : 숫자1(top/botton) 숫자2(left/right); - 안쪽 여백
margin : 숫자1(top/botton) 숫자2(left/right); -바깥쪽 여백
3. 컨텐츠 영역 상하와 좌우에 각각 다른 여백을 한번에 지정하고 싶을 경우
-------------------------------------------------------------
상/하/ 좌/우에 각각 다른 여백을 한번에 지정할 경우에는 각 값을 공백으로 구분한다.
첫번째 숫자부분이 top부분이며 시계방향으로 적용된다.
padding : 숫자1(top) 숫자2(right) 숫자3(botton) 숫자4(left);
margin: 숫자1(top) 숫자2(right) 숫자3(botton) 숫자4(left);
(0으로 쓰면 적용 x)
< 테두리를 만드는 border>
테두리 관련 css 속성은 사각 형태를 가진 모든 요소에 다양하게 적용할 수 있다.
테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상 (border-color)를 테두리 속성이라고 한다.
border-style (테두리 속성)
=======================
1. none★: 테두리가 나타나지 않는다. 기본 설정.
2. hidden : 테두리가 나타나지 않는다. border-collapse : collapese; 일때 다른 테두리도 모두 표시되지 않는다.
3. dashed △ : 테두리를 직선 형태의 점선으로 표시
4. dotted △: 테두리를 도트 점선으로 표시함
5. double : 테두리를 이중 실선으로 표시함(3px이상이어야 이중실선이 표시될 공간이 가능하다.)
6. groove : 테두리를 입체적으로 표시함
7. inset : 테두리를 안쪽 형태로 굵게 표시함. 입체적으로 보인다.
8. outset: 테두리를 바깥쪽으로 굵게 표시함. 입체적으로 보인다.
9. ridge : 테두리를 창에서 튀어나온 것처럼 표시함.
10. solid★ : 테두리를 실선으로 표시 * 제일 많이 쓰는 속성
△: 종종 쓴다 / ★: 많이 쓴다.
★<border에 동일한 두께와 색상, 스타일을 사방에 한꺼번에 적용하고 싶을 때>
border : 두께 스타일 색상; 순으로 적어준다. 공백으로 구분한다.
ex) border: 3px soild #000
★ <박스의 일부분에 boder를 적용할 경우>
border-top: 두께 스타일 색상;
left/botton/right....
< 박스를 둥글게 만드는 border radius >
박스의 모서리 부분을 둥글게 만들어주는 속성
먼저 width와 height로 영역을 만들어 준 다음 border radius 속성을 이용해 둥글기를 주는 것이다.
boder radius는 값을 적용할 때 1개만 선언하면 모든 둥글기가 동일하게 적용되고,
2개로 구분하여 선언하면 대각선으로 적용된다.
값을 4개로 구분하면 각 모서리마다 다른 둥글기를 적용할 수 있다. (시계방향으로 적용)
border-top-left-radius: 'value';
border-top-right-radius: 'value';
border-bottom-left-radius: 'value';
border-bottom-right-radius: 'value';모서리마다 각각 넣을 수도 있다.
[ 값이 1개일때 : border-radius: 동일한 둥글기 값; ]
백그라운드 컬러를 투명(transparent)로 주고 테두리를 주면 위와 같은 자주 볼 수 있는 모양을 만들 수 있다.
[ 값이 2개일때 border-radius: top-left,botton-right top-right,botton-left; ]
- 2개로 구분하여 선언하면 대각선으로 적용된다.
[ 값이 4개일때: border-radius: top-left top-right botton right botton-left ] 시계 방향순으로 적는다.
< boder radius로 동그라미 아이콘 만들기 >
박스가 정사각형이어야한다.
동그라미는 radius 100%로 준다.
동일한 크기를 예쁘게 적용하고 싶으면 px 단위를 써야한다.
< boder radius로 타원형 아이콘 만들기 >
직사각형에 %단위는 타원형으로 변한다. 아래와 같은 모양을 만들려면 px를 써야한다.
직사각형에 높이값의 절반이상의 px을 주면 타원형이 된다.
height의 절반 60을 radius에 준다
★< 글자를 세로 중앙에 배치하고 싶을 때 line-height >
줄 간격이 높이값과 같으면 글자가 세로 중앙에 배치된다.
줄의 높이이기때문에 한 줄까진 괜찮지만 두 줄부터는 line-height로 조절 할 수 없다.
<모서리 이름>
윗면 왼쪽: top-left
윗면 오른쪽: top-right
아랫면 왼쪽 botton-left
아랫면 오른쪽 botton-right