본문 바로가기

반응형

Web 개발/[HTML, CSS]

[HTML/CSS] 웹사이트(Youtube) 레이아웃 만들기 - (2) [HTML/CSS] 웹사이트(Youtube) 레이아웃 만들기 - (2) (이전 게시글 : https://wogud6792.tistory.com/16) 이제 오른쪽의 컨텐츠 부분의 레이아웃을 조금 더 구체화 시켜보자. 위의 코드는 오른쪽의 content부분에 추가할 레이아웃을 작성한 것이다. 크게 세 부분 (광고 , 두개의 주제 영상들) cont1, cont2, cont3 로 나누었다. 위와 같이 작성하게 되면 아래와 같이 결과가 나온다. 이제 적절히 코드를 작성하여 각각의 단어가 알맞게 배치되도록 하는 것이 목표이다. 첫 번째로, 가장 위에 나오는 광고 파트를 꾸며볼 것이다. 이전 게시글에서 캡쳐한 유튜브 화면을 보면 '왼쪽'에는 광고가 나오는 화면, '오른쪽'은 광고 사이트로 이동하는 화면으로 나뉜다...
[HTML/CSS] 웹사이트(Youtube) 레이아웃 만들기 - (1) [HTML/CSS] 웹사이트(Youtube) 레이아웃 만들기 - (1) 정말 기초적인 HTML/CSS 지식으로 정말 기초적인 Youtube 사이트의 레이아웃을 만들어 보자. (본문에서 사용되는 코드에 대해서는 대략적으로 설명하는 부분이 많고, 레이아웃을 만드는 것 자체에 초점을 두었기 때문에 자세히 알고 싶다면 따로 검색을 해보는 것을 권장한다.) (필자가 실제로 학습한 기초적인 지식을 이용하므로 코드가 깔끔하지 않을 수 있다는 점 주의하자......) 만들고자 하는 목표는 위의 사이트를 그대로 구현하는 것이 아니라, 기초적인 틀만 만드는 것이다. 즉, 위의 예시에서 왼쪽에 나와있는 메뉴바, 메인에 있는 광고, 주제별 영상 등이 담기는 '틀'을 의미한다. 매우 기초적인 HTML/CSS 지식을 이용하기 때..