강좌 및 설정/HTML 기본강좌

img 태그는 image 약자로 사진, 그림등 이미지 파일을 불러 올때 사용합니다. 이미지 태그는 전용 속성을 가지고 있습니다. 개발자 도구로 확인해 보면 Styles 탭에는 기본 정보가 없습니다. Computed로 확인해 보면 인라인 속성이며 세로 크기와 가로 크기를 가지고 있습니다. 인라인 속성이지만 가로세로가 auto로 표시되지 않고 수치가 존재하는 이유는 이미지 자체가 가로세로 크기를 가지고 있기 때문입니다. src 속성 src 속성은 값으로 이미지의 경로(위치, 주소)를 지정합니다. 여기서 절대경로와 상대경로하는 개념이 등장하는데요 윈도우즈 탐색기를 생각하시면 이해가 쉽습니다. 가령 내가 사진을 찍고 내컴퓨터의 D드라이브에 내사진 이라는 폴더를 만들고 사진 파일을 저장 했다면 위와 같이 윈도우즈..

p 태그는 paragraph의 약자로 단락, 문단을 의미합니다. 즉 웹 문서에서 하나의 단락을 나타낼때 사용하는 태그 입니다. 개발자 도구로 확인해 보면 위와 같이 기본 사이즈는 블럭속성에 상하 margin을 1em 씩 가지고 있으며 font-size는 역시 부모요소에서 상속 받고 있습니다. p 태그를 간혹 한줄 태그로 생각하고 사용하기도 하는데 그렇게 사용하시게 되면 오히려 코딩이 지저분하게 되고 쓸데없는 태그을 잔뜩 추가하게 되는 실수 입니다. 문단, 단락 구성으로 사용하시는게 맞는 표현이며 줄바꿈이 필요하다면 br태그를 사용하시는게 좋습니다. br 태그는 break의 약자로 줄바꿈시 사용합니다. 개발자 도구로 확인해 보시면 Styles 부분에는 아무것도 나오지 않습니다. Computed로 확인해 보..

h1, h2, h3, h4, h5, h6 태그는 문서나 특정 영역의 제목을 정의할 때 사용하는 태그입니다. 가장 주요한 제목은 h1을 사용하며 하부로 2번째 제목을 사용할 경우 h2, 그 하부로 또다른 제목이 필요하다면 h3을 사용합니다. 보통의 문서에는 그렇게 하부에 하부에 하부에... 로 들어갈 필요가 없기때문에 대부분은 h1, h2 정도에서 마무리가 되며 h3은 간혹 있을까 말까하는 정도 입니다. 개발자 도구로 h1~h6의 기본적인 사이즈 확인해 보면 h1 = block, margin top bottom 0.67em, font-size: 2em, font-weight:bold h2 = block, margin top bottom 0.83em, font-size: 1.5em, font-weight:b..

이 개념은 사실 css 강좌에서 설명드리는 편이 쉬울듯 하지만 html 태그의 의미와 함께 기본사이즈를 알아가자는 취지에서 다소 어렵더라도 미리 설명 드리고자 합니다. 위 이미지는 여지껏 해온 기본 html 문서에 p 태그만 포함된 문서 이며 좌측처럼 보이는 문서 입니다. html 태그 밑으로 head와 body가 있으며 head 밑으로 meta와 title, body 밑으로 p 태그가 존재합니다. 즉 head와 body를 html 태그가 감싸고 있습니다. 이경우에 html은 부모 요소가 되며 head는 자식 요소가 됩니다. 그리고 head와 body는 형제요소가 되는 것입니다. 다시 body태그는 p태그를 감싸고 있습니다. 그러니 body는 p의 부모가 되고 p는 body의 자식이 됩니다. 또 head..

html 을 처음 공부하시는 분들께서는 각 태그의 의미를 가장 중요하게 보셔야 합니다. 사실 실제로 사용되는 태그는 그다지 많지 않으며 매우 쉽게 되어 있기 때문에 의미 파악을 하지 않고 css를 통해 같은 효과로 표현하기도 하는데 올바른 방법은 아닙니다. 현재 웹은 장애인의 사용을 위한 웹접근성 지침이라는 것으로 가능한 모든 사람들이 사용할 수 있도록 발전하고 있는 상태이며 그것은 보다 많은 사람들이 내가 만든 컨텐츠를 볼수 있게하는 올바른 방법일테니까요 의미 없이 표현된 컨텐츠는 누군가에게는 알 수 없는 내용이 될 수 있으며 궁금증만 남게 될 수 있습니다. html 공부시 중요하게 알아야 할 첫번째가 태그의 의미라면 두번째는 태그의 기본 사이즈라고 생각합니다. 기본사이즈를 알아야 얼마나 더 강조할지,..

html의 모든 요소들은 사각형 박스의 형태로 만들어 집니다. 박스의 크기가 얼마나 되는지 여백이 어떻게 되는지 색상의 어떻게 되는지 정렬은 어떻게 되는지에 따라서 화면 표현이 결정됩니다. 그러니 당연히 모든 요소들은 같은 박스 속성을 가지고 있으며 속성의 값을 조절하여 화면을 구성하게 됩니다. 개발자도구 하단에 보시면 아래와 같은 박스를 보실 수 있습니다. 박스 모델의 margin = 박스 밖 여백의 간격 border = 박스 테두리 간격 padding = 박스 안 여백의 간격 그리고 컨테츠 영역으로 구성되어 집니다. 이러한 박스 모델은 이전 시간에 언급한 블럭의 속성을 요소에 해당되며 인라인 속성을 가진 요소는 컨텐츠 영역으로만 자동 적용되기 때문에 박스 모델을 조절할 수 없습니다.

