전체 글 (64) 썸네일형 리스트형 (HTML, CSS) <input type = "button">과 <button>차이 , 버튼에 아이콘이 안 나오는 이유 으로 버튼을 만들고, 그 안에 font awsome의 i태그를 넣어 버튼 안에 아이콘을 넣어보고자 했다. 근데 아무리 해도 아이콘이 나오질 않았다. 처음에는 오타 때문인 줄 알았는데 다름 아닌 를 사용했기 때문이다. 를 으로 바꾸고 나니 아이콘이 아주 잘 나왔다. 와 의 차이 는 중첩된 태그를 지원하지 않는 독립적인 개체다. 따라서 태그를 안에 넣었을 때 읽어낼 수 없다. 따라서 버튼 안에 다른 요소를 넣고 싶다면 가 아닌 을 써야 한다. (Javascript) local storage에 값 저장하기 자바스크립트로 투두리스트를 만드는 중, 새로고침을 하면 값이 사라지기에 저장하는 방법을 찾아보던 도중 local storage에 값을 저장할 수 있다는 것을 알게 되었다. 생각보다 사용 방법은 아래와 같으며 몹시 간단하다. localStorage.setItem("key1", "apple"); //로컬스토리지에 요소 저장, 왼쪽요소는 키로 오른쪽요소는 값으로 저장됨 localStorage.getItem("key1"); //키로 로컬스토리지에서 값 가져오기 localStorage.removeItem("key1"); //키로 로컬스토리지에서 요소 제거 localStorage.clear(); //로컬스토리지 전체 비우기 중복 없는 유일한 키값 만들기 이때 키값을 유일무이한 값으로 지정하고 싶으면 아래처럼 설정하.. (CSS) 변수 사용하기 css를 작성하다 보면 특정 색상이나 폰트 사이즈를 반복해서 사용하는 경우가 많다. 이때 이 반복되는 부분을 변수를 선언해 사용하면 추후 수정에 용이하다. 변수 선언 : root : root 클래스 안에 변수를 넣으면 html 문서 어디에서든 변수에 접근이 가능해 흔히 사용된다. --main-color : 변수명 앞에는 --를 붙인다. :root { --main-color:#d61111; } 변수 사용 변수 사용시에는 var() 안에 변수명을 적는다. div { background-color : var(--main-color); } (CSS 선택자 2편) combinator, attribute란? 이전에 css 선택자 중 pseudo selector를 설명한 적이 있다. 이전 포스팅에서도 언급했지만 html 요소를 css로 꾸며주려면 정확히 어떤 html요소를 꾸밀지 알아야 한다. 이렇게 html 요소를 선택하는 하는 것을 css selector(선택자)라고 한다. css selector 종류는 아래와 같다. id와 class pseudo selector combinator attribute 이중 id와 class, 그리고 pseudo selector는 이전에 다루었고, 이번 포스팅에서는 combinator와 attribute를 다룬다. combinator combinator는 결합자라고 불리는데, 선택자를 결합하는 형태로 선택을 하기 때문이다. 부모 자식 : 부모 아래에 있는 모든 자식이 선택됨.. (CSS) 개발자 모드 css 적용 안될 때, 스타일 취소선 해결법 css로 열심히 꾸미다가 css가이 적용이 안되어서 개발자 도구를 열어보았다. 확인해 보니 해당 부분에 취소선이 그어져 있었다. 결국 취소선을 해결하기 위해 찾아봤고 그 결과 css에는 우선순위가 있어서, 스타일이 겹치면 우선순위가 높은 스타일이 적용된다는 것을 알게 되었다. 확인해 보니 내가 적용하고 싶었던 스타일은 class로 작업하고 있었고, 해당 요소에 스타일이 겹치는 id가 있었는데, id가 class가 우선순위가 높아서 class의 css가 적용되지 않는 것이었다. 참고로 css에서 우선순위는 아래와 같다. 참고로 우선순위가 같으면 더 뒤에 위치한 css가 적용된다. 속성 값 뒤에! important를 붙인 속성 HTML에서 style을 직접 지정한 속성 #id 속성 .클래스, :추상클래스.. (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)을 추가할 수 있다. 속성이란 사용자가 원하는 기준에 맞.. (CSS) position의 속성 - reletive, absolute이란? position은 문서상에 요소를 배치하는 방법을 결정한다. 또한 top, bottom, left, right를 추가적으로 사용하여 요소의 위치를 결정할 수 있다. position에는 5가지 속성이 있다. static(기본값) relative : 자기 자신을 기준으로 이동 absolute : 가장 가까운 부모를 기준으로 이동 sticky : 위치 고정 (부모 영향을 받음) fixed : 위치 고정 (부모 영향을 받지 않음) 이 중 fixed와 sticky는 아래 포스팅에서 다루었고, 이번 포스팅에서는 relative와 absolute를 다룬다. (CSS) fixed와 sticky 차이, 화면에 요소 고정하기 css에서 특정 요소를 화면에 고정시키고자 한다면 position: fixed; 또는 positi.. (CSS) fixed와 sticky 차이, 화면에 요소 고정하기 css에서 특정 요소를 화면에 고정시키고자 한다면 position: fixed; 또는 position: sticky;를 활용하면 된다. 그런데 둘의 차이점이 궁금해져서 찾아보게 되었다. fixed 부모의 위치와 상관없이 사용하면 해당 요소는 화면에 고정된다. 아래 예시를 보면 부모 div(핑크)를 지나서 스크롤을 해도 그에 영향을 받지 않고 계속 고정되는 모습을 볼 수 있다. HTML 삽입 미리보기할 수 없는 소스 sticky fixed와 거의 비슷하게 동작하나, 부모의 영향을 받는 것이 차이점이다. 부모(핑크)의 내에서는 위치가 고정되지만, 스크롤이 부모(핑크)를 지나가면 고정이 멈추는 것을 확인할 수 있다. HTML 삽입 미리보기할 수 없는 소스 이전 1 ··· 4 5 6 7 8 다음
