문자셋(Character set)이란? 웹 브라우저가 HTML 문서를 정확하게 나타내기 위해서는 어떠한 문자셋으로 저장되었는지 알아야합니다. HTML4에서 UTF-8의 경우 : HTML5에서 UTF-8의 경우 : 위 예시는 HTML문서가 UTF-8 문자셋을 사용하여 저장되었음을 알려줍니다. 종류 대표적으로 사용되는 문자셋(character set)은 아래와 같습니다. 1. ASCII : 가장 처음 만들어진 문자셋으로, 인터넷에서 사용할 수 있는 127개의 영문자와 숫자로 이루어져 있습니다. 2. ANSI : 윈도우즈에서 만든 문자셋으로, 총 256개의 문자 코드를 지원합니다. 3. ISO-8859-1 : 256개의 문자 코드를 지원하는 HTML4의 기본 문자셋입니다. 4. UTF-8 : 세상에 있는 거의..

엔티티(Entity)란? HTML에는 미리 예약된 몇 가지의 문자가 있습니다. 이러한 문자를 예약어라 하며 HTML 코드에서 사용하게 되면 웹 브라우저에서는 그것을 다른 의미로 해석하여 보여줍니다. 예제를 통해 엔티티를 사용하여 " " 큰 따움표를 만들어 보겠습니다. "큰따움표입니다" 대표적으로 사용하는 엔티티 엔티티 문자 엔티티 이름 설명 줄 바꿈 없는 공백 > 보다 큰 & & AND 기호 " " 큰 따움표 ' ' 작은 따움표 그밖에도 발음 구별부호, 심벌 또는 특수문자 등도 엔티티를 사용하여 표현할 수 있습니다. 다양한 엔티티(Entity)를 사용하고 싶으시면 구글검색 콘솔에 Entity 또는 엔티티라고 검색하시면 다양한 엔티티에 관한 사용방법이 나와있으니 참고해 주세요.!

요번에는 회사정보나 사이트의 정보를 표기하는 공통 푸터부분을 만들어 보도록 하겠습니다. 만들 디자인은 아래와 같습니다. 간단한 연락처와 주소 그리고 copy부분을 작성하였습니다. html에 태그 작성하기 먼저 앞 포스팅에서 만들었던 소스 하단부위에 푸터영역을 추가해 주도록 하겠습니다. 아래와 같이 코드를 작성하였습니다. 회사소개 광고채널 파트너스 포트폴리오 고객센터 CUSTOMER CENTER TEL : 02-1234-5678 FAX : 02-1234-5678 EMAIL : keyup@keyup.co.kr (주)셀프 KEYUP | 대표이사 : 홍길동 | 사업자등록번호 : 123-45-4561 | 주소 : 서울 강남구 테헤란로1길 123, 1층 | 운영시간 : 09:00~18:00 | 휴무일 : 주말 및 ..

주석(Comment) 주석이란 개발자가 html 문서를 작성하면서 이해를 돕는 설명이나 디버깅을 위해 작성한 구문입니다. 이러한 주석은 다른 코드와는 달리 웹브라우저에서 보이지 않습니다. 주석을 표현하는 방법은 아래와 같습니다. HTML 주석의 시작은 에는 (!)가 없습니다. 주석은 HTML 어느 부분에서라도 사용될 수 있습니다. 이 주석을 통해 긴 HTML문서를 구별하여 정확하게 인식할 수 있게 합니다. 홍길동 본문의 내용및 개발된 내용입니다. 위 예시처럼 주석은 웹페이지에서 나타나지 않습니다. HTML의 주석을 보고 싶으시면 HTML문서를 확인하거나 개발자도구(f12)를 통해 소스보기를 하여 확인할 수 있습니다.

이번 포스팅에서는 공통 header 부분의 로고와, 클릭하면 펼쳐지는 nav 영역을 만들어 보려합니다. 먼저 아래의 이미지를 보시겠습니다. 위와 같이 네이베이션을 클릭하면 펼쳐지며 랜딩페이지의 메뉴가 보여지는 형태의 작업입니다. 어떻게 구현해야 할까요?? html에 태그 작성하기 먼저 앞서 준비된 소스에 추가로 header 영역의 태그를 입력해 주려합니다. 회사소개 광고채널 파트너스 포트폴리오 고객센터 에 class 명을 header라 주고 안쪽 태그들에게도 각각 logo, nav_btn 클래스를 주어 태그들의 이름을 정해 주었습니다. 이 class의 이름들을 이용하여 css와 js를 이용하여 네비게이션이 작동되도록 해볼 것 입니다. CSS 작성하기 위 작성된 html 의 클래스 명을 기반으로 css로 ..

