CSS

Inline CSS

• design을 적용할 요소에 직접 작성하는 CSS

<p style="color:red;">xxx</p>

• JavaScript로 제어하는 CSS = Inline CSS 를 조작하는 것

document.querySelector("선택자").style.color = "red";

선택자

기본 선택자

선택자	설명
요소명	태그 이름 선택
.	클래스 선택자
#	아이디 선택자
>	자식 선택자
" "	자손 선택자

<style>
        p{
            color:red;
        }
        #one{
            background-color:yellow;
        }
        .my-class{
            font-size:30px;
        }
</style>

<p id="one" style="color:blue;">p1 입니다</p>
<p>p2 입니다</p>
<p class="my-class">p3 입니다</p>
<input type="text" class="my-class">

⭐  우선순위 : JS > Inline > ID > Class > 태그명
    JS로 적용하는 CSS를 제외하고 Inline CSS 적용 우선순위가 높다
    ➜ document.querySelector(" ") = CSS 선택자의 작성법과 동일하게 취급

margin

• 바깥쪽 여백

  		  top
   ↗     		  ↘
      -----------   
     |           |
left |           | right
     |           |
      -----------
   ↖	  		  ↙
 	     bottom

margin : 10px 20px 30px 40px; ➜ top right bottom left
margin : 20px 40px; ➜ 위아래 = 20px, 좌우 = 40px
margin : 0 auto; ➜ 좌우 가운데 정렬

padding

• 안쪽 여백

  		  top
   ↗     		   ↘
      -----------   
     |           |
left |           | right
     |           |
      -----------
   ↖	  		   ↙
 	     bottom

padding : 10px 20px 30px 40px; ➜ top right bottom left
padding : 20px 40px; ➜ 위아래 = 20px, 좌우 = 40px
padding : 0 auto; ➜ 좌우 가운데 정렬

⭐ padding 과 margin 은 크기만 지정하면 된다

border

• 경계선

border-width: 10px; ➜ 경계선 폭
border-style: solid; ➜ 스타일 (none, solid, dotted, dashed, double, inset, outset)
border-color : blue; ➜ 경계선 색상

JSP

BootStrap

➜ 주로 클래스 선택자로 만들어진 10,000줄 정도의 미리 작성된 CSS

• 클래스 속성만 부여해준다면 미리 작성된 CSS가 적용된다

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">

<table class="table table-striped">
	<thead class="table-dark">
	</thead>
</table>
<div class="mb-2">
	<div class="form-text">10글자 이내로 입력해 주세요</div>
</div>

mb : margin-bottom (1-5 까지 존재)

자유도가 더 높은 CSS
tailwindcss