본문 바로가기

분류 전체보기155

[HTML] 데이터 속성 사용하기(data attribute) Data 속성 HTML5부터 데이터 속성이라는 개념이 추가되었는데 HTML 요소의 'data-'로 시작하는 속성이다. 이러한 데이터 속성은 특정한 데이터를 DOM 요소에 저장해두기 위함이 목적이다. 데이터 속성은 'data-'로 시작해야하면, 브라우저는 이러한 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에 개발자는 요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다. data-*전역 트성은 사용자 지정 데이터 특성(custom data attributes)라는 특성 클래스를 형성할 수 있다. data-value 속성은 임의로 만들어진 사용자 지정 데이터이기 때문에 value속성과는 상관이 없다. 데이터 속성의 장점 데이터 속성의 장점은 이전과 같이 hidden으로 태그를 숨겨두고 데.. 2021. 10. 2.
[CSS] vertical-align / middle 제대로 적용되는 조건 한 줄에 있는 글자들의 폰트가 달라 수직 정렬이 달라지는 경우가 생겼다. 그래서 vertical-align을 이용해 맞춰보려고 했는데 잘 안 되었고... 개발자 툴에서 여러 개의 속성을 적용하며 때려맞췄다. 이번엔 제대로 공부해서 알아보자! 1 vertical-align 이란? 인라인 블록 등을 포함한 모든 인라인요소의 수직 정렬을 위해 사용된다. 2 vertical-align의 특징 - inline이나 inline-block 요소에만 적용된다.(table-cell box에서 수직 정렬을 지정한다.) - vertical-align은 정렬하려는 요소를 다른 인라인 요소에 상대적으로 정렬한다. - 대부분의 브라우저에서 작동한다. 3 vertical-align 속성 See the Pen by yanggjoy .. 2021. 9. 30.
[Javascript] 특수 문자 입력(이스케이프 시퀀스) 자바스크립트에서 문자열 도중에는 개행을 할 수 없다. 그래서 문자열에 특수 문자를 입력해서 이러한 개행을 할 수 있는데... alert("안녕하세요 잘 지내세요?"); 위의 코드는 '안녕하세요' 뒤에 enter를 적용했지만 실제 출력은 enter처리 없이 출력된다. alert("안녕하세요\n잘 지내세요?"); 위와 같이 개행은 \n 이라는 특수문자를 이용해 표현할 수 있다. 이와 같이 키보드에서 입력 불가능한 문자를 다른 문자와의 조합으로 표현하는 것을 이스케이프 시퀀스라고 한다. 이스케이프 시퀀스 의미 \b 백 스페이스 \t 수평 탭 \v 수직 탭 \n 개행 \r 복귀 \f 폼 피드 \' 싱글 쿼테이션 \" 더블 쿼테이션 \\ \문자 \0 NULL 문자 \xXX 2글자 XX(16진수)가 표시된 Lati.. 2021. 9. 29.
[Javascript] 문자열 줄바꿈하는 2가지 방법 백준 2번째 문제를 푸는데... 자바스크립트로 줄바꿈을 하는 것 조차 잘 모르겠더라... 그래서 정리 고고! 1 escape 문자 사용하기 문자열에 New line을 뜻하는 '\n' 이스케이프 문자를 넣어주면 줄바꿈 된다. 하지만 문자열 안에 escape 문자인 '\n'을 사용하면, 가독성이 떨어진다는 단점이 있따. See the Pen by seyoungjoy (@seyoungjoy) on CodePen. ※Element.innerHTML 요소(element)내에 포함된 HTML 또는 XML 마크업을 가져오거나 설정한다. 2 템플릿 리터럴(Template literals) 문자 사용하기 문자열을 정의할 때 따옴표(', ")를 사용하는 대신 백틱(`)을 사용하면, escape 문자를 사용하지 않아도, 입.. 2021. 9. 28.
[CSS] background-attachment background-attachment 속성 scroll - 화면 스크롤과 함께 배경 이미지도 스크롤된다. fixed - 화면이 스크롤되더라도 배경 이미지는 고정된다. 2021. 9. 26.
[CSS] background-origin 속성 : 배경 이미지 배치할 기준 조절하기 background-position 속성으로 이미지를 배치할 때 origin 속성을 이용하면 유용할거같아 정리한다. 속성 값 설명 border-box 박스 모델의 가장 외곽인 테두리(border)가 기준이 된다. padding-box 박스 모덜에서 테두리를 뺀 패딩(padding)이 기준이 된다. content-box 박스 모델에서 내용 부분이 기준이 된다. 2021. 9. 26.
반응형

티스토리툴바