HTML31 [React] 리액트에서 스타일을 적용하는 두 가지 방법 리액트에서 스타일을 적용하는 방법은 크게 두 가지가 있습니다. JSX 내부에서 style 객체 사용하기 외부 CSS 파일을 만들어서 불러오기 //JSX 스타일 객체방식 //외부 CSS 파일과 className 1. JSX 내부에서 style 객체 사용하기style={{ ... }} 또는 style={styles.이름} → JSX 안에서 직접 스타일을 작성 변환한 스타일 객체const styles = { aboutSection: { padding: '2rem', backgroundColor: '#fefefe', border: '1px solid #ddd', borderRadius: '8px', marginTop: '2rem', }, heading: { color: .. 2025. 5. 23. [AI활용]uiux, html&css 코딩 한번에 끝 클로드 활용, 웹사이트 코딩하기 개발 코드 잘 만들어 주기로 소문난 클로드를 활용해서 html css로 구성된 웹사이트를 만들어 보겠습니다. 결과물 먼저 보면 아래와 같아요. 생각보다. 그럴듯 하게 나와서 놀랐습니다... 심지어 반응형 까지 지원합니다! AI 프롬프트 명령어 이전 글에서 Chat GPT를 통해 얻는 소스를 그대로 가져가서 입력했어요. 이전글 -https://lionbum.tistory.com/266 웹사이트를 디자인 해줘. 빵집이고, 타이틀은 오늘도 베이글 이야.(bagel for today)특징 - 심플한 레이아웃 –직관적인 구성으로 가독성 강화- 따뜻한 색감 – 브랜드 무드보드에 맞춘 컬러 적용- 고퀄리티 이미지 – 베이글과 매장의 따뜻한 분위기 전달- 깔끔한 폰트 – 가독성이 .. 2025. 3. 20. [html,js,css] ai 클로드 활용, 플러그인 없이, 스와이프 슬라이드 만들기 슬라이드를 넣고 싶을때, 주로 플러그인을 활용하지만 종종, 간단한 슬라이드가 필요할때가 있습니다. 그래서 모바일에서 터치 슬라이드로 활용할 수 있는 슬라이드를 만들고자,클로드 ai를 활용해서 슬라이드를 제작해 봤습니다. 코드 생성은 클로드 https://claude.ai/ 를 활용했습니다. 클로드 ai 요청 명령어" html 과 css 만으로 모바일에서 좌우로 스와이프 되는 기능이 있는 슬라이드를 만드려고해. 오른쪽이나 왼쪽으로 스와이프 하면 다음이나 이전 페이지로 넘어가는거야. 각 페이지에는 정중안에는 h3의 텍스트가 위치해 있어. 페이지는 무한정으로 생산 가능하게" 1. html 첫번째 슬라이드 .. 2025. 3. 12. 챗 GPT 에게 퍼블리싱 시켜보기(말풍선 css html) AI에게 문의하세요! 챗 지피티에게 이 이미지를 보여주고 html 과 Css 로 구현해 달라고 했을 때의 결과물?!정말이지 GPT 덕에 빨라지는 퍼블리싱... ㅎㄷㄷ 2024. 11. 14. [Javascript, css] 스크롤 내리면 카운팅 시작 되는 소스 안녕하세요! 카운팅 숫자의 업그레이드 버전을 알아보겠습니다. 우선 구현이 어떻게 되는지 결과 부터 보시죠!스크롤을 내려 주세요! Result Html Count number 사용자 명 방문자 명 대기시간 분 대기문서 건 JavaScript function animateValue(id, start, end, duration) { var range = end - start; .. 2024. 6. 25. [CSS]마우스 호버시 아이콘 모양 변경(사이드바 보기/감추기역할) 주로 사용된 csstransform:hover 1. html 2. CSS.arrow { z-index: 999; top: 50%; left: 0px; position: fixed; transform: translateX(100px) translateY(-50%) rotate(0deg) translateZ(0px); transition: transform .3s ease-out; cursor: pointer !important;}.arrow .icon-wrap { justify-content: center; align-items: center; width: 2rem; he.. 2024. 6. 19. [jQuery]셀렉트박스+제이쿼리, 셀렉트 선택 시 내용 보여지게 셀렉트 박스에서 선택 시 해당 내용으로 이동하게 하는 제이쿼리 소스 입니다. 별도 페이지 생성이 필요 없으며 id 값으로 해당 내용을 감추거나 보여줍니다. 적용 이미지 위 디자인과 같이 책보는 느낌처럼 활용도 가능한 소스 입니다. 탭과 유사한 기능이라고 보시면 됩니다. HTML 1. Step1 : Lorem Ipsum is simply dummy text Chapter 1 : Lorem Ipsum is simply dummy text Chapter 2 : Select another text Chapter 3 : Selet third text box 1. Step1 : Lorem Ipsum is simply dummy text Chapter 1 : Lorem Ipsum is simply dummy text.. 2024. 2. 22. [javaScript] 클릭 시 클래스 명 변경 되는 자바스크립트 클릭시 자동으로 아이콘의 클래스 명이 변경되게 하는 소스 입니다. 아이디 저장 과 같은 기능뿐 아니라, 클래스 명이 토글 형태로 변경 되어야 하는 부분에 사용할때 가능 합니다. *방법 : 폰트 아이콘의 클래스명을 제어해서 아이콘 모양을 변경해줍니다! html 아이디 저장 css .login_save{ margin:3em } .login_save i{ font-size: 26px; padding-right:3px; cursor:pointer; font-weight:400; color:#999; letter-spacing: -1px; } .login_save i.xi-check-circle{ color:#000 } JavaScript const logo = document.getElementById("sta.. 2023. 11. 29. [css] white-space 여백 공백 처리 속성(pre, pre-wrap,pre-line) , br 태그 먹을까? html에 내용을 넣을때, white-space 속성을 사용하는 경우가 있습니다. 여백과 공백을 다루는 white-sapce 속성에 대해서 조금더 자세히 알아봤어요! 줄바꿈 부분이 각 속성마다 다르기에 문득,, br 태그를 통해 줄바꿈이 가능한지 궁금 했습니다. 공백과 들여쓰기 줄바꿈 normal 공백 여러개가 있어도 1개만 적용 자동 줄바꿈 nowrap 공백 여러개가 있어도 1개만 적용 줄바꿈 없음 pre 공백 있는 그대로 표시 줄바꿈 없음 pre-wrap 공백 있는 그대로 표시 자동 줄바꿈 pre-line 공백 여러개가 있어도 1개만 적용 자동 줄바꿈 break-spaces 공백 있는 그대로 표시 자동 줄바꿈 pre / pre-wrap / pre-line 속성을 각각 비교해 보기로 했습니다. - 같은.. 2023. 11. 21. CSS 애니메이션 타이밍 효과 비교 (linear, ease, ease-in, ease-in-out) 주 사용 요소 animation-timing-function, 대표적인 설정값 linear : 일정한 속도로 진행 ease : 천천히 시작되고 속도가 줄어들면서 끝난 ease-in : 천천히 시작 ease-out : 빠르게 시작 ease-in-out: 빠르게 시작되어 평균속도 유지 Result 각 버튼을 클릭하면 속도확인 가능합니다. Html 기본값 linear ease ease-in ease-out ease-in-out Css div{ margin:50px auto; display:block; vertical-align: top; width:100px; height:100px; background:#202228; border-radius:6px; text-align:center; line-height:.. 2023. 8. 2. [Css 활용] 말풍선 위 아래로 움직이는 효과, 키프레임 주 사용 CSS - animation - keyframe + animation-timing-function + flex - 정가운데 배치 Html Css .wrap { height:100vh; display:flex; align-items:center; justify-content:center; } .moving { animation: move 0.7s ease-in 0s infinite alternate; margin-top: 0; width:80px } @keyframes move { 0% {margin-top: 0px;} 100% {margin-top: 10px;} } Result *result 클릭해 주세요. 2023. 8. 1. [CSS 활용] css로 블러 효과(포토샵 blur 효과 주기) HTLM Whereas disregard and contempt for human rights have resulted Go ahead, resize me. CSS @import url('https://fonts.googleapis.com/css2?family=Cinzel&family=Permanent+Marker&display=swap'); body { background: url("https://images.unsplash.com/photo-1593418270780-4c6e6b7eb5af?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80") no-repeat ce.. 2023. 6. 15. CSS 선택자 연습 게임 https://flukeout.github.io/# CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io CSS 선택자 연습 2023. 1. 8. Flex 속성 연습 하기 추가 사이트 다양한 샘플을 테스트해볼 수 있는 사이트 https://codepen.io/enxaneta/pen/adLPwv Flexbox playground ... codepen.io 플렉스 게임으로 익히기 http://www.flexboxdefense.com/ Flexbox Defense Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS! www.flexboxdefense.com 2023. 1. 8. 크리스마스, 눈 내리는 효과 만들기 (자바스크립트) 자바스크립트로 자연스럽게 내리는 눈 효과 만들기 Html css body,div{ margin:0; padding: 0; } .snow{ width:100%; height: 100vh; background-image: url(https://images.unsplash.com/photo-1491002052546-bf38f186af56?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2200&q=80); background-size:cover; } JS function Snowy() { function t() { window.requestAnimationFrame(t), $.clearRect(0, 0.. 2022. 12. 22. CSS 이미지사이즈 맞추기 - object-fit & background 비교 CSS를 이용해 아래처럼 이미지를 가득 채워 넣는 방법으로 object-fit 과 background-size를 활용하는데 결과는 거의 유사하다 코드의 간결함과 호환성 부분을 체크한 뒤 활용 하면 될 듯. object-fit 장점 : 코드가 간편, 이미지나 비디오 적용 가능 단점 : IE 미지원 html object-fit: fill object-fit:contain object-fit: cover css .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } background-size 고정된 이미지라면 css 속성에서 background-imag 에다 넣어주고 서버에서 받아올 경우 아래처럼 이.. 2022. 12. 21. [css 활용] 하이라이터, 형광펜 효과 주기 주 사용 CSS 요소 - 가상 선택자 : before, hover - background: linear-gradient - transition html 마우스를 글자에 올리면 형광펜이 그어지는 효과예요. 그라디언트 컬러를 줄수도 있어요! :-) css body{ background-image:url(https://images.unsplash.com/photo-1601662528567-526cd06f6582?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=830&q=80); background-size:cover; background-position:center center; } .wrap{ mar.. 2022. 11. 3. [CSS 활용]헤더가 고정 되는 테이블, html css 버튼 클릭 -> 지정한 내용 복사 (해시태그내용 복사) 사용되는 요소 이미지 맵 태그안에 usemap 속성 / 제이쿼리 소스 html 헤더 헤더02 헤더03 111111111 222222222 333333333 444444444 111111111 222222222 333333333 444444444 제이쿼리 소스.tableWrapper { border-top: 3px solid #168; width: 400px; height: 300px; overflow: auto; position: relative; } #userListTable { height:600px; } #userListTable th { width: 400px; position: sticky; top: 0px; } .bluetop { bord.. 2022. 4. 8. CSS 활용 - 라디오 버튼 커스텀 스타일 라디오 버튼 스타일 변경 하기 브라우저 별로 다르게 보이는 라디오 버튼 디자인 - 리셋하고 다시 스타일 주기! HTML 커스텀스타일1 커스텀스타일2 CSS .checks { position: relative; height: 20px; padding: 30px; line-height: 20px; } .checks label { font-size: 16px; color: #666; margin-right: 10px; vertical-align: middle; } .checks input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, .. 2022. 3. 23. HTML&CSS 기초 - 요약 (의미,특징,사용법) HTML이란? 웹페이지는 모두 HTML을 사용하여 만들어짐 HTML의 의미와 특징 Hyper Text Markup Language의 줄임말 Hyper Text : 링크 의미 Markup Language : 프로그래밍 언어의 종류/ 정보를 구조적&계층적으로 표현 HTML 파일 확장자 : .html HTML의 역사 제안&개발 : 1990년대 영국의 물리학자 팀 버너스 초기 개발 목적 : 연구원들의 정보와 문서 공유 태그란? HTML은 태그들의 집합 태그로 코드 작성 -> 브라우저 인식 -> 내용 표현 태그 사용 방법 표현 방법 : ~ Hello, HTML 요소란? 태그를 포함한 전체 속성이란? 태그에 대한 추가 정보 제공, 태그 제어 설정값 지정. 속성을 사용하는 방법 시작태그 - 한칸 뛰고(공백) - 속성.. 2022. 1. 16. 깜박이는 효과, on-air 라이브 중 상태 (가상요소,애니메이션효과) 깜박이는 효과 css로 나타내기 녹화중인 것 같은 상태를 보여줄 수 있게 깜박이는 점을 넣는 CSS 온에어, 라이브 방송 중.. 등과 같이 현재 상태를 나타내기에 좋은 css 효과이다. 사용되는 css 속성 가상 요소 - :after 애니메이션 - animation 키프레임 - keyframes animation 속성 상세 css @Keyframe 속성 상세 Html Live Css .on_now_tag{ font-size: 14px; color: #fd183a; padding: 2px 10px; margin-left: -7px; font-weight: 500; } .on_now_tag:after { content: ""; display: inline-block; width: 10px; height: 1.. 2021. 11. 17. [HTML 태그 활용]버튼 클릭시 이미지 다운로드 되는 버튼 만들기 버튼 클릭시 이미지 다운로드 html 신청서나, 양식, 혹은 이미지를 다운 받아야 할경우, 간편하게 쓸수 있는 html 소스 Html 이미지 원본 다운로드 다운로드 할 이미지가 파일이 위치한 경로를 적어야 다운로드가 됩니다! ex) 2021. 10. 13. CSS 디스플레이(display)속성- CSS 디스플레이 속성 기본값 display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나. 대부분의 HTML 요소는 기본적으로 둘 중 하나를 display 속성 값을 가진다. 1. 블록(block) 2. 인라인(inline) 블록(block) { display : block }은 한 라인을 다 쓴다. , , , , , 대표적인 블록(block) 요소 인라인(inlne) { display : inline } 컨텐츠를 감싸는 크기만 갖는다. block속성과 다르게 줄바꿈이 되지 않고, 연달아 쓸경우 옆으로 붙게 된다. , , , 요소는 대표적인 인라인(inline) 요소 **크기를 변화시킬 수 없다. 너비를 주고 싶다면 속성을 block 이나 inline-block 로.. 2021. 10. 10. [CSS 활용]css 활용 예제 - 라디오 버튼을 활용한 선택 버튼 디자인 라디오 버튼 태그 활용 - 버튼 디자인 CSS모바일이나 웹에서 두 가지 중 하나를 택해야 하는 선택지가 있을 경우, 라디오 버튼 보다는 버튼 형태를 많이 사용하는데 기능은 라디오 버튼 기능을 갖지만 모양은 css로 버튼 형태로 주기. HTML라디오 버튼에서, 텍스트를 눌렀을때 같이 선택되게 하려면 id속성과 label for속성을 같게 설정한다. tag label 속성 미혼 기혼 CSS 타입 선택자/인접 선택자 - input[type=radio]+label 선택자 종류 상세 .select { padding: 15px 10px; } .select input[type=radio]{ display: none; } .select input[type=radio]+label{ display: inline-block.. 2021. 10. 7. CSS border-width 테두리 너비 CSS border-width 속성(테두리 너비) 네 테두리의 폭을 지정한다. 너비는 특정 크기 (px, pt, cm, em 등)로 설정하거나 미리 정의 된 값 (thin, medium, thick )으로 설정 p.one { border-style: solid; border-width: 5px; border-color: red } p.two { border-style: solid; border-width: medium; border-color: blue } p.three { border-style: dotted; border-width: 2px; border-color: orange; } p.four { border-style: dotted; border-width: thick; border-color:.. 2021. 1. 22. CSS border 테두리 속성 CSS 테두리 속성 CSS border 속성을 사용하면 테두리의 스타일, 너비 및 색상을 지정할 수 있다. CSS 테두리 스타일 dotted -점선 테두리 dashed -파선 테두리 solid -단색 테두리 double -이중 테두리 groove-3D 그루브 테두리 / 테두리 색상 값 ridge-3D 능선 테두리 / 테두리 색상 값 inset-3D 삽입 테두리 / 테두리 색상 값 outset-3D 시작 테두리 / 테두리 색상 값 none -경계선 없음 hidden -숨겨진 테두리를 정의 HTML A dotted border. A dashed border. A solid border. A double border. A groove border. A ridge border. An inset border. A.. 2021. 1. 21. CSS 컬러 (추천 컬러 사이트) CSS 색상 미리 정의 된 색상이름(blue, orange, red) 이나 RGB, HEX, HSL, RGBA, HSLA 값을 사용하여 지정된다. CSS 색상 이름 미리 정의 된 색상 이름을 사용하여 색상을 지정할 수 있다. LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightYellow PaleVioletRed PapayaWhip Peru CSS / HTML은 140 개의 표준 색상 이름을 지원하고 있다. (출처 : w3school ) CSS 색상 값 RGB 값, HEX 값, HSL 값, RGBA 값 및 HSLA 값을 사용하여 색상을 지정할 수 있다. 컬러 이름 "LightSalmon": rgb.. 2021. 1. 19. CSS선택자 - 1 CSS 선택자 스타일 줄 HTML 요소를 찾거나 선택하는 기능. CSS 선택자 종류 단순 선택자 (타입, ID, 클래스를 기준으로 요소 선택) 조합선택자(+,>...) 가상 클래스 선택자(:hover,:after... ) 가상 요소 선택자(::after, ::before..) 속성 선택자 ([title="this"], [attribute~="value"]..) 단순 선택자 종류 : 타입선택자 / ID 선택자 / 클래스 선택자 타입선택자 html 요소 이름을 기반으로 선택 p, span, b, h1, h2, .... html html 파일의 p 요소에 해당 스타이 적용된다 css p { text-align: left; color: red; } 클래스 선택자 HTML 요소 중에 같은 class 이름이 있는 .. 2021. 1. 18. css 실전 예제 및 레이아웃 익혀볼 사이트 CSS 레이아웃을 배웁시다 이 사이트에서는 모든 웹 사이트의 레이아웃에 사용되는 CSS의 기초를 다룹니다. 이곳에서는 여러분이 선택자와 프로퍼티, 값이 무엇인지 알고 있다고 가정합니다. 그리고 레이아웃 작업이 여러 ko.learnlayout.com 처음 css를 배울때 많이 도움이 되어던 사이트 실전 예저들과 함께 복사하기/ 붙여넣기가 되어서 유용한 사이트 2021. 1. 9. [html/css] text-transform (소문자-대문자 자동변환) CSS text-transform Property 텍스트의 대소 문자를 자동으로 변환해 주는 속성 none 기본값 capitalize 각 단어의 첫번째 문자를 대문자로 uppercase 모든 문자를 대문자로 lowercase 모든 문자를 소문자로 div { text-transform:capitalize } div { text-transform:uppercase} div { text-transform:lowercase} 기본값 없음 상속 예 버전 CSS1 자바스크립트 구문 object .style.textTransform = "uppercase" w3school 샘플 2021. 1. 6. 이전 1 2 다음 728x90 반응형
