개발자 끄적끄적
선택자, 배치 본문
CSS 선택자
1) 태그{ }=>p{ }
2) 클래스명{ }=>.here{ }
3) 아이디명{ }=>#here{ }
4) 상위선택자>자손선택자{ }==>div>span{ }
ex)<div>(기준)
<span>hong</span> -1(깊이가 1단계)
<span>gil</span> -2(깊이가 1단계)
<p> -3(깊이가 1단계)
<span>dong</span> -4(깊이가 2단계)
</p>
</div>
- div태그 안에 자식span은 선택이 된다(1, 2)->div>span{ }/3도 선택가능
- div태그에서 4은 후손이기 때문에 적용이 되지 않는다=>p>span{ }은 가능
5) 상위선택자 후손선택자{ }==>div span{ }=>깊이가 1단계 이상
6) 선택자+선택자{ }==>div+span{ } : div태그 바로 뒤에 있는 span=>1
7) 선택자~선택자{ }==>div~span{ } : div태그 뒤에 있는 모든 span=>1,2,4
8) 선택자[속성]{ }==>input[type=text]{ } : input태그 중에 type속성이 text인 요소
a. Type=text : type속성이 text인 것
b. Type~=text : type속성에 text가 포함된 것
c. Type^=text : type속성값이 text로 시작되는 것
d Type$=text : type속성값이 text로 끝나는 것
9) 선택자:first-child{ }=>li:first-child : li태그중에 첫번째 요소
10) 선택자:last-child{ }=>li:last-child : li태그중에 마지막 요소
11) 선택자:nth-child(n){ }=>li:nth-child(2) : li태그중에 2번째 요소
- 홀수 : n==2n-1
- 짝수 : n==2n
12) 선택자:hover{ }=>#irum:hover{ } : id가 irum인 곳에 마우스가 올라가면
13) 선택자::before{ }=>#score::before{ } : id가 score인 곳이 표시되기 전
14) 선택자::after{ }=>#score::after{ } : id가 score인 곳이 표시된 후
::=>가상 클래스를 의미
ex)<style>
#sel6>.c6::before{
content:'★★★';
color:#f00;
}
#sel6>.c7::after{
content:url(../images/imo.png);
color:#00f;
}
</style>
<div id='sel6'>
<div class='c6'>주요사항</div>
<div class='c7'>최고급 마우스</div>
</div>
line-height : 줄 간격(단위 : %, em, px 등)
letter-spacing : 문자-문자 사이의 간격(단위 : %, em, px 등)
text-decordation
- underline : 모든 text에 밑줄이 쳐진다
- overline : 모든 text에 윗줄이 쳐진다
- line-through : 모든 text에 가운데 줄이 쳐진다
- text-align : center->문자열을 중앙 정렬
- verticla-align : center->문자열을 높이의 가운데 정렬(근데 정확하지는 않는다)
*꼼수*
height:90px; , line-height:90px; -> height와 line-height 사이즈를 똑같이 만들면 된다
단, 한 줄인 경우만 가능하다(두 줄 이상인 경우는 불가능하다->line-height, height를 지우고 padding을 지정)
(ex. text가 두 줄 이상인 경우)
div.c5{
width:200px;
padding:30px;
margin-top:20px;
background-color:#eee;
text-align:center;
}
*padding값 설정
- 1개만 쓸 때 : 상하좌우가 모두 같은 값으로 적용(ex.10px)
- 2개만 쓸 때 : 위, 아래/오른쪽 왼쪽 설정(ex.10px 20px)
- 4개 쓸 때 : 위, 오른쪽, 아래, 왼쪽 설정 각각 설정(ex.10px 20px 30px 40px)
div.c6{
border-left-width:0;
border-right-width:0;
border-top-width:10px;
border-bottom-width:10px;
}
- 외각의 왼쪽선, 오른쪽선이 없어진다
- 외각의 굵기는 위, 아래가 10px
div.c7{
border-left-width:10px;
border-right-width:10px;
border-top-width:0;
border-bottom-width:0;
}
- 외각선 윗선, 아랫선이 없어진다
- 외각선의 굵기는 오른쪽, 왼쪽이 10px
div.c8{
border-color:#f00;
border-bottom-width:30px;
border-radius:60px 60px 0 0;
}
- 외각선의 색깔은 #f00(빨간색)
- 외각선 아랫선은 30px로 굵어진다
- 모서리가 (위부터)왼쪽, 오른쪽이 60px로 라운딩 된다
*border-bottom-color도 가능
[미션1]css_exam/float.html에 적용
1) #main 안에 있는 모든 div에 외각선 및 패딩을 적당량 선언
2) .c1안에 있는 div에 바탕색을 각각 #f00, #0f0, #00f를 지정
3) .c2안에 있는 div에 바탕색을 각각 #f007, #0f07, #0ff7을 지정
4) .c3안의 문자를 영역의 정중앙에 배치
5) .c1, .c2안에 있는 div의 넓이를 100px로 지정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css_exam/float</title>
<style>
#main div{
border:1px solid #000;
padding:20px;
box-sizing:border-box;
}
#main>div.c1>div:first-child{
background-color:#f00;
}
#main>div.c1>div:nth-child(2){
background-color:#0f0;
}
#main>div.c1>div:last-child{
background-color:#00f;
}
#main>div.c2>div:first-child{
background-color:#f007;
}
#main>div.c2>div:nth-child(2){
background-color:#0f07;
}
#main>div.c2>div:last-child{
background-color:#0ff7;
}
#main>div.c3{
line-height:60px;
text-align:center;
font-size:30px;
}
#main>div.c1>div,#main>div.c2>div{
width:100px;
}
</style>
</head>
<body>
<h1>float</h1>
<div id='main'>
<div class='c1'>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class='c2'>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class='c3'>
CCCCC
</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------
LAYOUT관련된 태그
1) float : left, right
- 컨텐츠를 왼쪽부터(left)배치 또는 오른쪽부터 배치(right)한다 하지만, 정렬의 배치와는 개념이 다르다
ex)
left인 경우
1 2 3
right인 경우
3 2 1
- 자식 컨텐츠의 높이를 인식하지 못한다
2) clear : left, right, both => float에 의해 지정된 속성을 제거
- both는 left, right 모두 제거 가능
3) display : flex, grid
a. flex
- Layout 배치를 전용으로 고안된 속성
- 아이템들을 가로 또는 세로 방향으로 배치
- 넓이는 컨텐츠(내용물)만큼 자동으로 설정
- inline-flex도 존재
◎용어정리◎
- 컨테이너(Container) : item을 담고 있는 전체 영역
- Item : 내용물을 담고 있는 작은 영역
- 축 : main axis(주축), cross-axis(교차축)
- 속성
<flex-direction>
- row
- row-reverse
- column
- column-reverse
<flex-wrap>
- nowrap
- wrap
- wrap-reverse
<justify-content>
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
<align-content>
- stretch
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
- item에서 설정
<flex-basis> : auto, size
<flex-grow> : 0, size
<flex-shrink> : 0, 1(flex-basis에 의해 지정된 크기 이하로 줄어들 수 있는지 설정)
flex-direction(좌우배치, 상하배치)
- row(기본값) : item이 가로방향으로 흐른다(좌->우)
- row-reverse : item이 가로방향으로 흐른다(우->좌)
- column : item이 세로방향으로 흐른다(상->하)
- column-reverse : item이 세로방향으로 흐른다(하->상)
flex-wrap : 요소들이 총 넓이가 부모 넓이보다 클 때, 이 요소들을 다음 줄에 이어서 정렬 해주는 기
- nowrap(기본값) : 부모 넓이에 맞게 요소들의 넓이를 강제 축소/item 줄바꿈 비허용
- wrap : 부모 넓이보다 요소들의 총 넓이가 크다면 나머지 요소들을 다음줄로 줄바꿈/ 컨테이너 앞단부터(item 순차나열+줄바꿈 허용)
- wrap-reverse(거의 사용X) : 줄바꿈하는 요소들을 역순으로 배열
justify-content : 가로축을 기준으로 좌우에 대한 정렬
- space-between : 요소들 사이에 동일한 간격
- space-evenly : 첫번째로 오는 정렬 대상 전에 두개 의 인접한 정렬 대상 사이의 간격과
마지막 정렬 대상 이후의 간격이 같도록 항목이 분산
- space-around : 요소들 사이에 동일한 간격
- flex-start : 요소들을 컨테이너의 왼쪽으로 정렬
- flex-end : 요소들을 컨테이너의 우측으로 정렬
- center : 요소들을 컨테이너의 중앙으로 정렬
block-mode
- 크기 조정가능
- 한 줄 전체 차지
- div는 block-mode
inline-mode
- 크기 조정 불가
- 오른쪽 여백에 다른 요소가 올 수 있다
inline-block(block-mode+inline-mode)
- display : none 감추기(자리 차지를 하지 않는다)
- display : block 보이기
Tip
localhost를 본인의 ip주소로 바꾸면 '이 페이지 공유'(구글에 가입이 되어있어야함)->기기로 전송->내 핸드폰 기종 클릭->모바일에서도 볼 수 있다
ip주소 찾기 : 명령 프롬프트에 'ipconfig'(띄어쓰지않기)
'HTML, CSS' 카테고리의 다른 글
| display, grid (0) | 2023.03.04 |
|---|---|
| 동적삽입 (0) | 2023.03.04 |
| position, 좌표 (0) | 2023.03.04 |