안녕하세요! 이번 포스팅에서는 HTML Form에 대해서 알아보려고 합니다. 폼(Form)은 서류를 꾸미는 일정한 방식 이라는 뜻을 가지고 있으며 주로 설문조사, 증정품, 접수와 같은 경우에 많이 사용합니다. 저 같은 경우에는 설문조사나 접수할때 많이 사용한 것 같은데 주로 생년월일, 이름, 핸드폰번호를 기입했던 것 같네요! 각설하고 아래 사진은 네이버 폼인데 한눈에 폼이 무엇인지 알 수 있겠죠? 이러한 폼과 비슷하게 HTML에서도 form은 유저의 입력을 수집하고 수집된 정보를 서버에 보낼 때 사용합니다. (물론 서버는 구축해야합니다..) 이런 역할을 하는 요소가 요소이며 주로 입력을 받는 요소, 안내의 역할을 하는 요소와 함께 사용합니다. 즉 요소는 요소로 받은 정보를 서버로 제출하는 역할을 수행하며..

안녕하세요! 이번 포스팅에서는 시멘틱 요소에 대해 알아보려고 합니다. 프로그래밍에서 시맨틱은 주로 코드 블록(조각)의 의미를 나타내는데요! HTML에서는 똑같은 역할을 수행하는 요소들이 많지만 시멘틱 요소를 부여함으로 이 요소의 목적이나 역할을 금방 알 수 있게됩니다. 예를 들면 div, header(머리말), main, footer(꼬리말)은 비슷한 역할을 수행하지만 웹 페이지를 구성할때 div, div, div를 사용하는 것보다는 header, main, footer을 사용하는 것이 좀 더 깔끔하고 각 요소가 무슨 뜻인지 알 수 있어서 코드 수정에 용이할 것 같지 않나요? 이처럼 코드 수정 및 확인에 용이하다는 장점 말고도 시멘틱 마크업을 사용하면 다음과 같은 장점이 존재합니다. SEO, 검색 랭킹에..

안녕하세요. 이번 포스팅에서는 시멘틱 요소와 엔티티 코드에 대해 알아보려고 합니다. 다른 C, R, Python와 같은 프로그래밍 언어를 접해본적이 있다면 해당 프로그래밍에서는 변수명으로 사용할 수 없는 예약어들이 존재하는 것을 알고 계실텐데요. HTML에서도 예약된 문자(기호)들은 특수한 용도로 사용하고 있어서 해당 문자를 웹 페이지에서 나타내고 싶으면 다른 방법이 필요합니다. 이럴 때 사용하는 코드를 엔티티 코드(Entity Code)라고 하며 이러한 용도 외에도 저작권 기호, 다이아몬드, 십자가, 화살표와 같은 기호를 나타낼 때도 사용합니다. 예를 들면 ""와 같은 기호들은 태그를 구성하고 있어서 HTML에서는 예약어로 사용되고 있습니다. 하지만 ""와 같은 기호를 웹 페이지 내부에서 나타내야 하는..

안녕하세요~ 저번 포스팅에서는 블락&인라인 요소들에 대해 공부했었는데요. 이번에는 웹 페이지 내부에서 직접적으로 살펴볼 수 없지만 중요한 정보를 제공하는 요소에 대해 포스팅 해보려고 합니다. 그 동안은 내부에 사용하는 요소들을 살펴보면서 예시에 요소를 잠깐씩 보신 분들도 계실 거예요. 사실 요소 내부에 있는 요소들은 우리가 보는 웹 페이지에 직접적으로 나타지는 않아요. 그러면 도대체 왜 요소를 사용할까요? 그 이유는 요소는 HTML에 중요한 정보인 메타 데이터를 포함하는 요소이기 때문인데요. 주로 다른 요소들을 포함하는 컨테이너(container) 요소이며 , , , , 와 같은 요소들이 포함됩니다. 참고로 메타데이터는 데이터에 대한 데이터로 예를 들면 해당 포스팅은 한글로 작성되었어! 와 같은 것을 포..

