[ DEV ] Frontend/HTML , CSS
-
<table> 태그를 이용해서 표 만들기![ DEV ] Frontend/HTML , CSS 2022. 12. 22. 19:16
오늘 만들어 본 페이지는 영화를 소개하는 페이지다. 우선 테이블에 대해서 알아보자! 태그에는 머리와 몸통인, 가 존재한다. 에는 표의 중요한 것들, 에는 표의 내용들을 넣어준다고 생각하면 된다. 한 행을 표시하는 태그를 이용해서 행을 만들어준 뒤, 그 안에 넣어줄 데이터들은 태그를 이용해 넣어줄 수 있다. 💡표에 줄 넣어주기 tr 태그는 한 줄, 행을 의미하고 td 태그는 그 줄 (tr)안에 가로로 ㅁ box를 만들어 낸다고 보면됨. 아래는 td가 4개가 있으니 하나의 tr에 ㅁㅁㅁㅁ 이렇게 4개의 데이터가 들어간다고 보면 됨. 제목 평점 장르 내용 우선 thead에 tr태그를 이용해서 한줄을 넣어주고, td를 이용해서 네개의 데이터를 넣어줬다. 그런데, 조금 더 정교한 테이블이었으면 좋겠다 싶어서 bo..
-
야식목록 만들고, 이미지에 링크 걸어보기![ DEV ] Frontend/HTML , CSS 2022. 12. 22. 16:35
좋아하는 야식을 알리는 페이지를 구성해보자~ +치킨 주문을 위한 링크도 걸어보기 좋아하는 야식들 라면 족발 치킨 피자 야식 랭킹! 치킨 족발 피자 라면 명예의 1위 치킨을 시켜보자! 💡ul 태그 --> 순서가 없는 리스트 (Unordered List) 좋아하는 야식들 라면 족발 치킨 피자 💡 ol 태그 -> 순서가 있는 리스트 (Ordered List) 야식 랭킹! 치킨 족발 피자 라면 💡 이미지에 링크 걸기!!!! - a태그로 감싸면 끝~~ 명예의 1위 치킨을 시켜보자! 누르면 굽네치킨으로 링크 이동~~ https://www.youtube.com/watch?v=4Uxi3qLEp4g&list=PLyebPLlVYXCgc3S1HcqOMr5MOrt3wDlb-&index=7
-
텍스트와 이미지 태그 실습 _ 킹크랩이야기..[ DEV ] Frontend/HTML , CSS 2022. 12. 22. 02:59
자세한 태그 설명은 밑 코드박스에 적어두었으므로.. 생략 킹크랩 얼마전 집에 오는길, 킹크랩 전문점을 지나던 중 그와 눈이 마주쳤다.... 그 킹크랩은 그윽한 눈빛으로 내게 말했다. '날 사먹을 수나 있겠니?'... 그렇다 킹크랩은 비쌌다. 실습 출처 [유튜브 홍팍] : https://www.youtube.com/watch?v=Hv9oMwmynnk&list=PLyebPLlVYXCgc3S1HcqOMr5MOrt3wDlb-&index=5
-
첫번째 실습.[ DEV ] Frontend/HTML , CSS 2022. 12. 22. 02:56
=> 위와 같은 홈페이지를 만들었다. 그 속에 있는 태그를 나열해 보자. 💡 태그와 태그 크리스마스 트리가 있는 홈페이지 가지고 싶은 트리는? 💡 태그와 그 속에서 사용하는 태그 링크를 걸 단어 이런 크기의 트리..!! 180센치.. 구글링 하기!! 출력 (+ 추가) 이것은 강의인가.. 광고인가.. 자랑인가?! 구매하기 이동! 위를 출력하면, 아래와 같이 출력이 된다!! p태그 안에 a태그를 넣어주고, target을 통해 _blank를 넣어줌! 여기서 _blank의 기능은 저 링크버튼을 클릭했을 경우, 새 탭에서 열리게 도와주는 태그라고 보면 된다. 애초에 a태그는 태그 링크를 생성하는 것이고!! 💡미디어 태그 미디어 태그로 이미지를 불러왔고, 크기를 700픽셀로 지정해줌. 사진 출처는 오늘의 집! ht..
-
VSCODE _ 라이브 서버 실시간 업데이트 안되는 오류 해결하기![ DEV ] Frontend/HTML , CSS 2022. 12. 22. 01:34
라이브 서버에서 자동 새로고침이 안되는 경우 4가지 해결방법이 있다고 한다. 아래 방법은 https://mollyinfo.tistory.com/59. 여기 블로거 분의 블로그를 참고했다. Vs code live server 자동 새로고침 안될때 해결방법 + 라이브 서버 자동 저장방법 라이브 서버에서 자동 새로고침이 안되는 경우 해결방법은 4가지가 있습니다. 1. 혹시 라이브 서버를 실행하고자 하는 파일 제목 첫번째 글자가 .인 경우 .을 없애자! -ex) .samsungweb.html 같은 제목 mollyinfo.tistory.com 1. 혹시 라이브 서버를 실행하고자 하는 파일 제목 첫번째 글자가 .인 경우 .을 없애자! -ex) .samsungweb.html 같은 제목일때 .을 없애어 samsungw..