줄바꿈이 존재하는 텍스트 데이터를 그대로 출력하고 싶었는데, div, p 태그 안에 넣어도 줄바꿈이 되지 않았다. 관련해서 검색 중 pre 태그에 대해 알게 되었다. 태그는 미리 정의된 형식의 텍스트를 정의할 때 사용한다. 또한 텍스트에 사용된 여백과 줄바꿈이 모두 그대로 브라우저 화면에 나타난다. MDN text1 text1 text2 div와 pre태그 안에 같은 텍스트를 입력했더라도, 다른 view가 출력된다. See the Pen Untitled by sally (@sally0) on CodePen. 또한 pre 태그는 내부에 있는 글을 “그대로”보여주는 특징이 있어, width가 넘어가도 줄바꿈이 되지 않는다. 이때는 pre 태그 css에 white-space: pre-wrap를 추가해준다. (..
Front-end/HTML
목록 리스트 태그들을 알아보자. 리스트 태그에는 ul, ol, li, dl, dt, dd 태그가 있다. 짝에 맞게 순서대로 살펴보자!🧞♂️ ul,ol,li tag , ul태그는 순서가 없는 목록을 만들 때 사용하며, ol태그는 순서가 있는 목록을 만들 때 사용한다. li태그는 ,내부에 들어가는 요소를 의미한다. HTML CSS JavaScript dl,dt,dd tag dl태그는 제목과 설명이 한 쌍인 설명 목록을 만들 때 사용한다. , dt태그는 제목을 표시하며, dd태그는 설명(내용)을 표시한다. 🍎사과 사과는 빨간색이다. 🍊오렌지 오렌지는 주황색이다. 지금까지 리스트 태그의 종류는 ul, ol에 li 요소 태그밖에 없는 줄 알았는데, 시멘틱 태그를 공부하게 되면서, 리스트 태그를 다시 살펴보다가,..
시맨틱 태그의 semantic은 ‘의미의’, ‘의미론적인’이라는 뜻을 가진형용사를 말한다. 따라서, 시맨틱 태그란 의미가 있는 태그를 말한다. 예를들어 는 의미없이 단순히 텍스트를 굵게 표현하는 태그지만, 은 중요하다는 의미를 지닌 태그다. 은 중요하다는 의미에 맞춰 브라우저에 의해 굵은 스타일로 표현된 것이다. 따라서 "중요하다"는 의미를 포함하고 싶을때는 가 아닌 을 사용하는 것이 적절하고 시맨틱한 마크업이라고 할 수 있다. 이렇게 의미있는 태그를 사용하면 다음과 같은 장점을 가질 수 있다. 1.검색엔진최적화(SEO) 검색엔진은 HTML코드 만으로 그 의미를 인지하는데 이때 시맨틱 요소를 해석할 수 있다. 시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미있게 문서정보를 전달할 수 있다. 2..
