반응형
˙ 이미지의 가로, 세로 크기를 지정
img{
width : 100px;
height : 200px;
}
˙ div 태그의 테두리를 지정
div{
border : 2px solid red;
}
˙ p태그의 글자크기와 글자색을 지정
p{
font-size : 1.5em;
color : red;
}
˙ a링크 태그의 밑줄이 나타나지 않도록 설정
a{
text-decoration: none;
}
˙ 여러개의 div 옆으로 배치
div{
display : inline-block;
}
˙ id가 aa 인 요소의 글자 정렬을 가운데 로 지정
#aa{
text-align : center;
}
˙ pre 태그의 위쪽과, 아래쪽 테두리를 지정
pre{
border-top : 2px solid blue;
border-bottom : 2px solid red;
}
˙ span 태그를 검정색 배경에 하얀색 글자로 지정
span{
background : black;
color : white;
}
˙ table의 안쪽 각 셀의 테두리를 합치기
table{
border-collapse : collapse;
}
˙ table의 각 셀간의 여백(공백)을 지정
table{
border-spacing : 10px;
}
˙ div의 안쪽여백과 줄간격을 지정
div{
padding : 10px;
line-height : 1em;
}
˙ div와 div사이의 여백을 지정
div{
margin : 20px;
}
˙ button의 배경색과 둥근 테두리를 지정
button{
background : red;
border : 3px solid gray;
border-radius : 55%;
}
˙ p태그의 글자를 굵게 지정
p{
font-weight : bold;
}
˙ 아이디가 tab1인 table 의 후손 td의 문자열를 가운데로 정렬
#tab1 td{
text-align : center;
}
˙ 클래스가 tta인 요소의 테두리의 폭은 10px 테두리의 색상은 green 으로 지정
.tta {
border : 10px solid green;
}
˙ div의 안쪽여백과 바깥쪽여백을 지정, 내용이 테두리 밖으로 벗어났을때 scrollbar가 생기도록 설정
div{
margin : 10%;
padding : 10%;
overflow : auto;
}
˙ p태그와 span태그를 동시에 글자크기 지정
p,span{
font-size : 2.0em;
}
˙ ul 리스트 스타일을 검정 사각형으로 변경
ul{
list-style-type : square;
}
˙ a 태그의 글자간격을 지정
a{
letter-spacing : 10px;
}
반응형
'코딩 기록 > HTML' 카테고리의 다른 글
[HTML] 라디오 버튼 값을 고정시키고 싶을 때 (0) | 2021.06.27 |
---|---|
[HTML] HTML 코드 변경 후에도 실행화면이 바뀌지 않을 때 (0) | 2021.06.21 |