WEB/HTML(7)
-
[HTML] CSS stylesheet를 연결해주는 <link> 태그를 배워보자
이번 포스팅은 태그에 대해 배워본다. link 태그가 무엇인가?TCP school 사이트를 통해 link 태그의 정의를 찾아봤다. (출처 : TCPSchool) 위 정의에서 확인할 수 있듯이 link 태그는 외부 소스와 link 태그가 적용된 문서와의 관계를 정의할 때 사용된다.관계를 정의한다는 건 단순히 외부 소스와 본 문서를 연결해준다는 뜻으로 이해하면 될 것 같다. 태그 자체는 빈 태그이고, 속성을 넣어 사용해야한다.그리고 태그는 h1태그 CSS 적용 p 태그 CSS 적용 CSS/* 전체 배경색 변경 */body { background-color: #f0f0f0; font-family: Arial, sans-serif; text-align: c..
2025.04.01 -
[HTML] 이미지를 삽입해주는 <img> 태그를 배워보자
이번 포스팅에서는 img 태그에 대해 배워본다. img 태그란?태그는 HTML문서 내에 이미지를 삽입할 수 있도록 해주는 태그다.아래 그림처럼 웹페이지에 사진을 넣을 수 있게 해준다. 기본 문법은 아래와 같다. TCP School 에서는 img 태그에 대해 아래와 같이 정의했다. 기본 문법과 정의를 살펴봤으니 실제로 어떻게 하는지 테스트해보자.vscode를 켜고 HTML 문서를 작성해본다.아래와 같이 index.html 파일에 코드를 쓰고 웹브라우저에서 실행해보자.img 태그 출처 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/img 웹브라우저에서 index.html 파일을 열어보면 아래처럼 출력될 것이다. 일단 이렇게 이미..
2025.03.30 -
[HTML] HTML 문서 안의 또 다른 HTML 문서 <iframe> 태그를 배워보자
이번 포스팅에서는 태그에 대해 배워본다. iframe 태그란? (inline frame)은 HTML 문서 안에 다른 HTML 문서 또는 웹페이지를 삽입할 때 사용하는 태그이다.쉽게 말해 웹페이지 내에 또 다른 웹페이지를 집어넣는 기능을 가진 태그라는 것이다. 기본 문법은 아래와 같다. 기본 문법을 확인했으니 각각의 속성을 살펴보자.src : 문서 내에 삽입할 웹페이지의 URL을 넣어준다.width : 삽입할 웹페이지의 가로 길이height : 삽입할 웹페이지의 세로 길이 간단히 살펴봤으니 아래와 같이 문서를 작성하고 테스트 해보자. iframe 예제 작성한 HTML.html 문서를 웹브라우저에서 실행해봤더니 아래와 같이 src 속성의 URL 주소에 있는 웹페이지가 출력되는 걸 볼 수 ..
2025.03.25 -
[HTML] 다른 웹페이지로 이동 시켜주는 <a> 태그를 배워보자
이번 포스팅은 태그에 대해 배워본다. 태그가 무엇이냐?그 정의를 확인하기 위해 검색을 통해 아래의 사이트를 방문해서 a 태그에 대해 알아봤다. 내용을 보면, 태그는 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용합니다.라고 되어 있다. 그렇다.우리가 웹사이트를 이용하면서 특정 콘텐츠를 클릭할 때, 또는 검색을 통해 찾으려는 웹페이지의 목록을 클릭할 때 해당 페이지로 이동 시켜주는 역할을 하는 것이 지금 배워볼 태그이다. 위 예제를 보면 알겠지만 태그는 태그만을 사용해서는 페이지의 이동 동작을 수행할 수 없다. 이동하고 싶은 페이지로 이동 이런 식으로 태그와 해당 태그를 사용할 텍스트만 적어놓으면, HTML은 태그를 이용해 어느 사이트로..
2025.03.19 -
[HTML] 의미없는 태그 <div> 태그를 배워보자
HTML을 공부하다보면,그리고 어떤 웹사이트에서든 흔하게 아주 많이 접할 수 있는 태그가 하나 있다.HTML 문서 작성에 필수로 있어야하는 , , 등등을 제외하고 가장 많이 보이는 태그가 아마 태그일 것이다. 그런데, HTML의 각종 태그에 대해 공부하다보면 태그가 아무 의미없는 태그라고 한다.특별한 어떤 기능을 가진 그런 태그가 아니라 진짜 말 그대로 태그는 어떠한 기능도 갖고 있지 않기 때문이다. 그런데 이런 태그는 왜 만들었고, 왜 있는 것일까?또 아무런 기능도 없는 이 태그가 웹페이지를 만드는데 왜 그렇게 많이 사용되는 걸까? Advanced Web Ranking이라는 사이트에 가면 각 태그별 사용률이 나와있는데, (링크는 여기를 클릭)그 중 상위권을 일부 캡쳐했다.이 사용률 표를 보면 태..
2025.03.19 -
[HTML] 제목을 나타내는 <h1></h6> 태그를 배워보자
오늘 적어볼 내용은 태그. 태그는 문서의 제목을 표현할 때 사용하는 태그이다.제목을 표현하는 태그는 총 6가지가 있는데, 부터 까지 있으며, 이 가장 큰 글자를 출력하고 이 가장 작은 글자를 출력한다.단순하게 텍스트의 크기만 보면 폰트사이즈를 크게 키운 것 아니냐? 할 수도 있지만, 제목 태그를 사용함으로써 검색 엔진들이 좀 더 쉽고 빠르게 정확한 정보의 문서를 찾을 수 있도록 도와준다. 예를 들어 HTML이라는,h1 태그를 적용한 HTML이라는 제목의 글이 있다고 한다면 검색 엔진은 h1 태그를 통해 HTML이라는 제목의 문서구나.... 라는 것을 알 수 있게 된다는 것이다.누군가 HTML을 검색했다면 제목 태그를 사용한 글이 좀 더 노출도가 높아질수 있다는 이야기. h1~h6까지의 제목 태..
2025.03.18