쏘 개발로그

이번에는 이미지나 오디오, 비디오와 같은 멀티 미디어를 넣는 방법을 알아보자. 1. 미디어 태그기본적인 미디어 태그의 종류와 각각에 있는 속성들은 다음과 같다.태그속성설명imgsrc이미지의 경로 지정alt해당 경로에 이미지가 없을 때 보여줄 대체 택스트 지정width이미지의 너비 지정height이미지의 높이 지정audiosrc오디오의 경로 지정preload오디오를 준비중일 때 데이터를 모두 불러올지 여부 지정autoplay자동 재생 여부 지정loop반복 재생 여부 지정controls오디오 재생 도구 출력 여부 지정videowidth비디오의 너비 지정height비디오의 높이 지정 종류가 조금 많으니 하나씩 천천히 실습을 진행해보자. 2. 이미지 태그 실습실습 결과부터 보면 다음과 같은데, 위에..

오늘은 표를 만들 때 사용하는 테이블 태그에 대해 알아보자. 1. 테이블 태그테이블 태그에는 아래와 같은 것들이 있다.태그설명table표 삽입tr표에 행 추가 (table row)th표에 제목 추가 (table heading)td표에 데이터 추가 (table data) 2. 테이블 태그 실습그럼 실제로 이걸 활용해서 표를 어떻게 만들 수 있는지 확인해보자.결과 사진을 먼저 보여줄테니, 이 결과를 얻기 위해선 위에서 본 테이블 태그를 어떻게 활용하면 좋을지 먼저 고민해보자. 아직은 살짝 어설퍼 보이는 표이지만, 우선 아래와 같이 작성하면 된다. 이름 나이 직업 홍길..

우리가 웹 페이지를 사용하다 보면 항상 보이는 것들 중 하나가 네비게이션 메뉴이다.당장 네이버의 메인 페이지만 보더라도 다음과 같이 수많은 네비게이션 메뉴가 있음을 볼 수 있다. 오늘은 이러한 네비게이션 메뉴를 만들 때 주로 사용하는 목록태그들에 대해 알아보자. 1. 목록 태그목록 태그는 아래와 같은 것들이 있다.태그설명ul순서가 없는 목록 만들 때 사용 (unordered list)ol순서가 있는 목록을 만들 때 사용 (ordered list)li목록 요소 생성 (list item) 그럼 이제 아래 챕터에서 하나씩 실습을 하며 익혀보자. 2. 순서가 없는 목록 만들기간단히 항목 1, 항목 2, 항목 3 목록을 생성해보자. 항목 1 항목 2 항목 ..

웹 페이지는 글자 태그의 비중이 가장 크다.지금 내 블로그만 봐도 그렇고, 위키피디아 같은 걸 들어가봐도 글자가 압도적으로 많은 것을 볼 수 있다. 위의 사진에서 보면 글자의 크기나 굵기 등이 여러가지임을 확인할 수 있는데, 오늘은 제목과 본문의 글자를 표현하는 태그에는 어떤 것들이 있는지 알아보자. 1. 제목 태그와 본문 글자 태그1.1. 제목 태그HTML 문서에서 제목은 아래 표에 있는 6가지 태그들로 표현 가능하다.태그설명h1첫 번째로 큰 제목 글자 생성h2두 번째로 큰 제목 글자 생성h3세 번째로 큰 제목 글자 생성h4네 번째로 큰 제목 글자 생성h5다섯 번째로 큰 제목 글자 생성h6여섯 번째로 큰 제목 글자 생성 이처럼 숫자가 커질수록 글자는 작아진다고 생각하면 된다. 실제로 어느 정도..

오늘은 실습으로 다음 사진과 같이 기본적인 제목과 본문을 추가해보는 실습을 진행할 예정이다. 그러나 우리는 실습을 진행하기 전에 기본적으로 알고 있어야 할 개념 정리부터 하고 시작하자. 1. HTML5란HTML5의 기본 구성 요소로는 태그와 요소, 속성이 있다. 이때, 요소란 HTML 페이지를 구성하는 각 부품들을 일컫는 것으로, 제목이나 본문, 이미지 등은 모두 요소라고 부른다. HTML의 요소들에는 내용을 가질 수 있는 요소와 가질 수 없는 요소가 있는데, 내용을 가질 수 있는 요소들은 `내용` 형태로 사용하고, 내용을 가질 수 없는 요소들은 `` 형태로 사용한다. 아래 챕터에서 내용을 가질 수 있는 요소와 내용을 가질 수 없는 요소에는 무엇이 있는지에 대해 자세히 알아보자. 2. 내용을 ..

웹을 공부하다 보면 가장 먼저 마주치는 기술 중 하나가 HTML이다.그리고 HTML을 조금 더 찾아가다 보면 HTML5라는 표현도 자주 보게 된다. 🤔 오늘의 질문HTML이랑 HTML5는 다른걸까? 결론부터 말하면, HTML5는 HTML의 발전된 버전이다.(즉, HTML과 HTML5는 별개의 기술이 아니다.)다만, HTML5는 단순히 버전 숫자가 올라간 걸 넘어서, 웹을 바라보는 관점 자체에 큰 변화를 가져왔다. 오늘 포스팅에서는 HTML1.0 ~ HTML4.x와 HTML5의 차이를 알아보며, 이 변화에 대해 자세히 알아보자. 1. HTML이란초기의 HTML은 본질적으로 문서를 구조화하기 위한 언어였다.즉, 주요 목적이 "제목을 표시한다.", "문단을 나눈다.", "이미지를 넣는다.", "링크로..