블록체인 4일차

 

1.html 파일과 css파일 2개를 만들어주고 시작한다.
!느낌표 입력후 link를 입력해서 css와 연동시킨후
href입력란에 점을 2개 붙이면 현재 폴더 아래의 파일들을 선택해줄수 있다. 점 한개는 현재 폴더내에서 선택가능(../)
 
video태그를 입력후 src입력란에도 ../해서 비디오파일이랑 연동시키니 비디오파일도 비쥬얼 스튜디오 코드에 가져와줘야 한다.
(controls 속성은 영상의 컨트롤 박스를 출력하고 / autoplay 속성은 영상이 불러와지면 바로 재생한다. / loop속성은 반복으로 영상을 보여주고 / muted 속성은 음소거의 역할을 한다.)
 
이제는 iframe으로 동영상을 불러와 볼건데 (유튜브 영상)
iframe 입력후 src입력란에 유튜브 주소(맨 위창에 나오는)입력해주면 되고 
 
 

위의 사진처럼 공유-퍼가기-하면 iframe어쩌고 계속 나오는데 이 주소를 코드 입력창에 붙여주면 영상하나가 재생된다.

유튜브 창을 만들어보는 과제를 해봤는데
동일하게 html과 css 생성후 link코드로 연동시킨후
body입력부분에 div로 시작하고 class(속성)을 부여해준후 나는 아이템이라고 이름을 부여했다.
*블록체인 3회차에도 나왔듯이 .은 class를 의미함*
 
아이템 이라고 이름을 부여했으면 css창으로 넘어가서 .item{position:relative}이렇게 준다. 
포지션에는 relative,absolute 두가지가 있는데 relative 안에 absolute가 있으니 부모관계이다.
html파일에 보면 코드 왼쪽에 세로로긴 회색줄이 보이는데 타이틀안에 아이콘,텍스트,버튼,버튼2,버튼3 이렇게 들어있는걸 알수 있다.
relative,abolute 종속관계를 잘 활용해야 나중에 정리할때 헷갈리지 않으니 숙지하자.
 
그 예로 (아래 사진들은 수정후)

 <div class="button3">

                <button class="er">현재 4,072명 시청중 스트리밍 시작일 2023.1.24 <br>

                    artist moment blue <br>purple ray,ray valentine,promise u </button>

            </div>

 

 

 

 .button3{position:relative;}

 .er{

    position: absolute;                                        

    background-color: black;

    color: white;

    border-radius: 30%;

    height:200px;

    width:900px;

        font-size: 30px;

    left: 0px;

    bottom: -311px;

 

(첫번째 사진은 html창이고 두번째 사진은 css창이다.)
 
나는 구독 버튼 배경화면을 검정색으로 넣고 싶었는데 안되었던 이유가 div에다가만 class(속성)을 부여 해줬지
button에다가는 class(속성)을 부여해주지 않아서 안되었는데 
두 사진처럼 html에도 부모관계 relative,absolute를 다 작성한후 css에도 동일하게 적용