2025/02 18

HTML - 프레이징 요소

프레이징 요소는 문장 내에서 사용할 수 있는 요소들을 말한다.볼드체, 이텔릭체, 밑줄, 취소선 이런 요소들을 말한다.  같은 인라인 요소 안에서 사용 가능하며 대부분이 텍스트의 의미를 강조하는 역할을 담당한다. 강조 요소 : '강한 중요성'을 가진 내용을 위한 것, 텍스트 내에서 아주 중대하거나 긴급한 내용을 포함한다. <strong>과 <b> 비교 문장안에서 <strong>은 매우 중요한 내용임을 나타낸다. 문장안에서 <b>는 단순히 굵은 글씨를 나타낸다. 또 다른 프레이징 요소인 와 비교해 봤다. 과 는 단순히 봤을 때는 굵은 글씨로 보이지만 은 구조적으로 중요한 의미를 가지고 있는 요..

Coding/HTML & CSS 2025.02.21

HTML - 정의형 목록

definition list를 의미하는 은 자식요소로 definition term, definition description을 갖는다. 사전이나 설명서, FAQ, 용어집 같이 글로 무언가를 표현할때 사용한다.  태그를 사용하면 문서 구조상 해당 컨텐츠가 설명형 목록임을 알 수 있고 웹 접근성을 요구하는 스크린리더 프로그램이 해당 컨텐츠가 설명 목록임을 알 수 있기 때문에 웹 표준을 준수하기 위해 사용해야한다.   HTML 웹 문서의 구조를 정의하는 마크업 언어 CSS 웹 문서의 스타일을 정의하는 스타일시트 언어 JavaScript 웹 문서의 동작을 정의하는 프로그래밍 언어  안에는 와 순서로 사용해야하며 복수로 사용 가능하다. , 이..

Coding/HTML & CSS 2025.02.20

HTML- 순서형 비순서형 요소

우리가 글을 쓸 때 어떤 순서에 따라 내용을 나열해야 할 때 1. 2. 3. 이런 식의 방식을 사용한다.HTML은 ordered list라는 태그를 사용하며 순서형 요소라고 부른다. 그 외에도 - * • 이런 다양한 기호들을 사용해서 중요한 내용을 나열하기도 한다.HTML은 unordered list이라는 태그를 사용하며 비순서형 요소라고 부른다.  두 태그 모두 어떤 내용을 나열하기 위해 사용하며 내부 요소로 라는 태그를 갖는다. list item이라는 의미를 갖는 자식 요소 는 부모 요소에 따라 다르게 나타난다. 순서형 HTML CSS JavaScript 비순서형 HTML CSS JavaScript  순서형 요소는 자식요소를..

Coding/HTML & CSS 2025.02.19

HTML - anchor 요소

HTML의 요소는 현재의 페이지에서 다른 페이지로 이동하기 위해 사용하는 요소이다. 우리가 흔히 말하는 링크를 만들 수 있는 대표적인 요소다.  인라인 요소로 작용하는 태그는 href 속성과 같이 써야 온전하게 쓸 수 있다.href는 링크를 클릭했을때 보내고 싶은 엔드 포인트를 작성해줘야 한다. 태그 사이에는 엔드포인트를 명시적으로 작성해야한다.W3Schools HTML Tutorial페이지 상단으로 이동cdh0283@gmail.com 메일보내기전화걸기 기본적으로 웹사이트 URL을 작성하면 그 주소로 이동한다. #을 작성하거나 #top를 작성하면 현재페이지의 최상단으로 이동하게 된다.mailto:(메일주소)를 작성하면 outlook이나 메일을 보낼 수 있는 어플리케이션이 동작된다.tel:(전화번호)를..

Coding/HTML & CSS 2025.02.18

HTML - 이미지와 피겨 요소

