Tiny Bunny

본문 바로가기

💻/HTML6

[HTML] <pre> <p> 태그 차이 / <div><span> 태그 차이 HTMl 내부에서 텍스트를 입력하는데 사용되는 태그에는 가장 흔하게 .. / / 등이 있다. 태그와 태그의 차이에 대해 정리해보자! 태그띄어쓰기가 최대 1개까지만 적용된다. 연속으로 띄어쓰기해도 적용되지 않는다.줄바꿈은 태그 외에는 적용되지않는다. 태그vs code에서 작성한 연속된 띄어쓰기와 줄바꿈이 그대로 적용된다.거대한 문단을 적을때, 따라서 많은 줄바꿈과 띄어쓰기가 발생하는 경우 사용하는 것이 좋다. 태그주로 단순 텍스트와 텍스트와 관련된 범위를 감쌀때 사용함태그 자체에 의미가 없긷문에 style을 위한 시각적인 장식용태그로 사용하기에 적합하다.태그는 인라인 요소이기때문에, 컨텐츠의 너비만큼 사이즈가 책정된다. -> 따라서 컨텐츠가 없는 경우 안보임. 태그레이아웃(블록, 구획).. 2024. 8. 2.

HTML로 로그인 창 뼈대 만들어보기 웹 사이트에 로그인 할 때 우리가 자주 마주하는 로그인 창을 지금까지 익힌 html로 만들어보기 도저어언! 완성한 코딩 ! -다른 웹사이트 계정으로 연동할 수 있는 소셜로그인 창도 만들어주고, sign in with google 이미지도 가져와서 ★ 로 바로 연결 될 수 있게 넣어주었다. ★password는 입력할 때 'for 속성값'과 'id 속성값' 이 같아야한다. (입력 시 ·······라고 입력됨) - 최종 저장하기 전에 수정을 했었나보다,,ㅎ누락된 태그를 여기에 적어보면 or Forgot your password? 이렇게 적으면 로그인 창 아래에 id/pw를 잊어버렸을 때 찾을 수 있는 링크로 연결되는 버튼을 만들 수 있다.! (아직 id/pw를 찾을 수 있는 웹은 존재하지 않.. 2024. 1. 7.

나무위키st 목록표 만들어보기 나무위키에 들어가면 보기쉽게 작성된 목록표를 구현해보고자 도전 ..! (아직 HTML만 배운 상태로 하는 거라 CSS나 JS은 적용하지 않은 상태다. 큰 틀만 짜여있는 결과물이라고 생각하면 된다.) / 과 의 구분과 경계를 명확히 하는게 조금 헷갈렸지만, 세로열로 그어진 일직선을 따라.... , 짝(?) 잘 찾아주기. / a 태그를 통해 연결 될 실제 나무위키 링크도 넣어보았다 . ㄴ그렇게 완성한 html 뼈대의 모습이다. ㄴ 이렇게 해당 글자를 클릭하면 바로 해당 페이지 링크로 연결된다. +css랑 JS 배워서 다시 완벽하게 구현하러 와야지. ^^ 2024. 1. 7.

링크와 이미지 넣기 - src속성, alt속성, 이미지 링크(img) 1)img 태그와 alt 속성/ 이미지 경로 표시 여기에서 주의할 게 바로, "src 속성" 이다. src 속성 -> 삽입하려는 이미지의 경로 ★★★★ 기준 : 실행되는 HTML 파일의 위치 ! -html 파일의 위치를 기준으로 '이미지 파일의 경로'를 나타낸다. ★★ html파일과 같은 위치(현재 폴더) 에 있는 경우 사용하는 ./ 은 생락할 수 있음. ../ 은 상위 폴더에 있던 이미지파일을 불러온 것이고, ./은 html과 동일한 폴더에 있는 이미지 파일을 불러오는 상황이다. 짠! 이렇게 내가 설정한 이미지를 삽입했다. 2) 이미지 링크 -이미지 링크란 html에서 해당 이미지를 클릭하면 특정 웹 사이트로 이동할 수 있는 링크다. 지금부터 우리가 모두 잘 알.. 2024. 1. 7.

목록 만들기 <ul,ol,dl 태그> html에서 주로 사용되는 세 가지 목록 태그에 대해서 알아보자. 1) ul 태그 -(unordered list) -순서 없는 목록 생성, 나열시 사용함. - 로 목록 내용 구성 2) ol 태그 -(ordered list) -순서가 존재하는 목록 생성 시 사용함. - 로 목록 내용 구성 오호라.. 나중에 to do list + 운동 기록 등을 할 수 있는 웹 제작할 때 사용해볼까 3) dl 태그 -dl(decription list) , dt(description term), dd(description details) 태그 사용 -정의형 목록에 사용( 용어 설명 나열) 2024. 1. 7.

Visual Studio Code/ 여러 태그들 2023.06.16 코딩 공부 시작 ! Today's Summary오늘 익힌 html 여러 태그들 태그가 들어갈 곳 -대략적인 커다란 틀이라고 볼 수 있다. 이제 여기에 각종 태그들을 추가한다.-html 기본구조 -> DTD, html, title, body 1) DTD 문서형 정의2) 언어3) 9) 10) 중요, 강조에 따라 n :1부터 시작 / 순서대로, 건너뜀 x11) 12)13) 본문의 문단 작성 시 사용14) 줄 바꿈15)16) 17) 인용; 문단 단위 텍스트 18) 19) 20) 21) 22) 인용; 짧은 인용문 23) 24) 25) 삭제 테스트 추가 텍스트 26) 아래 첨자 > 27) 위 첨자 28)29) 30) 첫 결과물..ㅎㅎ 사진 설명.. 2024. 1. 7.

이전 1 다음

티스토리툴바