☰

홈페이지 제작에 사용된 기술 및 특징

'홈' 페이지

Fade Image Table Image HTML Image

1. HTML에서 div와 section 태그로 화면을 구역별로 나눴고 a href="" 형식을 사용해서 버튼을 누르면 해당 섹션으로 바로 이동할 수 있도록 만들었습니다.
2. CSS에서는 flex를 사용해서 레이아웃을 가로로 정렬하고 :hover로 마우스를 올렸을 때 색이 변하게 만들었습니다.

'생성형 AI란' 페이지

1. flexbox를 활용한 테이블 구조
2. li::before를 통해 리스트에 아이콘 형식 표시
3. ai-block카드 디자인 효과로 그림자와 모서리를 둥글게 해서 깔끔하게 함

'AI와 웹개발'페이지

페이드 애니메이션
Fade Image Table Image HTML Image

1. @keyframes fadeInUp 이 애니메이션은 각 테이블 행이 점차적으로 위로 올라오며 나타나는 효과를 나타냅니다.
2. .ai-table tbody tr 이 부분은 .ai-table 클래스 내의 tbody 요소 안에 있는 모든 tr(테이블 행) 요소에 애니메이션을 적용합니다.
3. nth-child 선택자는 각 테이블 행에 대해 애니메이션이 순차적으로 지연되도록 설정합니다. 즉, 각 행의 애니메이션이 다른 시간에 시작됩니다.

'도입 시 고려사항' 페이지

스크롤 애니메이션
Fade Image Table Image HTML Image

1. html에서 애니메이션을 넣을 요소를 class지정
2. css에서 opacity:0->1 요소가 보이지 않다가 보이도록. transform:translateY(20px)->(0) 요소를 20px 아래에서 제자리에.transition :all 0.5s ease; 상태가 바뀔 때 0.5초동안 부드럽게 애니메이션 적용
3. .line요소를 선택하여 스크롤이 발생할 때 실행할 함수에서 요소가 화면 안에 들어있는지 확인 후 있다면 .show요소를 붙여서 애니메이션 실행

'팀소개' 페이지

Fade Image Table Image HTML Image css Image

team-row을 이용하여 첫 줄엔 사진 3개, second-row는 두 번째 줄에 사진 2개가 들어있게 했습니다. image-container는 사진과 오버레이를 감싸는 박스입니다.
overlay는 기본 opacity: 0이고, 마우스 올리면 파란 배경으로 0.3초간 서서히 나타납니다. 또한 사진을 border-radius를 이용하여 원형으로 만들었습니다. overlay-box에는 이름, 역할, 버튼이 들어갑니다. 버튼에 마우스 올리면 배경은 검정, 글자색은 흰색으로 변경됩니다.