HTML에서 는 이미지를 넣기 위한 태그이다. 가장 많이 쓰는 요소 중에 하나이며 인라인 블록 레벨을 갖는다. 기본적으로 이렇게 사용한다. 이미지 태그를 사용할 때 반드시 포함되어야 하는 속성이 src와 alt이다.src는 보여지는 이미지의 경로를 의미한다. 외부의 이미지 주소를 넣을 수도 있고 혹은 컴퓨터에 저장된 이미지 경로를 넣을 수도 있다.alt는 이미지를 대체하는 텍스트이다. 만일 이미지가 보이지 않는 상황에서 alt에 작성한 텍스트가 보일 수도 있다. 하지만 유의할 점이 있는데 alt는 단순하게 작성해서는 안된다.  무슨 말이냐면 이런 이미지를 넣고 alt를 작성한다고 가정해 보자 단순하게 생각하면 '케이크 사진', '여러 가지 케이크', '케이크 소개' 이런 문구를 생각할 수 있을 것이다. ..

Coding/HTML & CSS 2025.02.18

HTML - 헤딩 요소와 단락 요소

HTML 문서를 만들게 되면 주로 작업하는 공간은 태그 사이이다. 실질적으로 보이는 부분이기 때문이다.현재 우리는 HTML5로 작성된 웹페이지들을 보고 있다. ~ HTML에서 텍스트 혹은 이미지를 제목의 의미로 사용하고 싶을 때 사용한다. 은 대제목 는 소제목 순서로 까지 순차적으로 중요도가 낮아진다.의 경우 HTML을 대표하는 제목의 역할을 하기 때문에 해당 문서에서 1번만 사용할 것을 권장한다. 그 외의 요소들은 HTML 구조에 따라 중복으로 사용할 수 있을 것이다. 하지만 순서를 건너뛰는 것은 권장하지 않는다.그렇게 한다면 구조적으로 맞지 않기 때문이다. 마치 챕터를 건너뛰는 책은 없듯이. 문단은 태그를 사용해서 나타낸다. 문단이라는 의미를 가지고 있기 때문에 나 같은 요소를 포함 할 수 없다...

Coding/HTML & CSS 2025.02.17

HTML 시멘틱하게 생각해보기

시멘틱 마크업(Semantic Markup)란? 시멘틱 마크업이란 HTML 요소가 의미(의도)를 가지도록 구성하는 것을 의미한다. 즉, 단순히 디자인이나 레이아웃을 위한 마크업이 아니라, 콘텐츠의 의미를 명확하게 전달할 수 있도록 HTML 태그를 사용하는 것을 말한다. 시멘틱 마크업 요소  : 머리말 (로고, 사이트 소개, 내비게이션 포함 가능) : 내비게이션 (메뉴) : 문서의 주요 콘텐츠 : 주제별 콘텐츠 구분 : 독립적인 콘텐츠 (블로그 글, 뉴스 기사 등) : 부가 정보 (사이드바, 광고 등) : 바닥글 (저작권, 연락처 등) 해당 내용을 HTML로 구현해봤다.카페 W를 가까이에서 경험해보세요.고객님과 가장 가까이 있는 매장을 찾아보세요!차별화된 커피 경험을 누릴 수 있는 리저브 매장 다양한 방..

Coding/TIL 2025.02.13

HTML

HTML (HyperText Markup Language)하이퍼텍스트 마크업 랭귀지, 흔히 생각하는 코딩을 하기 위한 프로그래밍 언어는 아니고 우리가 매일 접하는 인터넷 사이트의 웹페이지가 어떻게 구성되어 있는지 브라우저가 읽을 수 있도록 정리된 언어이다. 정리하면 인터넷 사이트는 HTML로 작성된 문서를 하나의 책처럼 묶어놓은 형태이며, 브라우저는 그 문서를 우리들이 이해할 수 있는 방식으로 번역해 주는 도구라고 생각하면 된다. HTML은 element(요소)들의 노드 혹은 트리구조를 가지며 상속관계로 표현되어 나타나게 되며 이 요소라는 것들은 흔히 라는 표현을 사용한다. HTML/CSS HTML 기본 구조  모든 HTML문서의 시작 부분에 작성되며 해당 문서의 규..

Coding/HTML & CSS 2025.02.12