JavaScript 썸네일형 리스트형 [HTML] li 지금까지 제대로 썼어?? 이 태그 없으면 리스트는 못 만듭니다.단언컨대, 를 빼고 목록을 만든다는 건 불가능해요.안녕하세요!오늘도 HTML을 차곡차곡 배워가는 시간입니다.그동안 웹사이트에서 ‘목록’이라는 걸 수도 없이 보셨을 거예요.할 일 리스트, 메뉴 목록, 쇼핑 카테고리…이런 걸 어떻게 만들 수 있는지 궁금하셨죠?오늘은 그 핵심인 태그를 제대로 알려드릴게요.단순하지만 없어선 안 되는 태그,같이 알아보겠습니다.오늘 배울 태그는 목록의 ‘한 줄’을 담당하는 태그입니다. HTML 배우기 CSS 익히기 JavaScript 시작하기 태그는 리스트에서 각 항목 하나를 표현할 때 사용합니다.위 코드에서는 이라는 ‘순서 없는 리스트(ul)’ 안에 세 개가 들어가 있죠.각각은 ‘HTML 배우기’, ‘CSS 익히기’.. 더보기 [HTML] a 태그 제대로 알고 사용하자! 이 링크 태그 없으면웹사이트 절반은 기능을 잃습니다. 진짜예요. 😮안녕하세요!초보자를 위한 감성 HTML 수업에 오신 걸진심으로 환영합니다 ☕우리는 오늘,웹페이지의 '길'을 만들어주는아주 특별한 태그 하나를 만나게 될 거예요. 어디론가 연결되고 싶었던 HTML의 마음을들어줄 수 있는 태그랍니다. 💌그럼, 오늘의 태그로 함께 떠나볼까요? 오늘의 주제는 바로 태그입니다. 하이퍼링크의 모든 것 ✨ 아래 텍스트를 클릭해 보세요. 네이버로 이동 위 코드는 HTML에서 가장 기본적인 링크 구조를 보여줍니다. 는 Anchor, 즉 ‘닻’을 의미하는 태그인데요, 이 태그 덕분에 한 페이지에서 다른 페이지로 혹은 같은 페이지의 특정 지점으로 이동할 수 있어요. 중요한 속성은 바로 href입니다. ‘Hyperte.. 더보기 [HTML] Box 박스 모델 활용 CSS 안녕하세요. 오늘은 Box 박스 모델에 대해 알려드리겠습니다. 모든 글자, 칸, 이미지 등등 모든 것에는 테두리가 다 존재합니다. F12를 누르고 Elements를 누르면 현재 페이지에서 이뤄지는 코드를 다 볼 수 있습니다. 거기서 아무거나 클릭해보고 낮보면 이런 모양을 보실 수 있습니다. 현재 그 태그에 margin, border, padding 크기를 다 수정할 수 있습니다. 지금 부캐는 열일중 margin, padding은 여백이므로 색상이 없습니다. border에는 색상을 넣을 수 있습니다. .box { margin: 15px 15px 15px 15px; 상단오른하단왼쪽 } margin : 15px 15px; 상하좌우 margin : 15px; 모든면 } .box { padding : 15px 1.. 더보기 [HTML] input 활용하기 안녕하세요. 오늘은 input에 대해 알려드리겠습니다. 어떤 곳에 어떻게 사용하느냐에 따라 정말 다양하게 활용 할 수 있는 수식입니다. 기본적인 구성!! 버튼 체크박스 색상선택 년 월 일 선택 년 월 일 시 분 초 선택 메일 주소 파일 첨부하기 숨기기 이미지 파일 년 월 숫자박스 비밀번호 ****** 라디오 (체크표시) ex) 동영상 볼륨 조절 초기화 검색 제출버튼 연락처 입력 시 분 초 url주소 주 쓰기 나름입니다. 보편적으로 text, date, submit, button, number, hidden을 많이 사용하는 것 같습니다. 가장 많이 사용하는 text로 예시를 하나 만들어보겠습니다. value 값으로 미리 해두면 바로 홍길동이라고 나오게 되어있습니다. name은 input의 용도를 표현 할 .. 더보기 [HTML] 주석 활용하기 안녕하세요. 오늘은 작업중에 기억해야 할 부분이나 수정해야해서 코멘트를 남기거나 할 때 활용해야하는 주석에 대해 알려드리겠습니다. 보편적으로 초록색이나, 노란색으로 표기가 될 것 입니다.(물론 다른색상으로 변경이 가능합니다.) 주석이란? (Comment) 주석(comment)이란 사용자, 개발자가 작성한 해당 코드에 대한 이해를 위한부가적인 설명이나 디버깅을 위해 작성한 구문을 의미합니다.이러한 주석은 다른 HTML 코드와는 달리 웹 브라우저에 의해 표현되지 않습니다. 안녕하세요 HTML일 경우는 이렇게 해주시면 정말 간단하게 된답니다. 모두 안녕하세요 ----의 갯수는 상관없답니다. 그리고 💡줄이 달라도 열고 닫기가 확실하다면 주석처리가 깔끔하게 됩니다. 끝입니다. 정말 쉽죠?? 자.. 이제.. 더보기 [HTML] li 점 없애기 + 변경해보기 안녕하세요. 오늘은 HTML에서 자주 사용하는 li태그에서 점을 없애는 방법을 알려드리겠습니다. 일단 HTML에서 li태그를 만들어보겠습니다. 왕초보의 뭐라도 만들어보자 이렇게 잘 만들어졌죠? 자 앞에 점을 없애볼까요? 왕초보의 뭐라도 만들어보자 두개중에 하나만 적용해보겠습니다. 이렇게 결과물이 나왔습니다. 정말 쉽죠?? CSS로 표현하는 방식도 적어보겠습니다.li { list-style:none;} 대신 이렇게 작성하면 모든 li태그는 점이 다 사라집니다. 선택적으로 사용하시면 됩니다.! 번외 ! 왕초보의 뭐라도 만들어보자! 뭐라도 만들어보자! 뭐라도 만들어보자! 뭐라도 만들어보자! 뭐.. 더보기 [HTML, JAVASCRIPT] 토끼 클릭커를 만들어보자!! ver 0.4 [HTML, JAVASCRIPT] 를 이용하여 토끼 클릭커를 만들어보자!! ver 0.4 안녕하세요. 벌써 4일차를 돌입했습니다. 오늘은 자동으로 증가하는 시스템을 구축해보겠습니다. 전편을 꼭 참고 하시기 바랍니다. 2021.11.09 - [HTML.CSS.JAVASCRIPT] - [HTML, JAVASCRIPT] 토끼 클릭커를 만들어보자!! ver 0.3 [HTML, JAVASCRIPT] 토끼 클릭커를 만들어보자!! ver 0.3 [HTML, JAVASCRIPT] 를 이용하여 토끼 클릭커를 만들어보자!! ver 0.3 안녕하세요. 2일차 바로 진행하도록 하겠습니다. 꼭 저번편을 보셔야 연결이 된답니다. 2021.11.08 - [HTML.CSS.JAVASCRIPT] - [HTML, JAV.. jjaeho.. 더보기 [HTML, JAVASCRIPT] 토끼 클릭커를 만들어보자!! ver 0.2 [HTML, JAVASCRIPT] 를 이용하여 토끼 클릭커를 만들어보자!! ver 0.2 안녕하세요. 2일차 바로 진행하도록 하겠습니다. 꼭 저번편을 보셔야 연결이 된답니다. 2021.11.07 - [HTML.CSS.JAVASCRIPT] - [HTML, JAVASCRIPT] 토끼 클릭커를 만들어보자!! ver 0.1 [HTML, JAVASCRIPT] 토끼 클릭커를 만들어보자!! ver 0.1 [HTML, JAVASCRIPT] 를 이용하여 토끼 클릭커를 만들어보자!! ver 0.1 안녕하세요. 오늘부터 토끼 클릭커를 제대로 만들어보겠습니다. 그리고 꾸미기도 하면서 잘 까먹거나, 헷갈릴 수 있는 코드들은 따 jjaeho.tistory.com Start 2일차 연습용 설명은 https://jjaeho.tist.. 더보기 이전 1 2 3 다음 > 오늘의 코인 운세 보기 <
