환경 : Visual Studio Code [ 링크 디자인 ] class="link"인 경우 디자인을 설정 방문한 경우의 색상은 :visited 상태에 대해서 디자인을 하면 된다 [ 전체 코드 ] 링크 디자인 구글로 이동 구글로 이동 (+) transition을 통해 특정 속성의 변화 속도를 지정 transision: 적용항목 변화시간 변화방식; - 변화방식은 크게 3가지가 있음 └ linear : 변화속도가 일정한 것 └ ease-in, ease-out, ease-in-out은 시작과 끝을 부드럽게 ·ease-in은 시작을 부드럽게 ·ease-out은 끝을 부드럽게 ·ease-in-out은 시작과 끝을 모두 부드럽게 (+) 애니메이션 효과 추가 display:inline에서는 불가능 transform ..

환경 : Visual Studio Code - 다양한 방법으로 다양하게 테이블을 꾸며보자 [ 전체 코드 ] 테이블 디자인 기본 테이블 강좌명 강의시간 수강료 구분 자바 마스터 과정 90 1000000 온라인 파이썬 기초 60 600000 온라인 웹 개발자 단기완성 120 1200000 오프라인 테두리가 있는 테이블 강좌명 강의시간 수강료 구분 자바 마스터 과정 90 1000000 온라인 파이썬 기초 60 600000 온라인 웹 개발자 단기완성 120 1200000 오프라인 줄무늬 테이블 강좌명 강의시간 수강료 구분 자바 마스터 과정 90 1000000 온라인 파이썬 기초 60 600000 온라인 웹 개발자 단기완성 120 1200000 오프라인 가로 줄무늬 테이블 강좌명 강의시간 수강료 구분 자바 마스터..

환경 : Visual Studio Code [ 로그인 창 만들기 코드 ] 로그인 회원가입 [ 위의 코드를 모듈화 하여 재사용하기 편하게 만들기 ] (주의) border의 경우 영향을 주기 때문에 제거한 후, test.css에서 box-shadow를 사용하여 테스트 시 사용한다. (위 코드에선 전체적인 모양 틀을 이해하기 위해 border 속성을 사용하였음.) - commons.css /* 만든이 : 예림이 만든날짜 : 2024.02.07 */ @charset "UTF-8"; /* 전체 선택자 - 모든 태그에 설정 */ * { box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* 컨테이너(.cont..

환경 : Visual Studio Code [ 태그 명에 스타일을 주기 ] 로그인 비밀번호를 잊으셨나요? [ 클래스 명을 주어 스타일을 부여하기 ] 태그에 스타일을 줘버리면 해당 페이지에 있는 모든 태그에 똑같이 적용되기 때문에 이후 불편한 현상들이 발생할 수 있다. 따라서 각각의 태그들에게 클래스 속성을 사용하여 해결하면 된다. 클래스 명을 동일하게 주어, 공통으로 적용되는 코드를 작성할 수 있다. 같은 클래스 내의 각각의 클래스 명을 또 부여하여 각각의 태그에 각각의 스타일을 부여할 수 있다. (대분류/소분류 개념임) 로그인 비밀번호를 잊으셨나요? (+) 클래스 선택자를 사용하여야 클래스 속성마다 스타일을 지정할 수 있다. 개인 공부 기록용입니다:)

환경 : Visual Studio Code 기본적인 폼의 모양을 깔끔하게 만드는 형태로 진행. 추가적인 디자인은 각자의 몫. [ 배치 방향 ] inline : 좌 → 우로 배치. 크기 지정 불가 block : 상 ↓ 하로 배치. 크기 지정 가능 inline-block은 혼합된 형식. 방향은 inline 크기는 block display 속성으로 설정. 태그마다 고유한 배치 방향 존재 [ 크기 설정 ] border-box : 테두리를 기준으로 크기 결정 content-box : 내용을 기준으로 크기 결정 + box-sizing 속성으로 설정 로그인 Login 개인 공부 기록용입니다:)

환경 : Visual Studio Code [ 태그 ] Cascading Style Sheets(계층적 스타일 시트)의 스타일 규칙을 HTML 문서에 적용하는 데 사용 웹 페이지의 레이아웃, 디자인, 색상 및 기타 스타일 속성을 제어 화면에 보이지 않는 속성이기 때문에 [ 사용 예 ] CSS 주요 속성 (+) input { } : name=keyword인 태그를 선택하는 선택 속성자이다. (+) padding을 줄 때 px과 em을 비교한 코드이다. (+) 각각의 태그 별로(, ) 스타일을 지정해줄 수 있다. 개인 공부 기록용입니다:)