☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비쥬얼 스튜디오 코드④_테이블 만들기2 , 목록태그

조반짝 2023. 5. 18. 14:20
728x90
반응형

01 테이블 만들기 

 

wrap을 정중앙에 보내기: margin: 0 auto; 

** 반응형할때는 height 값 빼줘야함> 반응형에 탄력있게 크기조절이 되어야하는데 높이값을 들어가면 반응형 크기 조절이 안됨.

 

wrap색

텍스트 여백주기_1

텍스트 여백주기_2

<p>태그: 단락

 

[이름 부여해주기]

1. class: 똑같은 이름을 여러개를 부여해서 사용할 수 있음 

2. id: 중복된 이름을 사용하지 않음, 큰덩어리에만 부여

p태그 생략가능

#wrap p.text = #wrap .text 

padding 값은 크기를 늘린다. w300 에  padiding 30px 을 주면 w360이 된다.

 

float 을 띄우면 텍스트, 이미지가 한층 더 올라감

clear로 텍스트, 이미지가 못올라가게 함 , clear가 비어있는 1층공간을 채워줌

float은 clear: both; 반드시 같이 넣어줘야함 

 

caption: 표에 대한 보충설명

background-color: rgba(r,g,b,a)  rgb: 컬러 / a: 투명도

**코딩은 간단하게 해야 잘 만든 코드

 

02 목록태그

[순서가 없는 목록 만들기]

 

li 를 사용하려면 ul태그가 함께 사용되어야한다.

<ul>

       < li>

        </li>

</ul>

[순서가 있는 목록 만들기]

<ol>

       < li>

        </li>

</ol>

ol li:nth-child(2) {

      color: violet

}

ol의 li 두번째 (포도) 가 바이올렛으로 변경됨

ol의 li 짝수에 보라색으로 칠해주기

<ol type ="A">

[정의형 목록 만들기]

<dl>

      <dt> </dt>

      <dd> </dd>

<dl>

 

728x90
반응형