쏘 개발로그

글을 작성하면서 매번 콘솔로만 찍어서 보여주기도 애매했고, 그렇다고 매번 PC에서 하긴 귀찮았는데, 웹에서 코드 입력 시 바로 보여주는 사이트를 찾았다 !! JS BinSample of the bin:jsbin.com 아래는 내가 예시로 작성해 본 건데 한 줄 칠 때마다 실시간으로 우측에서 반영돼서 넘 편하당 !! alert도 잘 뜬당 !! 글에 첨부할 사진과 같이 간단한 코드를 작성할 때에는 꽤나 유용하게 쓰일 것 같다 ㅎㅎ q(≧▽≦q)

웹 브라우저를 사용하면 구글 폼과 같이 입력 양식이 있는 페이지 또한 자주 접하게 된다.오늘은 이러한 것들을 만들 수 있는 입력 양식 태그에 대해 알아보자. 1. 입력 양식 태그입력 양식 태그의 종류에는 아래와 같은 것들이 있다.태그속성설명form 입력 양식의 시작과 끝 표시inputtext텍스트 입력 양식 생성button버튼 생성checkbox체크박스 생성file파일 입력 양식 생성hidden숨기기image이미지 형태 생성password비밀번호 입력 양식 생성 (검정 동그라미로 가려진 거)radio라디오 버튼 생성reset초기화 버튼 생성submit제출 버튼 생성textareacols / rows여러 행의 글자 입력 양식 생성(rows는 높이를 지정하고, cols는 너비를 지정함)placehold..

이번에는 이미지나 오디오, 비디오와 같은 멀티 미디어를 넣는 방법을 알아보자. 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은 빠지지 않는 핵심 기술이다.그러나 조금 더 자세히 알아본 사람들은 HTML5라는 것도 심심치 않게 들어봤을 것이다. 🤔 HTML이랑 HTML5는 다른걸까? 오늘 포스팅에서는 이 질문에 대한 답을 찾아보자. 1. HTML이란초기의 HTML은 본질적으로 문서를 구조화하기 위한 언어였다.즉, 주요 목적이 "제목을 표시한다.", "문단을 나눈다.", "이미지를 넣는다.", "링크로 페이지를 이동한다."와 같이 "이 페이지는 어떤 내용을 담고 있는가?"를 설명하는 데에 초점이 맞춰져 있었다. 따라서 HTML1 ~ HTML4는 HTML 자체만으로는 정적인 문서 표현에 머물렀고, 동적인 기능이 필요하다면 Flash와 같은 외부 플러그인에 의존해야 했었으며, 구조적 ..