본문 바로가기

HTML19

HTML 쉽게 배우기 | 링크 <a> 안녕하세요. 오늘은 링크에 대해서 알아볼게요. 링크란 단어가 생소하신 분들을 위해서 간단하게 설명하자면, 웹사이트에서 클릭했을 때 다른 페이지로 간다거나, 파일이 다운로드됀다거나 할 때 있죠? 이런 걸 링크라고 부릅니다. 링크 태그는 와 로 만들 수 있습니다. 열림 태그와 닫힘 태그 사이에 링크에 대한 글을 작성하면 됩니다. (p 태그 사용 안 합니다) 이 링크 태그에는 하나의 필수 속성이 있고, 몇 가지의 추가할 수 있는 속성들이 있습니다. 필수 속성과 두 가지의 추가 속성을 살펴볼게요. (네, 이 3개 이외의 다른 건 사용해본 적이 없습니다 😓) 필수 속성: href href 는 링크의 목적지 주소를 제공하는 속성입니다. 예를 들어서 Google 이렇게 링크를 만들면 클릭했을 때 구글로 이동합니다. .. 2020. 10. 12.
HTML 쉽게 배우기 | 목록 (ul, li, ol, dl, dt, dd) 안녕하세요. 오랜만이네요. 오늘은 HTML에서 목록을 만드는 방법을 알아볼 거예요. 목록하면 앞에 점으로 돼있는 목록, 그리고 숫자로 돼있는 목록이 있죠. 당연히 HTML에서도 이런 목록들을 아주 쉽게 만들 수 있습니다. 먼저 점으로 돼있는 목록을 볼게요. 점으로 되있는 목록을 만들 때 사용하는 태그들은 과 입니다. 은 Unordered List(언오더드 리스트)의 약자이고, 는 List Item(리스트 아이템)의 약자라고 생각하면 외우기 쉽죠. 언오더드 리스트, 말 그대로 정렬되지 않은 리스트죠. 리스트 된 내용이 어떤 순차적인 의미가 없는 경우에 사용합니다. 예를 들어 캠핑 갈 때 적는 준비물 리스트 같은 거죠. 그럼 HTML 코드를 볼게요. 안에 가 들어갑니다. 그럼 없이 만 사용하면 안 돼? 사용.. 2020. 10. 4.
HTML 쉽게 배우기 | 헤더 (h1~h6) 저번 편에서, , , , , 태그들을 알아봤습니다. 이번에는 HTML에서 중요한 헤더를 알아볼게요. HTML에는 h1 부터 h6 까지 6개의 헤더가 있습니다. h1이 글 크기가 제일 크고 점점 작아져요. 헤더가 어떤 역할을 하냐면, 책 앞에보면 목차가 있죠? 헤더를 잘 쓰면 웹 페이지의 목차 역할을 합니다. 헤더를 쓸때는 몇가지의 규칙이 있는데요 웹 페이지에서 h1은 항상 제일 위에 있어야 합니다. h1위에 h2, h3, h4, h5, h6가 있으면 안됩니다. 헤더를 순차적으로 사용해야 합니다. h1쓰고 바로 밑에 h4를 쓰면 안됩니다. h1 바로 밑에는 h2가 있어야 합니다. 모든 웹 페이지에 h1은 항상 있어야 합니다. 헤더의 주용성을 이렇게 강조하는 이유는 스크린 리더때문 입니다. 스크린 리더를 사.. 2020. 9. 19.
HTML 쉽게 배우기 | 텍스트 태그(p, b, strong, i, em, u, span) 저번 편에서 HTML 문서를 작성했어요. 혹시 기억이 잘 안 나시면 (웹개발 HTML | 쉽게 배우기 1) 편을 참고해주세요. 저번에 작성한 HTML 문서가 하얀 도화지라면 이제는 거기에 우리만의 밑그림을 그릴 차례입니다. 이번 편에서는 텍스트 위주의 태그들을 알아볼게요. 텍스트 태그: | | 저번 편에서 처음에 "안녕하세요"를 아무 태그 없이 써도 브라우저에서 보였죠? 그럼 제가 왜 자꾸 텍스트 태그를 언급할까요? 🤔 그건 바로 태그없이 쓴 텍스트는 아무 스타일을 할 수 없기 때문입니다. 🌟스타일에 대해서는 천천히 알아볼게요 먼저 를 살펴볼게요. 여기서 p 는 paragraph (문장)을 뜻합니다. 말 그대로 문장 또는 어떤 텍스트를 쓸 때 사용합니다. 여기서 텍스트는 글, 숫자, 그리고 특수문자 입니.. 2020. 9. 16.
HTML 쉽게 배우기 | HTML 문서와 구조 저번 편에서 HTML에 대해 간단해 알아봤으니까 이젠 HTML을 직접 작성해 봐야겠죠. 먼저 바탕화면에 폴더를 하나 만들어 주세요. 폴더 이름은 맘대로. 이 폴더를 저번에 설치한 VSCode로 열어주세요. '새 파일' 만들기를 눌러서 index.html을 만들어 주세요 파일에 아무거나 쓰고 폴더에서 index.html을 열면 브라우저에 서 볼 수 있습니다. 이렇게 해도 브라우저에 보이지만, 이건 HTML이라고 할 수 없습니다. 저번에 HTML 문서는 태그와 요소들로 만들어진다고 했었죠. 그럼 HTML문서는 어떻게 작성해야 하나? HTML 문서를 만들기 위해선 HTML 문서의 구조를 먼저 갖춰야 합니다. HTML 문서의 구조를 보기 전에 "태그", "요소" 이 두 단 어가 많이 나왔죠. 태그는 뭐고 요소는.. 2020. 9. 13.
HTML 쉽게 배우기| HTML 소개 웹 개발에 관심 있으신 분? 블로그를 더 잘 사용하고 싶어서 HTML을 배우고 싶으신 분? 목적이 뭐든 누구나 쉽게 배울 수 있는 HTML 블로그입니다. 개인적으로 서론이 긴 거 별로 안 좋아하는데, 그래도 HTML이 뭔지는 설명해야 될꺼같아서 간단하게 해 볼게요. HTML은 HyperText Markup Language (하이퍼텍스트 마크업 언어)의 약자입니다. 이게 무슨 말이냐면, 우리가 인터넷 할 때 사용하는 브라우저에 내용을 표시할 수 있는 문서를 작성할 때 사용하는 컴퓨터 언어입니다. 웹 사이트든 블로그든 브라우저에서 볼 수 있으려면 HTML 문서가 필요합니다. 이 문서는 태그와 요소들로 이루어져 있으며 이 요소들을 브라우저가 번역해서 우리가 보기 쉽게 표시해 줍니다. 좀 더 간단하게 설명하자면.. 2020. 9. 13.
HTML-동영상 | 티스토리 동영상 넣는방법 2가지 오늘은 블로그에 동영상을 넣는 방법들을 알아볼께요. 항상그렇듯이 티스토리에서 제공하는 툴과 HTML을 사용하는 방법, 이 두가지를 알아볼께요. 티스토리 툴로 동영상 삽입하기 1. 블로그 수정 페이지에서 위에 이미지 아이콘을 눌러 동영상을 선택하세요 2. 팝업에서 "업로드 파일 선택"을 눌러 동영상 파일을 선택하고 첨부를 눌러주세요 **동영상 파일이 크면 시간이 좀 걸려요** 3. 동영상이 삽입됐습니다 장점 - 쉽다 - 사이즈 바꾸기와 정렬할수있는 옵션툴이 있다 단점 - 동영상파일이 컴퓨터에 있어야된다 - 다른 동영상 (ex: 유튜브)을 삽입할수 없다 HTML으로 동영상 삽입하기 예시로 유튜브 동영상을 사용할게요. 1. 블로그 수정 페이지 위에서 HTML모드로 바꿔주세요 2. 유튜브에서 공유 코드 가져오기.. 2020. 9. 7.
HTML-링크 | 티스토리 링크넣는 방법 2가지 오늘은 블로그에 링크를 넣는방법들을 알아보겠습니다. 사진과 같이 블로그에서 제공하는 툴을 사용하는 방법이있고, HTML을 사용하는 방법도 있습니다. 블로그 툴 사용하기 1. 링크툴에 URL을 붙여넣습니다 **새창으로 열기를 선택하면 링크를 클릭하면 새탭/브라우저 에서 열리고, 선택안하면 현재창에서 열립니다** 2. 링크와 미리보기가 생성됩니다 텍스트에 링크를 걸려면 텍스트를 선택하고 링크툴에 주소를 넣어주면됩니다. HTML으로 링크넣기 1. 블로그 수정 페이지 위에서 HTML모드로 바꾸기 2. HTML태그 작성하기 Learn, Code, Repeat Learn, Code, Repeat 중요!! Learn, Code, Repeat HTML의 링크 태그 입니다 href="" 링크의 주소(URL)를 지정합니다.. 2020. 9. 7.
HTML-사진 | 티스토리 사진넣는 방법 3가지 오늘은 블로그에 사진을 첨부하는 방법들을 알아볼겠습니다. 아시는분들은 이미 잘 아시겠지만 블로그에는 사진을 첨부할수있는 기능이 있습니다. 티스토리의 경우 이렇게 티스토리에서 제공하는 툴을 사용해서 사진을 첨부할수 있습니다. 정말 편리한 툴이지만 첨부할 사진이 내 컴퓨터에 이미 저장되있어야만 사용할수있는 단점아닌 단점이 있죠. 만약 컴퓨터에 사진을 저장안하고 싶으면? 두가지 방법이 있습니다. 1. 윈도우에있는 캡쳐도구 사용하기 2. HTML과 사진 URL을 사용하기 윈도우에있는 캡쳐도구 사용하기 1. 윈도우에서 캡쳐도구를 찾아서 실행시킨다 2. 모드에서 자유형, 사각형, 창, 또는 전체화면 캡쳐를 선택한다 3. 새로 만들기로 캡쳐하고싶은 화면을 캡쳐한다 4. 복사버튼을 눌러 캡쳐화면을 복사한뒤 블로그에서 .. 2020. 9. 7.
반응형

티스토리툴바