CSS를 적용하는 3가지 방법 인라인 스타일(Inline Style) 내부 스타일 시트(Internal Style Sheet) 외부 스타일 시트(External Style Sheet) 웹 문서에 CSS를 적용시키기 위해서는 위의 3가지 방법이 있습니다. ※ 우선순위 : 인라인 스타일 > 내부 스타일 시트 > 외부 스타일 시트 인라인 스타일(Inline Style) See the Pen CSS사용예제1 by wjdxo513 (@wjdxo513) on CodePen. 인라인 스타일 방식은 html태그에 style 속성을 사용하여 직접 스타일을 지정하는 방식으로 특정 영역에 스타일을 단독 적용하고 싶을 때 사용할 수 있는 방법입니다. 하지만 이 방법을 너무 많이 사용하면 HTML과 CSS의 코드가 혼합되어 유..
CSS란 무엇인가? (HTML과의 차이) CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념으로 웹 문서의 콘텐츠와 레이아웃, 글꼴과 같은 시각적 요소들의 디자인을 분리하기 위한 목적으로 등장하였습니다. HTML이 웹 문서의 텍스트나 이미지, 표와 같은 뼈대를 만드는 것이라면 CSS는 HTML로 만들어 놓은 텍스트의 색상이나 크기와 같은 웹 문서의 디자인을 담당한다고 생각하시면 됩니다. 이렇게 CSS를 사용하면 디자인 코드를 따로 뺄 수 있어 문서의 레이아웃을 효과적으로 할 수 있고, 간단한 코드만으로도 웹 문서 전체의 글자 크기나 글 자체, 줄 간격, 배경 색상 등도 자유롭게 디자인 할 수 있습니다. CSS의 장점 한번 스타일을 정의해놓고 여러 개의 문서에서 여러 ..
iframe 태그란? iframe 태그는 inline frame의 약자로써 해당 웹 페이지 안에 다른 html 파일을 불러와서 삽입할 수 있는 기능을 제공합니다. 과거에는 html 파일을 재사용할 목적으로 header나 sidebar와 같은 요소들을 따로 만들어 iframe태그로 묶어주는 형태로 웹 사이트 개발을 많이 진행했었습니다. 예를 들자면 위의 형태처럼요. 이밖에도 지도, 영상, 결제창 등 외부 요소들을 html에 삽입해야 할 때 과거에는 iframe으로 감싸서 개발을 많이 진행했었는데요. 다만 이와 같은 개발 형식은 iframe 방식의 다양한 문제가 도출되고, html5가 새롭게 등장하면서 현재는 잘 사용하지 않습니다. iframe 태그 사용법 See the Pen iframe 태그 사용법 by..
학창 시절 공부를 할 때 글의 중요한 부분에 노란색 형광펜으로 표시해가며 공부를 한 기억이 있습니다. HTML5에도 형광펜과 똑같이 하이라이터 효과를 내는 태그가 생겼습니다. 바로 태그입니다. 이번 포스팅에는 태그의 사용법에 대해 알아보도록 하겠습니다. mark태그(하이라이터 효과) 사용법 강조할 텍스트 강조할 텍스트를 위와 같이 태그로 감싸주면 하이라이터 표시가 됩니다. See the Pen mark 태그 사용법1 by wjdxo513 (@wjdxo513) on CodePen. 위와 같이 적용해볼 수 있겠습니다. 스타일을 적용하지 않으면 기본 색상인 노란색 바탕에 검은색 글씨가 됩니다. CSS로 mark 태그 꾸미기 아래 코드의 CSS탭을 클릭하시면 CSS 코드를 확인하실 수 있습니다. See the ..
태그는 인용한 내용을 표기하기 위한 것으로 quote의 줄임말입니다. 주로 짧은 인용구(short quotation)를 정의할 때 사용되며 보통 브라우저에서는 줄 바꿈 없이 앞뒤에 따옴표를 추가하여 표현합니다. 긴 인용문 블록을 정의할 때는 태그가 아닌 태그의 사용을 권장합니다. ※ 구 익스플로러에서는 태그 따옴표가 표시되지 않을 수 있습니다. 태그가 태그의 다른 점 태그와 태그는 모두 인용문을 나타내는 것으로 쓰임새는 같지만 다른 점이 있다면 태그는 블록 레벨 태그이기 때문에 인용 내용이 줄이 바뀌어 나타나고 다른 내용들과도 구분되도록 안으로 들여 써지지만 태그는 인라인 레벨 태그이기 때문에 줄 바꿈 없이 다른 내용들과 함께 한 줄로 표시되며 따옴표로 강조된다는 차이점이 있습니다. [Html] bloc..
글을 인용할 경우 blockquote 태그를 활용해 표시해줄 수 있습니다. 이 blockquote 태그는 사용하게 되면 다른 텍스트보다 글이 안쪽으로 써지는 효과를 줍니다. 또한 꼭 인용글이 아니더라도 CSS를 통해 blockquote 태그를 꾸며서 글을 강조할 수 있는 효과도 줄 수 있는 등 다양하게 활용될 수 있는 태그입니다. 이번 포스팅에서는 blockquote 태그의 사용법에 대해 알아보도록 하겠습니다. ※ 참고로 길이가 짧은 인용구를 나타낼 때는 블록으로 감싸는 태그보다는 태그를 사용하는 것이 바람직합니다. [Html] q태그(짧은 인용문) 사용법 & 예제 총정리 blockquote태그(인용문) 사용법 인용 할 내용 사용하는 방법은 blockquote 태그로 텍스트를 감싸주면 됩니다. 인용의 출..
최근에는 영상에 자막을 넣는 것이 거의 필수가 되었습니다. 자막이 청각장애인들이 영상을 볼 수 있도록 해줄뿐더러 주변 소음이나 소리를 들을 수 없는 상황에서 영상의 내용을 이해하는데 도움이 되기 때문입니다. HTML5에서는 track 태그를 활용하여 영상에 자막을 연결해 줄 수 있습니다. 이번 포스팅에서는 track 태그를 활용하여 영상에 자막을 넣는 방법에 대해 알아보도록 하겠습니다. track 태그 사용법 kind 속성 (자막 종류) 속성 값 설명 subtitles 자막을 의미합니다. 소리를 켤 수 있지만 이해할 수 없는 경우, 다른 언어로 번역한 자막일 경우에 사용하며 비디오 영상에 표시됩니다. captions 캡션을 의미합니다. 청각장애인용 자막이거나 소리를 들을 수 없거나 켤 수 없는 경우에 사..
HTML5에 새로 추가된 태그 오디오나 비디오와 같은 멀티미디어를 직접 재생할 수 없었던 과거에는 웹 브라우저에서 플러그인(plug-in) 프로그램을 사용했습니다. 대표적으로 flash가 있죠. 그래서 과거에는 인터넷에서 음악을 듣거나 온라인 강의를 실청하려고 할 때 특정 프로그램을 설치하라는 메시지가 뜨곤 했는데 HTML5에서는 이런 플러그인 없이도 멀티미디어를 사용할 수 있는 태그들이 추가되었습니다. video 태그 사용법 HTML5에서 웹 문서에 영상을 첨부하고 싶다면 태그를 사용합니다. 위의 예제처럼 video 태그와 src에 비디오 파일의 경로만 작성해주면 웹 문서에 영상이 첨부됩니다. 하지만 보통 video태그는 controls(컨트롤 막대) 속성과 함께 사용한다는 것은 알아두셨으면 좋겠습니다..
HTML5에 새로 추가된 태그 오디오나 비디오와 같은 멀티미디어를 직접 재생할 수 없었던 과거에는 웹 브라우저에서 플러그인(plug-in) 프로그램을 사용했습니다. 대표적으로 flash가 있죠. 그래서 과거에는 인터넷에서 음악을 듣거나 온라인 강의를 실청하려고 할 때 특정 프로그램을 설치하라는 메시지가 뜨곤 했는데 HTML5에서는 이런 플러그인 없이도 멀티미디어를 사용할 수 있는 태그들이 추가되었습니다. audio 태그 사용법 HTML5에서 배경음악이나 효과음 등 오디오를 삽입할 때는 태그를 사용합니다. 웹 사이트에 특히 bgm을 설치할 때 많이 사용합니다. audio 태그에서 사용할 수 있는 파일 확장자 설명 mp3 대부분의 음원에서 사용되며 Moving Picture Experts Group에 의해 ..
텍스트만 있는 사이트보다는 다양한 이미지들이 있는 사이트들이 조금 더 직관적이고 예쁜 사이트를 만들 수 있습니다. HTML에서 사이트에서 이미지를 나타낼 수 있는 태그는 태그입니다. 이번 포스팅에서는 태그의 사용법에 대해 알아보도록 하겠습니다. img 태그 사용법 img 태그는 imgage의 줄임말로써 이미지를 삽입해주는 태그입니다. 반드시 src라는 속성을 동반하며 이 src에 이미지 경로를 작성해주셔야 정상적으로 출력됩니다. 참고로 태그는 꼭 사용하지 않아도 됩니다. 이미지 태그의 다양한 속성들은 아래 내용들을 참고해주세요. src 속성 (이미지 경로) See the Pen 이미지 태그 사용법 by wjdxo513 (@wjdxo513) on CodePen. 이미지를 웹 문서에 넣으려면 src속성에 정..
시맨틱 태그란? 시맨틱(semantic)이라는 '의미의', '의미론적인'라는 뜻을 가진 형용사입니다. 즉 시맨틱 태그는 의미를 부여한 태그라는 뜻이 됩니다. 태그에 의미를 부여했다고 생각하시면 이해가 편합니다. 이런 시맨틱 태그는 HTML5에서는 처음 등장했습니다. 예를 들자면 나 같은 태그들을 말합니다. 이 태그들은 이름만 봐도 상단과 하단이라는 것을 알겠죠. 이렇게 시맨틱 태그의 등장으로 인해 우리는 태그만 보고서도 문서를 더 쉽게 이해할 수 있게 되었습니다. 시맨틱 태그를 사용해야 하는 이유 웹 문서 레이아웃을 만들 때 시맨틱 태그를 사용하지 않더라도 태그를 활용하여 웹 문서를 똑같이 만들 수 있습니다. 하지만 우리가 시맨틱 태그를 사용해야 하는 이유는 크게 아래의 3가지 이유가 있습니다. HTML..
HTML이란? HTML은 Hyper Text Markup Language의 약자로 이것을 그대로 번역해보자면 하이퍼 텍스트를 마크업 하는 언어라고 할 수 있겠습니다. 여기서 Hyper Text(하이퍼 텍스트)는 웹사이트에서 링크를 클릭해 다른 문서나 사이트로 이동할 수 있는 기능을 의미하고 Markup(마크업)은 태그(tag)를 사용해 문서에서 제목 본문 이미지 등을 표시하는 것을 말합니다. 즉 HTML을 한마디로 정리해보자면 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 태그를 활용한 언어라고 HTML의 정의를 내려볼 수 있겠습니다. 현재는 웹 표준을 제정하는 W3C(World Wide Web Consortium)에서 표준을 권고하고 발전시키고 있습니다. W3C(World Wide Web Consor..
애플의 제품이 품질이 좋기는 하지만 비싼 가격 대비 가성비가 좋다고는 생각이 들지 않습니다. 저에게는 애플의 제품들은 사고는 싶으나 가격이 만만치 않아 막상 구매하기에는 부담스러운 포지션의 브랜드입니다. 애플의 제품을 좋아하시는 분들도 아이폰, 에어팟까지는 필수적으로 구매를 하시지만 애플 워치나, 에어팟 맥스와 같이 있으면 좋고 없으면 마는(?) 그런 제품들은 잘 구매하시지 않으시죠. 하지만 비싼 제품이라도 누군가에게는 굉장히 유용하게 사용될 제품이 될 수 있을 겁니다. 저에게는 음악을 좋아하는 친구가 있습니다. 애플 광팬이었던 그 친구는 애플스토어에서 한번 들어보고 완전히 아이팟 맥스에 매료되어 버렸습니다. 하지만 역시 비싼 가격에 무척 망설이던 것처럼 보였습니다. 하긴.. 애플 제품들이 워낙 고가라 ..