인용구 HTML에서 인용구를 표현하는 방법은 짧은 인용구, 블록인용구 두 가지로 나뉩니다. 짧은 인용구 짧은 인용구는 태그를 사용하여 표현할 수 있으며, 자동으로 앞뒤에 큰따옴표를 표시합니다. 인용구의 짧은 이용구르 표시하는 방법 입니다. 블록 인용구 길이가 긴 인용문은 태그를 사용하여 표현할 수 있습니다. 태그는 이러한 인용 부분을 단락으로 구분하여 표현합니다. 블록인용구란? 길이가 긴 인용문을 별도의 단락으로 구분하여 사용하는 태그입니다. 축약형 표현 축약형을 표현하기 위해서는 태그를 사용합니다. 태그 위에 마우스를 올리면 title 속성에 명시한 용어의 내용이 표현됩니다. 마우스를 올려보세요 태그를 이용하여 표현된 내용이 보이실 겁니다. 주소 표현 태그는 HTML에서 주소를 표현할 때 사용합니다. ..

2023.08.30 - [무작정 따라하기] - 무작정 따라하기 (랜딩페이지) Step.01 무작정 따라하기 (랜딩페이지) Step.01 HTML, CSS, javascript 에 관한 기초 지식이 없으시면 이전 글을 한번 보신 후 어느정도 이해하시고 진행하시는 것을 추천드립니다. 2023.08.25 - [Web/html] - 01.HTML의 개요 01.HTML의 개요 HTML은 웹 페이지를 selfda.life 이제부터 앞 글에서 보여준 디자인을 토대로 코딩을 진행해 보겠습니다. 피그마를 통해 디자인 파일을 올려두었습니다. https://www.figma.com/file/idk8NTy07wq9iUvKTboupH/design001?type=design&node-id=0%3A1&mode=design&t=js..

HTML은 텍스트에 다양한 효과를 주는 여러 태그를 제공합니다. 굵은글씨 HTML문서에서 텍스트를 굵은 글씨로 표현하고 싶을 때에는 또는 태그를 사용합니다. 굵은글씨에요 중요한 굵은글씨에요 태그는 단순하게 굵은 글씨를 표현합니다. 태그는 굵은 글씨를 표현함과 동시에 내용이 중요하다는 의미 또한 함께 포함합니다. 기울림(이탤릭체) 이탤릭체를 표현하고 싶을 경우 태그 또는 태그를 사용하여 표현합니다. 이탤릭체로 표현했어요! 중요한 이탤릭체로 표현했어요! 태그는 단순하게 텍스트를 이탤릭체로 표현합니다. 태그는 이탤릭체를 표현함과 동시에 내용이 중요하다는 의미 또한 함께 포함합니다. 검색엔진에서 태그와 태그를 사용하면 더 중요한 내용으로 인식합니다. 하이라이팅 태그는 텍스트의 하이라이트 효과를 적용 시킵니다. ..

HTML, CSS, javascript 에 관한 기초 지식이 없으시면 이전 글을 한번 보신 후 어느정도 이해하시고 진행하시는 것을 추천드립니다. 2023.08.25 - [Web/html] - 01.HTML의 개요 01.HTML의 개요 HTML은 웹 페이지를 만드는 데 사용하는 마크업 언어이며 매우 쉽게 배울 수 있습니다. Html에 들어가는 이미 정의된 태그와 속성을 통해 쉽게 하실 수 있습니다. html을 시작해 보겠습니다. 준비된 selfda.life 하지만 걱정 마세요!! 아무런 지식이 없더라도 그대로 따라하시기만 하면 됩니다. 직접 디자인한 랜딩페이지를 처음부터 코딩하는 것을 보여드리기 위하여 급하게 디자인을 하였습니다.! 급하게 만든 디자인이라 다소 엉성할 수 있으니 이부분은 양해 부탁드려요. ..

단락(Paragraph)이란 내용을 끊어 구분할 수 있는 하나하나의 부분을 의미합니다. HTML에서는 라는 태그를 이용하여 이러한 단락을 표현합니다. 단락의 내용입니다. 띄어쓰기와 줄 내림 HTML 코드에서 띄어쓰기나 줄 내림을 여러 번 하더라도 웹 브라우저를 통해 나타나는 화면에는 영향이 없습니다. 여러 번의 띄어쓰기는 오직 한번의 띄어쓰기로만 인식하게 됩니다. 첫번째 줄입니다. 두번째 줄입니다. 과연 그대로 보여질까요? 저희는 위 소스를 통해서 첫번째 줄입니다. 두번째 줄입니다. 과연 그대로 보여질까요? 이와 같이 출력되기를 원하게 되실 겁니다. 하지만 실제로는 첫번째 줄입니다. 두번째 줄입니다. 과연 그대로 보여질까요? 이와 같이 보여지게 됩니다. 그렇다면 어떻게 해야 내가 원하는 방향으로 내용을 ..