DH의 개발 공부로그

애니메이션 웹사이트에서 메뉴바, 사이드바를 보면 위의 이미지 처럼 밑에 또는 뒤에 바가 애니메이션이 것을 많이 보셨을 겁니다. 그리하여 이번에는 CSS 애니메이션을 공부하고 정리할 겸 위의 이미지에 보이는 메뉴바 애니메이션을 만들어 보았습니다. HTML 메뉴를 만드는 방법은 여러가지의 방법과 다양한 태그로 만들 수 있지만 이번에 중요한 부분은 CSS이기 때문에 간단하게 nav와 div 그리고 애니메이션을 위한 span으로 구성을 하였습니다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 CSS 메뉴바 애니메이션에서 가장 중요한 부분이 바로 CSS입니다. 우선 메뉴들을 옆으로 나열해주기 위해서 flex를 사용하였습니다. nav { position: relative; // 애니메이션을 위한 기준 display: fle..

웹페이지 작업을 하다보면 말줄임(...)이 필요한 상황이 있습니다, 말줄임을 통해서 해당 길이 더 길고 지금은 생략이 되어있다는 것을 표시할 수 있기 때문입니다. 이번에는 CSS를 이용해서 텍스트의 말줄임 표시를 하는 방법을 알아보겠습니다. 1. 한 줄에서 텍스트 말 줄이기 우선 말 줄임을 적용하려면 블록 요소여야 합니다. 인라인 요소는 가로 너비를 가질 수 없기 때문에 말 줄임을 적용을 하려면 블록 요소로 바꿔줘야 합니다. 또한 한 줄일 때 말 줄이기를 하고 싶으면 white-space: nowrap이 적용이 되어야 합니다. 해당 속성이 없으면 띄어쓰기가 있을 때 너비를 넘으면 자동으로 글자가 넘어가기 때문에 이러한 상황을 방지하기 위해 white-space: nowrap 적용해주어야 합니다. 다음 아..

블록(block) 요소 안에 이미지를 넣었는데 하단 여백이 생기는 특이한 점을 발견하였습니다. 너무 궁금해서 찾아 본 결과 원인은 이러했습니다. 이미지 태그는 인라인(inline) 속성이고 인라인 속성의 텍스트, 또는 이미지 콘텐츠는 콘텐츠들이 정렬되는 기준 선이 있습니다. 인라인 요소의 기본 설정 기준선 값은 베이스라인(baseline) 입니다. 베이스라인은 문자(알파벳 기준)가 얹히는 기준 바닥을 말하며, 영어에서 g, j, p, q와 같은 꼬리가 있는 문자들은 베이스라인 밑으로 꼬리가 내려가 걸쳐집니다. 그러다 보니 베이스라인의 기준에서는 블록 요소 안에 이미지만 있더라도, 보이지 않는 문자를 대비하기 위해 위와 아래에 공간을 만들어 두는 것입니다. 이러한 문제의 해결방법은 다음과 같은 방법들이 있..

a 태그 'a' 태그는 anchor의 약자로 하이퍼링크를 설정하는 태그입니다. 인라인 요소이며, a 태그를 작성하면 링크를 의미하는 밑줄로 표기가 되며 그 기본 색상은 파란색입니다. 속성 설명 주요 값 href 하이퍼링크 URL 하이퍼링크 외 전화번호(tel), 이메일주소(mailto)도 기입이 가능하며, 대신 href의 값을 ""의 형태로 비워두지 않아야 하고 href="#"의 임시 링크 기호로 대체 표기 할 수 있습니다. target 링크된 URL 이동 방법 지정 - "self" : 현재의 브라우저에 열기 속성 값 - "blank" : 새창으로 열기 속성 값 a태그의 링크를 정확히 설정하려면 우선 절대 경로와 상대 경로를 알아야 합니다. 1. 절대 경로 절대 경로는 변하지 않는 주소로 쉽게 말해 우리..

ol, ul, li 리스트 태그 리스트를 표현할 수 있는 태그로, html 문서에 많이 사용되는 태그들 중에서도 많이 사용되는 태그라고 할 수 있습니다. 우선 'ol' 태그는 순서가 있는 리스트를 표현하는 태그이며, 'ul' 태그는 순서가 없는 리스트를 표현할 때 사용하는 태그입니다. 'li' 태그는 ol과 ul 내에 사용되는 태그로 항상 ol 또는 ul과 함께 사용돼야 하며, 둘 중 하나만 사용할 수는 없습니다. 그리고 ol과 li 또는 ul과 li 사이에는 다른 태그가 올 수 없지만 li 태그 안에는 다양한 다른 태그를 작성할 수 있습니다. 감자를 1/4 크기로 자른다. 부드러워질 때까지 15분~20분 동안 소금물에 서서히 끓인다. 감자의 물을 따라 내고 으깬다. 우유, 버터, 육두구를 데운다 우유 ..

시맨틱 마크업 Semantic Markup 시맨틱(Semantic)이란 ‘의미론적인’의 뜻을 가지고, 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말합니다. 즉 시맨틱 마크업은 작업에 있어서 태그들이 의미를 잘 전달 할 수 있도록 문서를 작성하는 것을 말합니다. html5에 시맨틱 웹을 위해 관련 태그들이 제공됩니다. 시맨틱 웹을 위한 태그 설명 header 말그대로 문서의 헤더영역을 의미합니다. 페이지의 머리글, 제목, 로고, 메뉴, 검색 관련, 유틸, 작성자의 이름 등등으로 구성합니다. nav 페이지의 내비게이션 영역. (사이트 내, 외부로 이동). 메뉴, 목차, 색인 등등 main 메인 컨텐츠 영역. 문서 내에서 *반드시* 한 번만 사용합니다. 다른 header, footer, n..

제목 태그 h1, h2, h3, h4, h5, h6 일단, h는 heading의 약자로 html문서의 제목이나 부제목 등을 나타낼 때 사용이 됩니다. 6단계로 수준을 나눌 수 가 있으며, 제목 숫자가 낮은 h1이 가장 높은 레벨의 태그입니다. 폰트 사이즈의 차이가 존재하는데 현업에서는 웹브라우저의 호환성을 위해, 태그에 표현 서식을 모두 삭제하고 css 스타일에서 별도로 적용을 해서 사용을 합니다. 텍스트의 문단을 정의하는 요소입니다. p는 블록 요소이며 여러 문단을 나누어 줍니다. ↓ HTML 삽입 미리보기할 수 없는 소스 줄바꿈 태그 br br 태그는 텍스트안에 줄바꿈을 해주는 태그로, 빈 요소이며 열린 태그로 종료태그가 존재하지 않습니다. br태그는 인위적인 여백을 만들기 위해 사용하지 않으며 꼭 ..

HTML이란? HTML(HyperText Markup Language)은 HTML은 프로그래밍 언어는 아니고, 컨텐츠의 구조를 정의하는 마크업 언어입니다. 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML5 기본 템플릿 이해하기