Grid

1. Grid 구조 : 그리드 컨테이너 (부모) + 그리드 아이템 (자식) 2. Grid Container (부모) //그리드 컨테이너(부모) 영역 .container{ //1.그리드 형태 //grid-template-rows: //행 //grid-template-columns: //열 // fr: fraction (여기로): 숫자비율대로 트랙크기 // 1fr 1fr 1fr grid-template-rows: repeat(3, 1fr); //auto-fill:크기 지정 안하고 최대한 셀 채움 //minmax(최소,최대) grid-template-columns:repeat(auto-fill, minmax(100px, auto)); //auto-fit : auto-fill과 유사한데 fit하게 채움 //크기..

• format_list_bulleted CSS
• · 2023. 10. 23.
• textsms

Flex

1. justify-content - 가로선 상에서 정렬 (1) flex-start : 요소들을 컨테이너 왼쪽 정렬 (2) flex-end : 요소들을 컨테이너 오른쪽 정렬 (3) center : 요소들을 컨테이너 가운데 정렬 (4) space-between : 요소들 사이사이에 간격두기 (5) space-around : 요소들 주위에 동일한 간격두기 2. align-items - 세로선 상에서 정렬 (1) flex-start : 요소들을 컨테이너 꼭대기로 정렬 (2) flex-end : 요소들을 컨테이너 바닥으로 정렬 (3) center : 요소들을 컨테이너 가운데 정렬 (4) baseline : 요소들을 컨테이너의 시작 위치에 정렬 (5) stretch : 요소들을 컨테이너에 맞도록 늘리기 3. fl..

• format_list_bulleted CSS
• · 2023. 10. 19.
• textsms

[웹페이지 #01] 3. 메인페이지 상단 공지 & 하단 푸터 (HTML, CSS)

1. 상단 공지 * HTML 코드 [ TMI 공지 ] 추석 전에는 7조였는데,, 쉬고 오니 2조가 되었습니다. 👉 안녕하세요 7ㅏ즈아 2조입니다. 😃 * CSS 코드 .notice-word { /*상단 공지*/ color: #f9f3cc; font-weight: 700; font-family: 'Noto Sans KR', sans-serif !important; font-size: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 30px; background-color: #6b85a0db; } 2. 하단 푸터 HTML & CSS * HTML 코드 리액트 ..

• format_list_bulleted CSS
• · 2023. 10. 7.
• textsms

[웹페이지 #01] 2. <div>태그 여러 개로 소개글 그리기 (HTML, CSS)

1. CSS 코드 /*첫번째 구간*/ .top-layout { display: flex; justify-content: center; /*가운데오게*/ } .top { width: 900px; display: flex; justify-content: center; /*가운데오게*/ padding-bottom: 40px; } .face-img { height: 300px; width: 260px; margin: 30px auto; } .top-word { text-align: left; width: 800px; height: 330px; padding-top: 30px; padding-left: 20px; border-radius: 4px; flex-direction: column; } /*두번째 구간*/..

• format_list_bulleted CSS
• · 2023. 10. 6.
• textsms

[웹페이지 #01] 1.반응형 헤더 (HTML, CSS)

nav태그에 대해 인원1블로그주소 인원2블로그주소 인원3블로그주소 인원4블로그주소 현재 기온 : 태그 * 같은 페이지 / 다른 페이지 안에 다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션 * 태그를 태그 안에 사용하는 것이 일반적 .navbar a { text-decoration: none; /*태그 밑줄긋기 효과 없애기*/ color : white; } .navbar { display: flex;/*아이템들 가로로 나란히 배치*/ justify-content: space-between;/*같은 중심축 기준: 아이템 사이에 공백 넣기*/ align-items: center; /*수직축 중간 배치*/ background-color: #8EACCD; /*배경 색상*/ padding: 8px 12px; ..

• format_list_bulleted CSS
• · 2023. 10. 6.
• textsms