본문 바로가기

CSS5

REPL이란? REPL REPL이란 READ-EVALUATION-PRINT-LOOP의 약자로 사용자가 특정 코드를 입력하면 그 코드를 평가하고 코드의 실행결과를 출력해주는 것입니다. REPL R : READ(읽다) E : Eval(해석하다) P : Print(반환하다) L : Loop(반복하다) => 입력한 코드를 읽고, 해석하고, 결과를 반환하고, 종료할 때까지 반복 사이트 추천 (REPLIT) 여러 언어들을 지원하며 RUN 버튼을 클릭해 실행하면 오른쪽 화면에서 바로 실행결과를 확인가능하므로 간단한 기능들을 빠르게 테스트해보고 싶을 때 유용하게 사용할 수 있습니다. Replit: The software creation platform. IDE, AI, and Deployments Run code live in yo.. 2023. 12. 11.

티스토리 원하는 글씨체 적용 안녕하세요. 오늘은 티스토리 블로그의 글씨체를 바꿔보려고 합니다. 저는 원래 깔끔한 스타일의 사각형의 고딕체를 좋아하는데요. 왠지 요즘은 동글동글한 글씨체가 귀여워보이더라고요. 제가 쓰는 폰트 사이트 '눈누' 입니다. https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 글씨체에 따라 저작권 조건이 다르니 꼭 확인하고 사용하셔야 합니다. 우측 상단 웹 폰트로 사용하기 코드를 복사합니다. 화면을 꾸며주는 부분은 css에서 담당합니다. 폰트 역시 화면을 꾸며주는 부분이기 때문에 티스토리 스킨편집 > css 에 적용을 해주도록 하겠습니다. 설정 > 꾸미기 > 스킨 편집 html 편집 클릭 css > 복사한 코드 붙여넣기 ctrl + f > font-family 검색해서 폰트 이름.. 2023. 7. 3.

VSCODE HTML파일 바로 실행하기 OPEN IN BROWSER 위 확장자를 추가하면 HTML 파일을 크롬에서 바로 확인해볼 수 있다. 2023. 6. 15.

[HTML/JS/CSS] box-shadow : 0 14px 0 #E66000; - css 값이 0이면 단위 생략 가능 width: 너비; margin-left: auto; margin-right: auto; - 너비가 지정된 상자 요소를 가운데 정렬 cursor: pointer; - 마우스 커서를 포인터(손가락 모양)으로 변경 flex: 1; - 정렬되는 요소의 너비를 1비율만큼 늘어가게 지정 const ingEl = document.querySelector('img') imgEl.src = '이미지_경로' - js에서 요소의 src 속성 지정 const aEl = document.querySelector('a') aEl.href = '페이지_주소' - js에서 요소의 href 속성 지정 location.href = '페이지_.. 2023. 2. 20.

[CSS] CSS 기초 개념 모음 1. width: 100px; max-width / min-width : 요소의 가로 너비 2. height: 100px; max-height / min-height : 요소의 세로 너비 3. margin-top: 20px; margin-top / margin-bottom / margin-left / margin-right : 요소의 외부(바깥) 여백 4. padding-top: 20px; padding-top / padding-bottom / padding-left / padding-right: 요소의 내부(안쪽) 여백 5. border: 4px solid red; : 요소의 테두리 선 6. border-radius: 10px : 요소의 모서리 둥글게 (50%: 동그라미) 7. box-shadow: 4.. 2023. 2. 16.

이전 1 다음

티스토리툴바