HTML,CSS,JavaScript/HTML,CSS,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] a 태그 밑줄 없애기 안녕하세요. 오늘은 가볍게 a 태그 밑줄 없애기를 알려드리겠습니다. = 하이퍼링크 밑줄 없애기 https://jjaeho.tistory.com 이렇게 코드를 짜면 밑에처럼 파란줄이 생기고 하이퍼링크가 되어 생성됩니다. https://jjaeho.tistory.com https://jjaeho.tistory.com 이렇게 해주시면 https://jjaeho.tistory.com 밑줄이 뿅! 하고 사라집니다. 끝! 추가로 파란색이 싫다! https://jjaeho.tistory.com color부분에 원하시는 색상을 넣으시면 됩니다. 진짜 끝! style 방식이 싫다! 이렇게 되는 것을 원치 않아! 라고 하시면 CSS로 변경해주면 되겠습니다. CSS로 class나 id로 변경하셔도 됩니다. a { .. 더보기 [HTML] 기본 구조 HTML 기본구조 알기 😊 안녕하세요! 솔직히 VSCode나 Atom 등등 다른 프로그램을 사용 하실 경우 ! + Tab 바를 누르면 틀이 만들어져 따로 생각을 안하게 됩니다. 프로그램을 안사용하시고 메모장을 쓰시는분은 암기해야 하겠지만... 대부분은 사용하실거라 생각합니다. 이제 부터 시작하겠습니다. 정말 간단하게 설명해드리겠습니다. 궁시렁 궁시렁 어쩌구 저쩌구 가장 기본적인 HTML 구조를 보여드렸습니다. ! + Tab을 사용하시면 언어부분은 자동으로 en으로 되어있습니다. ko(한국어)로 바꿔적어주시면 됩니다. 끝! 머리 몸 다리 저는 html를 3구간으로 나누어 사용합니다. 작업하기 편하기 위해서 입니다. 하고싶으신거 있다면 그냥 아무렇게나 하세요. 정답은 없다고들 하니깐요 ╰(*°▽°*)╯ 저는.. 더보기 이전 1 2 3 4 다음 > 오늘의 코인 운세 보기 <
