⭐ HTML

[HTML] Favicon 파비콘(주소창 아이콘) 추가하기

개념정리 Favicon(파비콘) : 브라우저 탭의 페이지 제목 옆에 표시되는 작은 이미지입니다. 💡 Favicon 파비콘을 이용하여 웹 페이지를 꾸밀 수 있습니다. Favicon 파비콘 추가 Code rel은 icon으로 Favicon 파비콘이라는 가지고 있습니다. href는 Favicon으로 사용할 파일의 경로를 명시합니다. Favicon 파비콘을 사용하기 위해선 위와 같은 link 태그를 head 태그 안에 삽입해주시면 됩니다.

input text 태그를 예쁘게 디자인하는 법

안녕하세요. 오늘은 input 태그를 예쁘게 꾸미는 법을 알아볼게요. input 태그를 사용하면 굉장히 디자인이 없어서 심심해 보여요. 이거를 사람들의 눈에 잘 보일 수 있도록 예쁘게 꾸미는 법에 대해 알아봅시다. input text 태그로 작성하게 되면 굉장히 촌스럽다? 라고 표현해야 하나? 그냥 직사각형 모양이 나와서 아쉽다고 생각하실 수 있어요. 하지만 css로 내 마음대로 input 태그를 바꿔줄 수 있습니다. 본론으로 들어가기 전에 input태그에서 type에 따라 서로 달라지는데 css로 input {} 으로 하면 모든 input 태그를 선택하니까 type에 따라 선택하는 방법을 먼저 알려드리겠습니다. input[type=text] { } 위와 같은 선택자를 사용하면 input 태그에 type..

HTML로 웹 페이지에 사진 넣기(img 태그)

코드들은 github에 업로드되어있습니다. https://github.com/JaeYeongSong/Blog/tree/main/HTML GitHub - JaeYeongSong/Blog Contribute to JaeYeongSong/Blog development by creating an account on GitHub. github.com 오늘은 HTML에 사진을 넣어보는 시간을 가져보도록 하겠습니다. HTML은 처음에 글을 사용하기 위한 목적으로 만들어졌습니다. 하지만 HTML이 발전하고 발전하면서 HTML이 다양한 목적으로 웹 페이지가 만들어졌죠. 그래서 다양하게 HTML 코드가 사용이 되고, 여기서 사진이 필요한 웹 페이지가 생겨났습니다. (사실 글만 있으면 잘 읽히지도 않고, 집중도 잘 되지 않..

HTML의 요소 구조

