반응형 html16 [HTML] HTML HTML- 웹 페이지의구조와 콘텐츠를 정의하는 마크업 언어- 구조: , , , - 시멘틱태그(SEO): , , , , , , - 텍스트: -, , , , - 리스트: , , - 테이블: , , , - 미디어: , , , - 폼: , , , , , , , , , , 2025. 4. 4. [웹개발] 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. [GitHub] GitHub Profile 1. GitHub 접속2. 로그인하기3. Repository 생성- Repository 탭에서 New 클릭- github name과 동일한 이름으로 Repository Name 설정4. README.md 생성- Markdown/HTML을 사용하여 README.md 작성 2025. 3. 14. [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. [JavaScript] 태그 속성값 제어 태그 속성값 제어더보기/* 속성값 확인하기 */const tag = document.querySelector("선택자");const tagAttr = tag.getAttribute("속성명");/* 속성값 변경하기 */const tag = document.querySelector("선택자");tag.setAttribute("속성명", "값"); 2025. 3. 6. [CSS] 폰트 폰트- 구글 웹 폰트 적용: https://fonts.google.com/- Font Awesome: https://fontawesome.com/더보기@charset "utf-8";/* 폰트의 굵기 */font-weight: normal;font-weight: bold; /* 폰트의 크기 */font-size: 60px;font-size: 1rem; /* 최상위 html 기준 상대 비율로 변환 */font-size: 1em; /* 부모 태그 기준으로 상대 비율 적용 *//* 폰트 모양(시스템 폰트: 기본 폰트) */font-family: "돋움";font-family: "굴림";font-family: "serif";font-family: "arial";/* 구글 웹 폰트 */@import url('htt.. 2025. 3. 5. [CSS] CSS 선택자 CSS 선택자더보기@charset "utf-8"; /* 여러줄 주석: 설명글 삽입시 사용*//* 모든 태그 선택자 */* { border: 1px solid black;}/* 태그 선택자: 해당 태그 모두 선택 */h1 { border: 1px solid black;}/* 자손 선택자: 직계 자식과 손자까지 모두 선택 */p strong { border: 1px solid black;}/* 자식 선택자: 직계 자식만 선택 */ul > li { border: 1px solid black;}/* 그룹 선택자: 해당 선택자들 모두 선택 */h1, h2, h3 { border: 1px solid black;}/* 순서 선택자: 해당 순서의 자식 선택 */ul li:nth-of-type(1) { .. 2025. 3. 5. [HTML] 외부파일 연동(CSS, JavaScript) 외부파일 연동더보기더보기TagDescriptioncss 파일 연동javascript 파일 연동외부파일 연동 예시더보기더보기 ... 2025. 3. 5. [CSS] 목차 2025. 3. 5. 이전 1 2 다음 반응형
