HTML 12

STYLE - 색(Color)

HTML 색 표현하기 HTML에서 색을 표현하는 방법은 3가지의 방법이 있습니다. 1. 색상이름을 표현하기3. 16진수 색상값을 표현하기 2. RGB 색상값을 표현하기 색상을 이름으로 표현 aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow 예제 글자에 파란색 색상을 표현 글자에 녹색을 표현 글자에 빨간색을 표현 색상을 RGB로 표현 스크린은 RGB(빨간색, 녹색, 파란색)을 혼합하여 색을 표현합니다. HTML에서도 위와 같은 3가지 색을 표현하는 RGB를 사용합니다. 예제 RGB 파란색 표현 RGB 녹색 표현 RGB 빨간색 표현 16진수로 색상을 표현 16진수색상은 RGB를 각각 16진수..

Web/html 2023.11.08

HTML 요소 - 스타일(Style)

HTML Style HTML 요소의 Style을 사용하게 되면 css스타일을 html 요소에 직접 설정할 수 있습니다. 그러나 이러한 방법으로 적용시에 오직 단하나의 html 요소에만 스타일을 적용하게 됩니다. 예시 : 글자색 변경 Style속성을 사용하여 글자의 색을 변경하는 예시입니다. 글자를 Red칼라로 예시 : 배경색 변경 Style속성을 사용하여 배경의 색을 변경하는 예시입니다. 배경색을 검은색으로 예시 : 글자 크기 변경 Style속성을 사용하여 글자의 크기를 변경하는 예시입니다. 폰트사이즈를 20px로 예시 : 문단 정렬 변경 Style속성을 사용하여 문단의 정렬를 변경하는 예시입니다. 글자를 가운데 정렬로 예시 : 다중 스타일 적용 Style속성을 다중으로 사용하여 한번에 여러 스타일을 적..

Web/html 2023.11.08

무작정 따라하기 (랜딩페이지) Step.04

요번에는 회사정보나 사이트의 정보를 표기하는 공통 푸터부분을 만들어 보도록 하겠습니다. 만들 디자인은 아래와 같습니다. 간단한 연락처와 주소 그리고 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 | 휴무일 : 주말 및 ..

HTML 요소 - 주석편

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

Web/html 2023.09.08

HTML TEXT요소 - 인용구

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

Web/html 2023.09.01

HTML TEXT요소 - 서식편

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

Web/html 2023.08.31

HTML TEXT요소 - 단락편

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

Web/html 2023.08.30

HTML TEXT요소 - 제목편

HTML은 제목으로는 다양한 크기의 태그를 통해 표현합니다. 가장 큰 태그부터 가장 작은 태그까지 다양한 크기로 표현하실 수 있습니다. 제목1의 크기 제목2의 크기 제목3의 크기 제목4의 크기 제목5의 크기 제목6의 크기 이런 태그는 제목의 기능으로 중요한 역할을 하며 그외 기능을 수행하고 있습니다.. 여러 검색엔진은(SEO) 각 웹 사이트의 내용을 바로 이 태그를 이용하여 키워드를 수집합니다. 따라서 HTML 문서에 포함되는 제목은 태그로 작성해야만 검색엔진에 의해 제대로 검색될 확률을 높일 수 있습니다. 검색엔진에 사용하는 이라는 metadata와는 다른 요소입니다.

Web/html 2023.08.30

04.HTML 구조(요소)

HTML 요소는 여러가지의 속성을 가질 수 있으며, 이러한 속성은 해당 요소에 대한 추가적인 정보를 제공하게 됩니다. HTML 요소는 시작 태그로 시작해서 종료 태그로 끝납니다. 속성은 HTML 요소 중에서도 언제나 시작 태그 내에서만 정의되며, 속성 이름과 속성값으로 표현됩니다. 속성명은 언제나 소문자로 작성 HTML5 표준에서는 속성 이름에 대소문자를 구분하지 않고 있습니다만, W3C에서는 속성 이름을 사용할 때 될 수 있으면 소문자로 작성하도록 권장하고 있습니다. 속성값은 언제나 따옴표로 HTML5 표준에서는 속성값에 따옴표 사용을 강제하지 않습다만, 속성값을 따옴표로 감싸지 않으면, 상황에 따라 오류가 발생할 수 있습니다. 사용예제 파란색 빨간색 글씨 크기 20px p : 태그이름 style : ..

Web/html 2023.08.29

03.HTML의 구조(기본)

제목 1 입니다. 제목 2 입니다. 제목 3 입니다. 본문 단락입니다. 위 문서는 HTML의 기본적인 구조입니다.저희가 코딩을 하기 위해서는 기본적인 구조를 이해하고 각 상황에 맞는 태그를 활용하여 코드를 정의하여야 합니다.  : 문서가 HTML5 임을 명시합니다.  : HTML 문서의 루트(root) 요소를 정의합니다. : HTML 문서의 metadata를 정의합니다.metadata(메타데이터)란?HTML 문서에 대한 정보이며, 브라우저에는 직접적으로 표현되지 않습니다., , , , 등의 태그들을 이용하여 문서의 제목, 스타일 등을 지정 할 수 있습니다. 은 브라우저의 툴바(toolbar)에 표시되며, 검색 엔진의 결과, 즐겨 찾기 등의 제목이 됩니다.: 브..

Web/html 2023.08.27