그 동안 , , , , , 와 같이 많지는 않지만 중요한 요소들에 대해서 알아보았습니다. 아마도 공부하면서 눈치채신분도 계시겠지만 특정 요소는 사용하면 자동으로 줄을 바꾸는 경우가 있습니다. 의도하든 아니든 말이죠. 반면에 특정요소를 사용하고나서 줄을 바꿨으면 좋겠지만 그렇지 않은 경우도 있고요. 왜 그럴까요? 오늘은 요소에 내재된 디스플레이 옵션인 Block & Inline 요소에 대해서 공부해 보려고 합니다. 모든 요소는 "block level element"와 "inline level element"로 구분할 수 있습니다. 여기서 Block-level Elements는 요소를 사용하면 줄바꿈을 하며 크롬과 같은 브라우저가 자동으로 공간을 할당합니다. 따라서 Block-level 에서는 항상 브라우저..

안녕하세요. 이번 포스팅에서는 리스트에 대해 간단하게 올려보려고 합니다. 리스트는 그룹에 속한 내용들을 정리해서 올릴 때 효과적인데요! 예를 들면 목차, 목록들을 웹 사이트에서 표시할 때 사용할 수 있습니다. 주로 웹사이트에서는 다음과 같은 형태를 보셨을 겁니다 목차1 목차2 리스트는 , 요소로 구분할 수 있는데요. 요소는 unordered list의 약자로 순서가 없는 자료인 경우에 사용하며 총알 모양의 아이콘과 함께 정렬됩니다. 요소는 ordered list의 약자로 순서가 있는 자료인 경우에 사용하며 오름차순 카운터와 함께 정렬됩니다. 또한 , 요소는 데이터의 수만큼 요소를 중첩시켜서 사용해야 하는데요. 아마 아래 예시를 보는게 더 쉽게 이해할 수 있을 것 같습니다. 바나나 딸기 포도 A학점 B학점..

저번 포스팅에서는 이미지와 피비콘에 대해 알아보았는데요. 이번에는 간단한 테이블 생성에 대해 포스트해보려고 합니다. 테이블은 우선 크게 요소를 이용해 테이블 자체의 틀을 만들 수 있으며 요소를 통해 행을 나타냅니다. 또 행에서 데이터를 나타낼 때 표의 제목(헤더)라면 요소를, Table cell은 요소를 사용해 데이터를 표현할 수 있습니다. 즉 테이블을 만드려면 여러 요소들을 중첩(nest)해서 만들어야 하는 것이죠! (당연하게도 표시할 테이블에 헤더가 없다면 요소를 생략해도 됩니다..) table : 테이블 자체를 나타내는 요소 td : 셀에 들어가는 데이터를 나타내는 요소 tr : 테이블의 행을 나타내는 요소로 행수만큼 요소가 필요 th : 테이블의 헤더를 나타내는 요소 아래 코드를 참고하면 이해가 ..

저번 포스팅에서는 링크 요소에 대해서 알아보았는데요. 이번에는 이미지와 파비콘에 대해 포스트 해보려고 합니다. 이미지는 웹사이트에서 자주 사용되는 요소로 대부분의 웹사이트에서 이미지를 확인할 수 있습니다. 파비콘은 웹사이트의 아이콘으로 탭에 표시됩니다. 네이버에 접속하면 아래와 같은 아이콘이 보신적 있으시죠? 이런 아이콘을 파비콘이라고 합니다. 우선 이미지 요소의 사용법을 살펴보면 다음과 같습니다. src는 이미지의 URL 혹은 경로(path)를 지정하는 속성이고 alt는 네트워크 문제나, 이미지 파일이 존재하지 않는 경우 깨진 박스 아이콘과 함께 출력될 텍스트를 지정하는 속성입니다. 이미지의 URL은 이미지에 마우스 오른쪽를 클릭하면 위 사진과 같은 항목들이 표시되는데요. 이때 이미지 주소 복사를 선택..