본문 바로가기
반응형

CSS20

[CSS] CSS CSS- 적용: 인라인(style="color: red;"), , - 선택자: *, tag, .class, #id, [attr="val"]- 가상 클래스/요소: :hover, :nth-child(n), ::before, ::after- 박스모델: content, paddind, border, margin, box-sizing(border-box)- 레이아웃: display(block, inline, inline-block, flex, grid, none), position(static, relative, absolute, fixed, sticky)- 반응형 디자인: @media (max-width: 768px)- 변수: :root { --main-color: #3498db; } var(--main-col.. 2025. 4. 4.
[웹개발] CSS 2025. 4. 2.
[웹개발] Frontend 키워드 정리 Frontend- Frontend: UI/UX를 구현하는 작업- HTML(웹페이지 구조 정의) / CSS(웹페이지 스타일 정의) / JavaScript(웹페이지에 동적 기능 추가) (개발 역량)- DOM 조작 및 이벤트 처리 / 반응형 웹 디자인(RWD) / 웹 성능 최적화(Lazy Loading, Code Splitting)- REST API 및 GraphQL 통신 / 상태관리(Redux, Recoil, Vuex, Zustand) / 웹보안(XSS, CSRF) (개발 환경)- 패키지 관리자(npm, yarn)- 번들러 및 빌드 도구(Webpack, Vite)- 스타일링(Tailwind CSS, Styled Components, Sass)- 테스트(Jest, Cypress, React Testing Li.. 2025. 4. 2.
[CSS] 반응형 화면(미디어쿼리) 미디어 쿼리더보기/* 미디어 쿼리(반응형 화면) */@media screen and (max-width: 1000px) {}@media screen and (min-width: 800px) {} 2025. 3. 8.
[CSS] 변형 / 변화 2D 변형더보기/* 2D 변형: inline-block, block만 적용 가능 */transform: scale(1); /* 확대, 축소 */transform: skewX(20deg); /* x축 비틀기 */transform: skewY(20deg); /* y축 비틀기 */transform: translateX(50px); /* 기존 위치 대비 x축 이동 */transform: translateY(50px); /* 기존 위치 대비 y축 이동 */transform: rotate(45deg); /* 회전*/3D 변형더보기/* 3D 변형: 부모요소에 perspective 필수 */perspective: 400px; /* 원금감 설정 */tran.. 2025. 3. 7.
[JavaScript] BOM(브라우저 객체 모델) Window 객체 Navigator 객체더보기/* 사용자 정보 확인 */const user = navigator.userAgent;/* 정규표현식: /(슬러쉬)내 문자가 ver내에 있는지 판단. 대소문자 구분 */const isIE = /trident/i.test(ver);/* Explore 접속시 경고 표시 */if(isIE) { alert("익스플로러 브라우저로 접속하셨네요. 이 웹페이지는 익스플로러를 지원하지 않습니다. 다른 브라우저로 접속해 주세요.");} 2025. 3. 6.
[CSS] 그래픽 효과 그래픽 효과더보기/* 투명도 */opacity: 1;/* 박스 그림자 효과. 가로축, 세로축, 흐림정도, 색 */box-shadow: 20px 20px 30px gray;/* 텍스트 그림자 효과. 가로축, 세로축, 흐림정도, 색 */text-shadow: 10px 10px 30px gray;/* 박스 둥글게 설정 */border-radius: 30px;border-radius: 50%;/* 배경 그라데이션: 방향, 출발색, 도착색 */background: linear-gradient(to bottom, blue, red);background: linear-gradient(to top, blue, red);background: linear-gradient(to left, blue, red);backgrou.. 2025. 3. 6.
[CSS] 레이아웃(Layout) CSS Reset더보기* { margin: 0px; padding: 0px; list-style: none; /* list 부호 제거 */ text-decoration: none; /* a 태그 밑줄 제거 */}Layout- float으로 요소를 띄워서 배치더보기/* float 사용시 부모요소에 가상요소 추가 필요 */부모요소::after { content: " " display: block; clear: both;}/* 요소를 띄워서 좌, 우측 위치. 모든 형제 요소들에 float 적용 */float: left;float: right;/* 현재 위치 기준으로 위치 이동 */position: relative;top: 100px;bottom: -100px;left: 100px;right: -1.. 2025. 3. 6.
[JavaScript] 태그 속성값 제어 태그 속성값 제어더보기/* 속성값 확인하기 */const tag = document.querySelector("선택자");const tagAttr = tag.getAttribute("속성명");/* 속성값 변경하기 */const tag = document.querySelector("선택자");tag.setAttribute("속성명", "값"); 2025. 3. 6.
[CSS] 박스(영역) 크기 박스 크기더보기/* 영역별 크기 지정 */width: 100px;height: 100px;/* 영역별 크기 지정: %는 높이값이 지정되지 않음 */width: 20%;height: 20%;/* 영역별 크기 지정: 브라우저 가로 크기 기준(100등분) 지정 */width: 20vw;height: 20vw;/* 영역별 크기 지정: 브라우저 세로 크기 기준 지정 */width: 20vh;height: 20vh;/* 바깥 여백 지정 */margin: 20px /* 상하좌우 여백 */margin: 20px 50px;/* 상하, 좌우 여백 */margin: 20px auto /* 상하는 20px, 좌우는 가운데 균등 배치 */margin: 20px auto 40px /* 상, 좌우, 하 여백 */margin: 0p.. 2025. 3. 6.
반응형

티스토리툴바