거의 모든 태그는 태그가 감싸고 있는 부분이 웹브라우저에 어떻게 표시될지를 결정하는 display라는 속성을 가지고 있습니다. 웹브라우저의 개발자 도구를 열어서 보면 기본적으로 정해진 태그의 display 속성을 확인 하실 수 있습니다. 위 그림에서서 styles 부분에 보시면 body의 display : block; 임을 확인 할 수 있습니다. 대표적인 display 속성은 block, inline 입니다. 이외에도 inline-block, table, table-cell, flex, inline-flex, grid ... 등 다양하게 있지만 기본적으로 block과 inline 속성을 이해하면 나머지들은 대략 어떤 느낌인지 파악할 수 있으며 CSS강좌에서 다시 설명드리겠습니다. html5 전에는 대부분..

웹문서를 제작한 후에는 반드시 웹브라우저를 통해서 내가 만든 웹문서 정상적으로 작동되는지 확인하게 됩니다. 하지만 대부분은 내가 의도하지 않은 디자인 형태로 화면에 출력됩니다. 숙련된 개발자라도 복잡한 구조로 진행된 웹문서를 한번에 코딩한다는 것을 불가능합니다. 처음에는 한요소를 코딩하고 브라우저를 확인하고, 조금 숙련되면 몇가지 요소를 코딩하고 확인하는 작업을 반복하게 되는 것이죠 css와 자바스크립트가 포합되면 더 복잡하게 되며 필수적으로 웹브라우저의 개발자 도구 라는 것을 통해 화면의 디자인과 동작이 정상구동되는지 에러는 없는지 확인하게 됩니다. 개발자 도구는 웹문서 작업에 필수 요소라 할 수 있습니다. 단축키로 F12를 누르셔도 됩니다.

body 태그는 현재 html 문서에 모든 컨텐츠를 정의할때 사용합니다. body 태그는 브라우저 화면에 보여질 전체 내용이 들어갑니다. 거의 모든 태그가 body 태그 안으로 들어간다고 보아도 무방 합니다. 당연히 하나의 웹문서에는 하나의 body 태그만을 정의해야 합니다. 기본적인 사용방법 content

head 태그는 현재 html 문서에 대한 정보를 정의합니다. head 태그 안에는 , , , , 태그 등이 사용될 수 있습니다. head 태그는 직접적으로 브라우저 화면에 보여질 내용이 들어가지는 않습니다. 현재 html 문서에 이름이 무엇이고 어떤 언어로 만들어져 있는지 어떠한 브라우저에서 작동하는지 어떤 외부 소스를 가져오는지 등을 정의합니다. 그러므로 당연히 하나의 웹문서에는 하나의 head태그만이 존재 합니다. 기본적인 사용방법 meta 태그는 현재문서(컨텐츠)를 표현하기 위한 정보을 정의한 태그입니다. 정보를 위한 정보라고 볼 수 있습니다. 가령 집에서 온가족이 같은 크기의 김치만두완 고기만두를 빚었다고 합시다. 그리고 한 통에 담아 냉장고 냉동실에 보관했다고 하면 다음에 김치만두만 먹고 싶을..

Pixel 은 Picture Element 의 준말로 이미지의 크기를 나타내는 가장 작은 단위를 말합니다. 좌측그림을 오른쪽그림처럼 작은 정사각형 크기로 자른다고 가정해 보겠습니다. 가로로 20개 세로로 13개 입니다. 그러면 전체 조각은 20*13 총 260 조각이 되겠네요. 오른쪽 그림의 빨간 테두리 조각만 꺼내어 다시 잘라 보겠습니다. 위 그림은 빨간 테두리 조각을 20배 확대한 이미지 입니다. 마찬가지로 이 조각을 더 작은 조각으로 계속해서 자르다고 생각해 봅시다. 결국에는 단하나의 아주 작은 조각으로 자르게 될 것 입니다. 이 조각을 Pixel 이라고 생각하시면 됩니다. 즉 Pixel 이란 화면의 구성하는 하나의 사각점입니다. 아주 작은 단위이기 때문에 1pixel은 눈으로 구분하기에는 쉽지 않..

HTML tag는 tag 이름을 꺾쇠 괄호()로 감싸서 표현합니다. 사용방법 : 내용 블럭 타입 단락 타입 인라인 타입 기본적으로 tag는 시작tag와 종료 tag의 쌍으로 이루어집니다. 종료 tag는 tag명 앞에 (/)를 입력해서 종료태그임을 표시합니다. 일부 tag는 종료tag가 없는 tag도 있습니다.이러한 태그를 빈 tag(empty tag)라고 합니다. 대표적인 빈 tag에서 , , 이 있습니다. tag는 위와 같이 tag로만 표시하기도 하지만 대부분은 속성이라는 것을 가지고 있습니다. 속성은 공통으로 쓰이는 것도 있고 전용으로 쓰이는 것도 있습니다. 전용으로 쓰이는 대표적인 태그는 , 등이 있으며 추가적인 정보를 제공합니다. 네이버 기본적인 사용법은 : 내용 속성은 시작tag 안에서 사용되며..