HTML,CSS,JavaScript 썸네일형 리스트형 [HTML] div태그 기본인건 알지?? 당신의 HTML 구조, 지금 괜찮다고 생각하시나요?겉은 괜찮아 보여도 속이 텅 비었을 수 있습니다.웹 페이지의 진짜 틀을 만드는 태그,바로 입니다.무조건 남용하라는 건 아니지만,제대로 알고 쓰면 HTML 구조가 기가 막히게 정리됩니다. 오늘 배울 태그는입니다. 안녕하세요! 이건 가장 단순한 div 태그 사용 예시입니다. 아무런 스타일 없이 내용만 감싼 모습이죠. div 는 기본적으로 블록 레벨 요소이기 때문에 한 줄 전체를 차지하며 쌓여갑니다. 보통 의미 없는 그룹핑용으로 쓰이지만, 의미가 없다고 중요하지 않은 건 아니에요. 나만의 카드 컴포넌트 ✨ div에 스타일을 입혀주면 그 자체로 박스 형태가 됩니다. 위 코드는 배경색, 패딩, 둥근 모서리를 통해 시각적인 카드 UI처럼 연출했죠. 실제.. 더보기 [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 { .. 더보기 이전 1 2 3 4 5 다음 > 오늘의 코인 운세 보기 <
