[CSS] reset.css

reset CSS 란 html로 코드를 작성하고 브라우저로 실행하면 내가 적용하지 않았음에도 자동으로 margin값이 들어가거나 다른 설정값이 들어가있는 경우가 있다. 이는 웹 브라우저마나 default값으로 스타일이 적용되어 있기 때문인데. 우리는 브라우저마다 기본 default 스타일 값이 아닌 동일한 CSS 스타일을 보여주기 위해 default 값을 초기화 해주어야한다. 그래서 이 default 값을 초기화해주는 코드가 reset.css 이다 링크 주소 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe..

• format_list_bulleted Programming Language/HTML\CSS\JavaScript
• · 2024. 1. 9.
• textsms

VSCode 주석 색상 변경

VSCode를 사용하다가 테마를 변경하다보니 이것저것 눈에 보이는 것들을 조금 변경시켜보고 싶었다. 그러다가 주석색상을 변경하는 방법을 알게 되어서 정리 파일 > 설정 > 버튼 클릭 그러면 settings.json 파일이 나오게 되고 괄호 안에 해당하는 코드를 넣어주면 된다. // 주석 코드 색상 변경 "editor.tokenColorCustomizations": { "comments": "색상코드입력" //"#828dc093" },

• format_list_bulleted Programming Language/HTML\CSS\JavaScript
• · 2024. 1. 9.
• textsms

[HTML] CSS, JS 외부파일 참조

CSS 외부 파일 참조 JS 외부 파일 참조 >> head + defer : 모두 로드가 완료되고 나서 JS 실행이 보장됌. 호출 순서대로 JS 실행이 보장됌

• format_list_bulleted Programming Language/HTML\CSS\JavaScript
• · 2024. 1. 9.
• textsms

[CSS] Grid 설정

다른 분의 코드를 가져와서 내코드에 적용해보는 시간을 가져보겠다! 여기서 볼 수 있듯이 grid-template-columns:4fr 6fr 부분이 주로 봐야하는 부분인데 columns(행) : 가로 / rows(열) : 세로 columns는 가로로 40% 60% 비중을 차지하도록 설정하는 느낌으로 기억하기로 했다. rows는 세로로 설정 .container { display:grid; grid-template-columns:4fr 6fr; grid-gap:1rem; background-color:lightgray; } .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; background-color: lig..

• format_list_bulleted Programming Language/HTML\CSS\JavaScript
• · 2024. 1. 9.
• textsms

[Javascript] 문자열을 배열로 변환 : split()

split() 함수 : 문자열을 일정한 구분자로 잘라서 배열로 저장하기 위해서는 split() 함수를 사용 string.split(separator, limit) 01 구분자를 비우는 경우 : string.split(); const str = "apple banana orange"; const arr = str.split(); document.writeln(arr); // apple banana orange document.writeln(arr.length); // 1 02 구분자에 띄어쓰기를 넣는 경우 : string.split(" "); 공백을 기준으로 단어 하나하나씩을 배열에 순서대로 저장한다. const str = "apple banana orange"; const arr = str.split("..

• format_list_bulleted Programming Language/HTML\CSS\JavaScript
• · 2024. 1. 9.
• textsms

[CSS] 마우스 커서 올리면 효과주기 : hover

hover CSS의 :hover 선택자를 사용해서 마우스를 요소 위에 올렸을 때 적용되는 스타일을 정의한다, :hover는 링크, 버튼, 이미지 등 다양한 요소에 사용할 수 있다 .col { border: 2px solid rgb(72, 94, 72); border-radius: 10px; padding: 10px 10px 10px 10px; margin: 10px 50px 10px 50px; background-color: white; } .col:hover { border: 2px solid rgb(72, 94, 72); border-radius: 10px; padding: 10px 10px 10px 10px; margin: 10px 50px 10px 50px; background-color: whi..

• format_list_bulleted Programming Language/HTML\CSS\JavaScript
• · 2024. 1. 8.
• textsms