본문 바로가기

html

 (8)
(CSS) 무한하게 흐르는 텍스트 바 만들기, animation 바 내부에 텍스트를 무한하게 흐르는 효과를 내고 싶다면 key frame을 사용하면 된다.  1.  HTML 세팅컨테이너 역할을 할 div를 만들고, 그 안에 p태그로 흐를 텍스트를 준비한다. 이때 텍스트는 어느정도 길게 만들어야 애니메이션을 적용할때 끊이지 않고, 무한으로 흐르는 것처럼 보인다. SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE ..
(CSS) position : absolute로 요소 정중앙에 위치 시키기 특정 요소를 absolute로 위치시킬 때, 부모 요소 기준으로 정중앙에 위치시키고 싶을 때가 있다.  이때 top과 left를 각각 50%를 주면 정중앙에 올 것이라고 생각하기 쉽다.  하지만 실제 적용시켜 보면 정 중앙에 오지 않는다.   See the Pen position : absolute로 요소 정중앙에 위치 시키기(before) by 김다영 (@xnpzlttb-the-solid) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스   이는 top과 left 등이 요소 왼쪽 상단 모서리를 기준으로 하기 때문이다.  따라서 위처럼  top과 left를 각각 50%를 주면 왼쪽 상단 모서리가 정중앙에 위치하..
(HTML, CSS) <input type = "button">과 <button>차이 , 버튼에 아이콘이 안 나오는 이유 으로 버튼을 만들고, 그 안에 font awsome의 i태그를 넣어 버튼 안에 아이콘을 넣어보고자 했다. 근데 아무리 해도 아이콘이 나오질 않았다. 처음에는 오타 때문인 줄 알았는데 다름 아닌 를 사용했기 때문이다. 를 으로 바꾸고 나니 아이콘이 아주 잘 나왔다. 와 의 차이 는 중첩된 태그를 지원하지 않는 독립적인 개체다. 따라서 태그를 안에 넣었을 때 읽어낼 수 없다. 따라서 버튼 안에 다른 요소를 넣고 싶다면 가 아닌 을 써야 한다.
(CSS 선택자 1편) pseudo selector란? html 요소를 css로 꾸며주려면 정확히 어떤 html요소를 꾸밀지 알아야 한다. 이렇게 html 요소를 선택하는 하는 것을 css selector(선택자)라고 한다. id나 class도 선택자 중 하나다. 그 외에도 combinator(결합 선택자), attribute(속성 선택자), pseudo element(의사 클래스, 의사요소)가 있다. 이번 포스팅에서는 이 중에서 pseudo element(의사 클래스, 의사요소)를 다룬다. id와 class는 아래 포스팅에서 다루었다. id와 class의 차이점과 사용방법 앞서 html 태그는 아래와 같은 구조로 구성되어 있다고 언급한 적 있다. content 오픈 태그 안에는 속성(attribute)을 추가할 수 있다. 속성이란 사용자가 원하는 기준에 맞..
id와 class의 차이점과 사용방법 앞서 html 태그는 아래와 같은 구조로 구성되어 있다고 언급한 적 있다.  content   오픈 태그 안에는 속성(attribute)을 추가할 수 있다. 속성이란 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값이다.이번 포스팅에서는 속성 종류 중 하나인 id와 class를 설명한다. 만약 속성의 종류에 뭐가 있는지 궁금하고, 어떻게 사용하는지 궁금하면 아래 사이트에 자세히 나와있다. HTML 특성 참고서 - HTML: Hypertext Markup Language | MDNHTML의 요소들은 특성을 가지고 있습니다. 특성은 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값을 말합니다.developer.moz..
HTML block태그, inline태그 차이 html 태그는 크게 block 태그, inline 태그으로 나뉜다. block 태그 block 태그 종류 : h1~h6, div, ol, ul, li, p, form 등 block태그는 옆에 뭐가 오지 않는다. 자동으로 줄바꿈이 된다는 뜻이다. block 태그는 높이(hight)와 너비(width)를 지정할 수 있으며, 여백과 관련된 3가지 속성을 가진다. Margin : 경계(border) 바깥 공간 Border : 경계 Padding : 경계(border) 안쪽 공간 inline 태그 block 태그 종류 : a, b, img, input, strong, span, br, button 등 inline태그는 줄바꿈이 되지 않는다. 그래서 inline 태그들은 여러개 작성해도 같은 라인에 출력된다. i..
HTML 기본 구조 여기에 웹페이지에 표시할 콘텐츠(태그)를 입력해주세요 : 문서 형식 선언 문서의 내용이 시작되기 전에 해당 문서가 어떤 마크업 언어 형식으로 작성되었는지를 명시하는 태그 !DOCTYPE 뒤에 html을 적은 것은 이 문서가 html로 작성되었다고 알리는 것 : 인코딩 파일과 웹 브라우저의 인코딩 방식을 통일해 깨짐을 방지하는 태그 : 문서 정보 전달 브라우저에게 문서의 정보를 전달하는 태그. 웹 브라우저 화면에 표시될 콘텐츠를 나타내는 것은 아니지만, 웹페이지의 품질에 영향을 주는 중요한 정보들. 중요 : head 에 넣는 정보는 웹상에 보이지 않는다 : 문서 제목 여기에 입력한 제목은 웹 브라우저의 탭 메뉴에 표시된다. : 화면에 표시되는 콘텐츠 웹 브라우저 화면에 표시될 콘텐츠를 입력하는 태그 중요 ..
HTML, CSS이란? HTML (Hyper Text Markup Language) 웹 페이지를 만드는 컴퓨터 언어 Hyper Text : 문서 내부에 다른 문서로 연결되는 참조를 넣어 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트 링크를 통해 한 페이지에서 다른 페이지로 뛰어넘는 비순차적 접근법을 표현함 Markup Language : 문서를 구조적으로 표현해내는 언어 HTML은 마크업 언어를 통해서 정보를 본문, 제목, 주소 등으로 구조적으로 표현 가능 브라우저는 HTML을 읽어들이고 그것을 표시에 우리에게 보여줌 정보는 태그(Tag)를 통해 표현됨. 태그는 꼬리표를 뜻하며 정보를 구조적으로 나누는 역할을 함 태그의 구조는 기본적으로 content 첫번째 태그를 통해 시작을 알리고 /가 포함된 태그를 통해 끝을 알림..

티스토리툴바