Notice
Recent Posts
Recent Comments
Link
«   2025/08   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Tags
more
Archives
Today
Total
관리 메뉴

노승현

CSS 본문

프론트엔드

CSS

nsh95 2023. 12. 28. 21:19

 

선택자 : 웹 크롤링에서 .select() 메서드

1) 요소선택자

2) 아이디선택자

3) 클래스선택자

4) 전체선택자

5) 하위선택자, 띄어쓰기,자식선택자

6) 가상선택자

...

 

전체 선택자
*{
color: blue;
}
전체선택자를 사용하면 매우 성능이 떨어지기 때문에 사용 xxx

요소 선택자
h1{
color: blue;
}

id 선택자 : #
#wrapper{
color: pink;
}


class 선택자 : .
.lnb{
color: pink;
}

하위 : 띄어쓰기 -아래 모두
.gnb li{
color: pink;
}

자식 : >  - 바로 아래
.gnb > li{
color: pink;
}


리스트 태두리 없애기
li{
list-style: none;
}

블럭 요소 인라인 요소로 바꾸기
.gnb li{
display: inline;
}

인라인 요소는 크기 변경이 안되기 때문에 인라인 요소 블럭으로 바꾸기
.gnb li a{
display: inline-block;
width: 250px;
background-color: blue;
}

가로 중앙 정렬
text-align: center;

a태그 밑줄없에기
text-decoration: none;

세로 중앙 정렬
height: 40px;
line-height: 40px;

밑줄 만들기
text-decoration: underline;

마우스를 갖다 대면 반응
.gnb li a:hover{

트랜지션으로 호버시에 css 변경 속도 조절 가능
transition: 1000ms;

회원가입시
이용약관
로렘입숨 - 의미없는 문단
문단 길때 높이넘어갔을때 스크롤
overflow-y: scroll;

 

 

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

JSP 란?  (0) 2024.01.05
프론트엔드  (1) 2023.12.28