gwooden_코린이

css 박스 모델 본문

프론트엔드/html

css 박스 모델

gwooden22 2022. 12. 15. 17:03
728x90

html의 태그들을 사각형으로 인식해서 처리 -> 브라우저

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style4.css">
</head>
<body>
  <h1>제목</h1>
  <p>p태그 안에<strong>strong태그</strong>넣음</p>
</body>
</html>
* {
  border: 1px solid red;
  margin: 10px;
  padding: 5px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style4.css">
</head>
<body>
  <h1>제목</h1>
  <p>p태그 안에<strong>strong태그</strong>넣음</p>
</body>
</html>
p {
  /* 두께, 색깔 */
  border: 2px none red;

  /* 선 스타일 */
  border-style: dotted;
  border-style: dashed;
  border-style: solid;
  border-style: double;
  
  /* 3D 효과 IE에서는 지원안함 */
  border-style: groove;
  border-style: ridge;
  border-style: inset;
  border-style: outset;
}

선 방향 설

p {
  /* 두께, 색깔 */
  border: 2px none red;
  /* 순서 : 위 오른쪽 아래 왼쪽 */
  border-style:  dotted solid none dashed;
}

ul li {
  display: inline-block; /* 일렬로 정렬 */
  width: 100px; /* 간격 */
  text-align: center; /* 가운데 정렬 */
  border-right: 1px solid red;
}

선 모형 둥글게

p {
  border: 2px solid red;
  border-radius: 20%;
}
p {
  width: 100px;
  height: 100px;
  border: 2px solid red;
  border-radius: 20%;
}

 

각 모서리 별로 설정도 가능

p {
  width: 100px;
  height: 100px;
  border: 2px solid red;
  border-radius: 20%;
  border-top-left-radius: 10%;
  border-top-right-radius: 25%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 100%;
}

 

선 방향별로 색상 다르게 설정

  border-left-style: soild;

  border-top-color: #000;
  border-right-color: green;

마진 설정

p {
  /* margin-top: 30px ;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 30px; */

  /* 위 오른족 아래 왼쪽 */
  margin: 10px 20px 30px 40px;

  /* 위 (왼쪽/오른쪽) 아래*/
  margin: 10px 20px 30px;

  /* (위, 아래) (왼쪽, 오른쪽) */
  margin: 10px 20px;

  /* 위, 오른쪽, 아래, 왼쪽 모두 10px 설정 */
  margin: 10px;
}

 

패딩 설정

마진과 동일

padding: 10px 20px 30px 40px

 

box-shadow: 5px 5px 10px black;

 

inset 추가하면 안쪽부터

  box-shadow: inset 5px 5px 10px black;

 

 

 

  box-shadow: inset 5px 5px 10px black, inset 0 0 20px red;

 

728x90
저작자표시 비영리 변경금지 (새창열림)

'프론트엔드 > html' 카테고리의 다른 글

css 포지션 float  (0) 2022.12.15
css 표 다뤄보기  (0) 2022.12.15
css 네비바 구현 적용 해보기  (1) 2022.12.15
CSS 색상 투명도 조절 및 배경이미지 활용  (0) 2022.12.15
CSS 파비콘 적용해보기  (0) 2022.12.15
'프론트엔드/html' Related Articles more
Comments