오늘은 영화 메뉴판을 만들어보았다.
input , label이 한쌍으로 묶이는데
input고유명사가 tab01이다.
맨 아래 주석처리된 부분에 입력하고 css에 (input ~item) 여기에 tab01과 item01단어가 html에 모두 있어야지 실행된다.
사진 넣고 h태그로 스즈메의 문단속 입력한후
span태그를 사용했는데
span의 기능은 보이지 않는 부모태그의 영역을 없애주는 태그이다.
그래서 밑으로 내려가지 않고 옆으로 계속 써갈수 있다.
예매율46.2%옆에 회색 bar가 있어서
span에다 class를 적용한후 bar라고 지칭하고 css에서 bar{border-right: 1px solid gray;}를 줬다.
그 다음 span안에 3.3k 테두리를 만들기 위해서 여기에도 class를 부여해줬고
대표님이 알려주셨는데 display: inline-block;을 먼저 해주고 크기를 설정해줘야지 된다고 하셨음 이유는 모르겠다고 하심
span기능을 사용했으니 옆의 예매 글자도 3.3k옆에 붙는다.
이렇게 써보면 한 영화포스터가 완성되고 난 복붙해서 밑으로 나열했다.
그 후에 div에 style을 적용해서 display: flex;을 기입후 가로 정렬로 바꿈
영화 메가박스 사이트 들어가면 영화 이미지들 교체도 해보았는데
이미지 사이즈가 각각 다르니 img class="img"로 부여한후 css에서 width랑 height를 조절했다.
.다시정리
html에 16번째 줄에 input=tab01 고유 이름을 주고 label로 표지판을 만드는데 이름을 박스오피스로 설정한것이고
<div class="box item03">No.3</div>
이 문단이 div에다 class를 주는데 box 띄고 item03이니까 두개 모두 속성을 부여해준것이다.
그렇게 한 이유가
<div class="box item02">No.2</div>
<div class="box item03">No.3</div>
<div class="box item04">No.4</div>
box는 그냥 지칭한 이름일뿐
이런식으로 css에 box는 display:none으로 설정한후 css에 input클래스를 부여한후 체크된것중에 item01,item02,item03 각자 다르게 설정한다.
box를 display:none으로 설정한 이유는 html에 box item01 box item02 등등 모두 box가 포함되어 있는 class라 일단 다 꺼준후에
{item01,item02,item03은 영화 (스즈메의 문단속,똑똑똑,그대 이어가리 등등 )한 묶음의 영화의 총집합인데 item01을 복사한게 item02,item03이다.}
css에 input태그에 속성을 부여해줘서
/* input 태그중 class가 tab01이고 checked 속성이 있고 형제요소중
밑에 있는 태그중에 item1클래스를 가지고 있는 태그 */
input[class="tab01"]:checked ~ .item01{
width: 1000px;
display: block;
color: rgb(113, 6, 128);
}
input[class="tab02"]:checked~.item02{
display: block;
width: 1000px;
color: rgba(48, 139, 44, 0.63);
}
이렇게 계속 만든후
<div class="tab-menu">
<input class="tab01" type="radio"id="tab01"name="tabmenu"checked>
<label for="tab01">박스오피스</label>
<input class="tab02" type="radio" id="tab02" name="tabmenu">
<label for="tab02">상영예정작</label>
<input class="tab03" type="radio" id="tab03" name="tabmenu">
<label for="tab03">특별상영</label>
<input class="tab04" type="radio" id="tab04" name="tabmenu">
<label for="tab04">필름소사이어티</label>
<input class="tab05" type="radio" id="tab05" name="tabmenu">
<label for="tab05">클래식소사이어티</label>
html에 박스오피스와 연동되었으니
