오늘 내가 배운 것
1. HTML - label, CSS - '+' 결합자
2. HTML 속성과 속성 값
3. CSS 속성과 속성 값
4. CSS 선택자
1. HTML-label, CSS- '+' 결합자
HTML-<label> 태그
label에 for 속성, input의 id를 속성 값으로 준다면
label의 데이터를 선택했을 때 input을 선택해 주는 방법이 있다.
CSS - “+” 결합자
ex) label + #user
첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택하는 결합자
<label for="user">아이디</label>
<input type="text" id="user">
2. HTML 속성과 속성 값
input 태그의 type="radio"
속성 name=”” 을 이용해서 이름을 정해주고 이름이 같은 radio 끼리 중복 선택이 불가능하다.
보통 성별을 선택하는 항목에 많이 쓰이게 된다.
HTML의 속성 checked 속성값 checked를 이용하여 radio의 기본값 설정 가능 처음 선택되어있을 요소를 지정할 수 있고, 속성과 속성 값이 같기 때문에 속성 값은 생략해도 작동하는데 문제없음.
3. CSS 속성과 속성 값
overflow :hidden;
블럭 영역에서 넘어간 부분을 안 보이게 하는 속성
cursor:point;
블럭에 마우스 커서를 가져다 두면 포인터가 바뀐다.
Position : 블럭의 위치를 설정하는 속성
position:relative 와 position:absolute 로 블럭을 겹칠 수 있다.
relative를 상위 태그에 쓰고 absolute를 사용한 하위 태그의 기준점을 정해줄 수 있고,
position 밑에 top, bottom, left, right를 이용하여 이동시킬 수 있다.
position : fixed
스크롤에 상관없이 브라우저를 기준으로 항상 고정되어 있게 할 수 있다.
방향을 지정할 수 있음.
transform: translateY()
transform은 요소에 회전, 크기 조절, 기울이기, 이동 효과를 줄 수 있는 속성이다.
translateX();를 이용하여 x축으로 이동, translateY()를 이용하여 y축으로 이동시킬 수 있다.
transition : 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 있다.
block과 none 사이에서는 효과를 줄 수 없다.
opactity 는 투명도를 의미하는데 투명도 같은 경우 안 보이는 0부터 다 보이는 1까지의 변화를 보여줄 수 있다.
4. CSS 선택자
‘ : ’ 결합자를 이용한 선택자
CSS- 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드
선택 요소가 특별한 상태여야 만족할 수 있다.
ex) a:hover는 마우스 포인터를 올린 a태그를 의미,
input:checked는 체크가 된 input 태그를 의미한다.
#icon:checked +label > span:nth-child(1){}
(==id가 icon인 요소가 체크가 되어있고, 그 부모가 같은 바로 밑 label 안에 첫 번째 span을 선택)
:nth-child()는 형제 태그에서의 순서에 따라 요소를 선택한다.
ex) span:nth-child(3);
<span></span>
<span></span>
<span></span>span에서 3번째 span을 선택하는 선택자이다.
코드 완성 사진
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="./public/css/index2.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="visual_wrap">
<div id="visual">
<input type="radio" id="aa" name="navi" checked />
<div id="img1">
<img src="http://www.kiweb.or.kr/nBoard/upload/file/main/1663647850_20800_1.jpg">
</div>
<input type="radio" id="bb" name="navi" />
<div id="img2">
<img src="http://www.kiweb.or.kr/nBoard/upload/file/main/1661838619_28666_1.png">
</div>
<input type="radio" id="cc" name="navi" />
<div id="img3">
<img src="http://www.kiweb.or.kr/nBoard/upload/file/main/1661838512_01844_1.png">
</div>
<input type="radio" id="dd" name="navi" />
<div id="img4">
<img src="http://www.kiweb.or.kr/nBoard/upload/file/main/1661838462_26399_1.png">
</div>
<input type="radio" id="ee" name="navi" />
<div id="img5">
<img src="http://www.kiweb.or.kr/nBoard/upload/file/main/1666596927_56073_1.jpg">
</div>
<div id="nav">
<ul>
<li><label for="aa">4.0 기술융합캠프</label></li>
<li><label for="bb">왜 돈내고 배워?</label></li>
<li><label for="cc">취업 솔루션</label></li>
<li><label for="dd">함께 만듭니다</label></li>
<li><label for="ee">우수 훈련기관</label></li>
</ul>
</div>
</div>
</div>
</body>
</html>CSS
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
#visual_wrap{
position: relative;
}
#visual{
position: relative;
width: 1920px;
height: 500px;
margin: 0 auto;
}
#nav{
text-align: center;
position: absolute;
bottom: 0;
height: 50px;
width: 100%;
background: rgba(0,1,1,0.5)
}
#nav > ul > li {
display: inline-block;
}
#nav > ul > li > label {
display: block;
height: 50px;
font-size: 15px;
font-weight: 700;
color: #fff;
padding: 15px 40px;
cursor: pointer;
}
#aa{
display: none;
}
#bb{
display: none;
}
#cc{
display: none;
}
#dd{
display: none;
}
#ee{
display: none;
}
/*수정 된 코드 */
#visual > div > img {
position: absolute;
opacity: 0;
}
#visual > input:checked + div > img {
opacity: 1;
transition: all 3s;
}
/*수정 된 코드 */
/* 처음 해본 코드 */
/* #img1{
position: absolute;
display: block;
}
#img2{
position: absolute;
display: none;
}
#img3{
position: absolute;
display: none;
}
#img4{
position: absolute;
display: none;
}
#img5{
position: absolute;
display: none;
} */
/* #aa:checked + #img1{
position: absolute;
display: block;
}
#bb:checked + #img2{
position: absolute;
display: block;
}
#cc:checked + #img3{
position: absolute;
display: block;
}
#dd:checked + #img4{
position: absolute;
display: block;
}
#ee:checked + #img5{
position: absolute;
display: block;
} */
/* 처음 해본 코드 */
'시작 > TIL(Today I Learned)' 카테고리의 다른 글
| 221027 로그인 팝업 만들기 - form태그 / CSS-before, after / 반응형 웹 만들기 - 미디어쿼리 (0) | 2022.10.27 |
|---|---|
| 221026-게시판 만들기 : HTML table 태그, CSS-!important, box-shadow, CSS 선택자 (0) | 2022.10.26 |
| 221022 네이버 회원가입 클론코딩 (0) | 2022.10.23 |
| 221021 CSS와 네이버 클론코딩 (0) | 2022.10.21 |
| 221020 브라우저와 HTML (0) | 2022.10.20 |
댓글