TIL 1 : 와이어프레임 & 팀명 구상하기, 기초 팀 페이지 만들기

Timeline

09:00 ~ 11:00 : OT

11:00 ~ 13:00 : 신규 팀 배정 확인 및 팀 프로젝트(와이어프레임 및 팀명 구상) 진행

13:00 ~ 14:00 : 점심 시간

14:00 ~ 16:00 : git & github 기초 개념 강의

16:00 ~ 20:00 : 각자 기초 팀 소개 페이지 제작 (html, css) 하단 내용

20:00 ~ 21:00 : 팀원끼리 금일 진행한 TIL 공유 및 서버 개념, 남은 공부 마무리

 

git & github 기초 개념 강의

https://americanoallday.tistory.com/22

GIT & GitHub 기초

 

오늘 만든 팀페이지 화면

 

새로 배운 기능 Hover

hover는 CSS의 가상 클래스 중 하나로, 사용자가 요소 위에 마우스를 올렸을 때 특정 스타일을 적용하는 역할을 함.

button:hover {
    background-color: blue;
    color: white;
}

➡️ 마우스를 button 위에 올리면 배경색이 파란색으로 바뀌고, 글자색이 흰색으로 변경됨.

.profile img:hover {
    border: 3px solid deepskyblue;
    /* 마우스를 올리면 파란색 테두리가 추가됨 */
}

 

        .profile img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            /* 완전한 원형 */
            object-fit: cover;
            /* 비율 유지하며 꽉 채우기 */
            border: 1px solid #ddd;
            /* 테두리 추가 */
            transition: transform 0.3s ease-in-out;
            /* 호버 시 애니메이션 효과 */
        }

        .profile img:hover {
            transform: scale(1.1);
            /* 호버 시 이미지 확대 */
        }

    <div class="pictures">
        <div class="profile">
            <img src="https://i.namu.wiki/i/k05sLvRZcMdhwOC8jpTnUkHCMipfrn7zfw8cj02jcDTibxgRUccQW_BQpujPlcC57iyOgb5DG-Ro8HJANYRievvIwyad-XvU8v7ZQlxhKnv4vhKfTZG0cWd3NabCezBWQW4A1MQrwQs-RQYdLARuOQ.webp"
                alt="김동희">
            <div class="name">
                <h5 class="person-name">김동희</h5>
                <h5 class="mbti">ISTP</h5>
            </div>
        </div>
        <div class="profile">
            <img src="https://i.namu.wiki/i/k05sLvRZcMdhwOC8jpTnUkHCMipfrn7zfw8cj02jcDTibxgRUccQW_BQpujPlcC57iyOgb5DG-Ro8HJANYRievvIwyad-XvU8v7ZQlxhKnv4vhKfTZG0cWd3NabCezBWQW4A1MQrwQs-RQYdLARuOQ.webp"
                alt="김태정">
            <div class="name">
                <h5 class="person-name">김태정</h5>
                <h5 class="mbti">ISFP</h5>
            </div>
        </div>
        <div class="profile">
            <img src="https://i.namu.wiki/i/k05sLvRZcMdhwOC8jpTnUkHCMipfrn7zfw8cj02jcDTibxgRUccQW_BQpujPlcC57iyOgb5DG-Ro8HJANYRievvIwyad-XvU8v7ZQlxhKnv4vhKfTZG0cWd3NabCezBWQW4A1MQrwQs-RQYdLARuOQ.webp"
                alt="이희망">
            <div class="name">
                <h5 class="person-name">이희망</h5>
                <h5 class="mbti">ENFJ</h5>
            </div>
        </div>
        <div class="profile">
            <img src="https://i.namu.wiki/i/k05sLvRZcMdhwOC8jpTnUkHCMipfrn7zfw8cj02jcDTibxgRUccQW_BQpujPlcC57iyOgb5DG-Ro8HJANYRievvIwyad-XvU8v7ZQlxhKnv4vhKfTZG0cWd3NabCezBWQW4A1MQrwQs-RQYdLARuOQ.webp"
                alt="박선영">
            <div class="name">
                <h5 class="person-name">박선영</h5>
                <h5 class="mbti">INFP</h5>
            </div>
        </div>
    </div>

* alt는 HTML의 <img> 태그에서 사용하는 속성으로, 이미지의 대체 텍스트(Alternative Text) 를 지정하는 역할