오늘은 HTML의 요소 구조에 대해 알아보겠습니다. HTML의 태그의 사용방법을 구체적으로 알아보는 시간입니다. HTML의 요소와 태그 개념을 뚜렷하게 잡아 놓는다면, 앞으로 배울 CSS(디자인)나 Javascript(반응형)에서는 많이 중요하게 사용되기 때문에 오늘 HTML의 요소 구조에 대해 알아보도록 하겠습니다. HTML의 요소, 태그, 속성 뜻 요소 구조에 대해 알아보려면 먼저 '요소'가 무엇인지 알아야겠죠? 요소(Element) : HTML에서 시작 태그와 종료 태그로 이루어진 모든 명령어들을 의미한다. 요소는 위와 같은 뜻을 가지고 있습니다. 여기서 '시작 태그' 그리고 '종료 태그'에서 HTML 첫 번째 시간에서 알아보았지만, 또다시 한번 알아보도록 하겠습니다. 태그(Tag) : 요소(Ele..

HTML의 태그와 구조

저번 시간에 title 태그를 알려주면서, HTML의 구조에 대해 알려드렸는데 title 태그를 이해시키기 위함이라, 간단하고 정신없게 HTML의 구조에 대해 설명했던 것 같습니다. 그래서 HTML의 구조에 대해 설명을 하려고 했는데, 이 내용을 설명하려면 HTML의 태그도 같이 설명해야 할 것 같아, HTML의 태그와 구조를 같이 자세히 알아보도록 하겠습니다. HTML의 모든 내용를 다루지 않기 때문에 자주 사용하는 태그들과, 구조를 알아보겠습니다. HTML의 태그 기본 태그 : 현재 문서가 어떤 문서 타입을 명시한다. : 문서의 시작과 끝을 알림. (root 요소 정의) : HTML 문서의 메타데이터(metadata)를 정의한다. 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 ..

HTML로 웹 사이트에 title(제목) 넣기 및 head, body 태그 알아보기

오늘은 HTML로 웹 사이트에 title(제목)을 넣어보도록 하겠습니다. 여러분들 title이 뭔지 아시나요? title이란 제목, 표지라는 뜻을 가지고 있습니다. 저번 시간에 HTML로 웹 사이트에 제목을 넣어보았는데, 그때에는 우리가 볼 수 있는 HTML 제목이었습니다. 볼 수 있다는 말이 무엇이냐면, 웹 사이트에 사용자가 볼 수 있는 걸 말합니다. title 태그란? 오늘 배울 title이라는 태그는 어디에 사용된다면, 저번 시간에도 말했듯이 검색엔진이 그 글이 어떠한 내용을 담고 있는지 파악 할 수 있다고 했습니다. 이번 시간에 title 이라는 태그는 우리가 검색엔진에서 웹 페이지를 검색했을 때, 사용자가 보았을 때 그 웹 페이지의 제목을 보여주는게 title 이라는 태그입니다. 한 번 예시를 ..

HTML로 웹 사이트에 제목 넣기, 줄바꿈 하기

오늘은 HTML로 웹 사이트에 제목을 넣는 법을 알려드리겠습니다. 여러분들은 제목이 뭐라고 생각하시나요? 많은 사람들이 이렇게 말할겁니다. 제목은 글의 내용을 짧게 서술하는 글 이라고 생각할겁니다. 그럼 많은 사람들이 구글이나, 네이버 등 다양한 검색엔진을 통해 웹 페이지에 접근할 겁니다. 그럼 구글이나, 네이버 같은 검색엔진들은 웹 페이지의 내용을 어떻게 알 수 있을까요? 자세히는 잘 모르지만, 제목을 통해 또는 글 안에 내용을 통해 웹 페이지의 내용을 알 수 있습니다. 검색엔진에서 검색한 내용과, 제목이나, 글 안에 내용을 통해 관련있는 웹 페이지를 찾아주는 겁니다. 그러므로 웹 페이지를 만들려면 제목이 있어야지, 검색엔진이 자신의 웹 페이지를 추천 웹 페이지에 올려주겠죠? 그러므로 웹 사이트에 제목..

HTML로 웹 사이트에 글쓰기, 글자 강조하기

오늘은 HTML로 웹 사이트에 글을 써 보겠습니다. 글을 쓰면서 글자를 강조하는 방법도 같이 알아보도록 하겠습니다. 저번시간에 간단하게 HTML이라는 코드에 대해 알아보셨다면, 오늘은 직접 웹 사이트에 글을 써 보는것에 대해 알아봅시다. 일단 간단한 글을 써 보겠습니다. See the Pen writing by Xsop-sop (@xsop-sop) on CodePen. 이렇게 HTML로 글을 작성해주시면 됩니다. 그러면 HTML로 글을 작성한 HTML 파일을 Chrome나 다른 웹 브라우저로 실행하시면 웹 페이지에서 이렇게 나옵니다. 근데 이렇게 글이 나오면 글자를 강조하고 싶지 않나요? 앞선 시간에 배웠던 strong을 한 번 해보면 See the Pen strong by Xsop-sop (@xsop-..

HTML이란 무엇인가?

우리가 웹 페이지를 많이 보다 보면 궁금한 점이 생길 수 있을 겁니다. 특히 Youtube, Titstory 등 많은 웹 사이트들이 있습니다. 이러한 웹 사이트는 굉장히 많은 정보를 담고, 많은 사람들에게 보여주고 있습니다. 간단하게 스마트폰, 또는 컴퓨터 하나만 들고 있으면 많은 정보와 웃음을 줄 수 있는 자료들이 많이 존재하죠. 많은 사람에게 도움을 주기도 하는 웹 페이지들을 조금 알아보도록 하겠습니다. 대부분의 많은 웹 페이지들은 HTML이라는 언어로 이루어져 있습니다. HTML은 HyperText Markup Language 라는 줄임말입니다. 한국어로 해석하면 하이퍼텍스트 마크업 언어라고 해석할 수 있겠죠? 각 언어에 뜻을 해석해보자면 하이퍼텍스트란? 한 문서에서 다른 문서로 즉시 접근할 수 있..